블로그, 웹사이트에 AddThis로 공유버튼 추가하기

veneto 2017. 7. 29. 22:38
반응형

현재 저의 블로그에는 공유버튼이 포스트 하단에 있는데 거기에는 페이스북, 네이버, 트위터에만 공유할수 있도록 스킨제작시 만들어져있어서 좀 더 잘보이고 쉬운 공유버튼을 추가해보려고 합니다. 바로 AddThis라는 홈페이지를 이용해서 말이죠.

AddThis : http://www.addthis.com

위의 이미지처럼 사이드쪽에 여러 사이트로 공유시킬수 있는 공유버튼을 만들겁니다. 우선 AddThis사이트에 접속합니다.

먼저 AddThis에 가입을 해야합니다. 가입방법은 구글ID나 페이스북ID 또는 이메일로 가입할수 있습니다. 이메일을 이용해 가입해보겠습니다. 사이트에서 메인화면에 Continue with Email을 클릭합니다.

외국사이트의 가입방법은 정말 간단하죠.! 이메일주소와 비밀번호, 나라만 설정하면 됩니다. 나라는 Korea, Republic of를 선택합니다. 모두 입력후 Let's Get Started를 클릭합니다. 참고로 이벤트 및 프로덕트서비스 이메일받기는 체크하지 않길 권합니다.

이후 나오는 화면에서 공유버튼을 만들것이기에 Share Buttons을 클릭합니다.

다양한 종류가 있는데 저는 Floating타입을 선택할겁니다. 보시면 좌측에 세로로있는 공유버튼이 플로팅타입입니다. 그리고 오른쪽 상단부분을 클릭하면 pc화면과 모바일화면에서 공유버튼이 나타나는 모습을 확인할수 있습니다. 확인후 왼쪽 하단에 Contunue를 클릭합니다.

그러면 공유버튼을 커스텀할수 있는 메뉴가 나옵니다. 좌측 또는 우측 그리고 모바일에서도 설정가능하고 숨길수도 있습니다. 공유버튼에서 보이는 서비스목록을 편집할수도 있고 버튼 디자인도 커스텀할수 있어서 본인 사이트, 블로그에 맞게 열심히 커스텀합니다. 

참고로 구글 애드센스 페이지 수준 광고에서 앵커/오버레이광고를 사용할때 공유버튼의 모바일부분에서 숨김(hide) 또는 다른방향으로 설정합니다. 왜냐하면 앵커/오버레이광고는 모바일화면에서 하단에 노출되기 때문이죠.

저는 페이스북, 트위터, 카카오, 라인, 텀블러, 구글플러스, 링크복사를 설정했습니다. 커스텀 완료후 Save & Continue를 클릭합니다.

이제 마지막 단계입니다. 상단에보면 HTML WEBSITE 또는 워드프레스, 텀블러 등 공유버튼을 설치하는 방법을 알려줍니다. 티스토리는 HTML WEBSITE의 방법을 따릅니다.

우선 공유버튼 HTML소스코드를 우측에 COPY버튼을 클릭해 클립보드로 복사합니다. 두번째로 웹사이트의 </BODY>윗부분에 코드를 복사하면 끝입니다. 티스토리에 소스코드를 넣어봅시다.

티스토리 관리페이지에서 꾸미기부분에 HTML/CSS편집을 클릭합니다.

HTML 에디터에서 제일 하단에보면 </body>부분이 있습니다. 그 위로 아까 복사한 소스코드를 붙여넣기 합니다. 안전하게 엔터한번 누르시고 빈공간에 소스코드를 복사하세요. 복사한 다음 저장을 꼭! 클릭해서 저장한뒤 에디터에서 나옵니다.

그럼 결과를 볼까요? 제 블로그의 아무 포스트를 들어가보았더니 우측에 따라다니는 플로팅타입의 공유 버튼이 생성되었습니다. 

방문자가 해당게시물을 공유하려고할때 우측의 공유 버튼을 클릭하면 해당서비스로 해당글을 바로 공유할수 있습니다. 페이스북, 트위터, 카카오스토리, 라인, 텀블러, 구글플러스, 링크를 공유할수 있는데 방문자 입장에서는 쉽게 공유할수 있어서 글이 좀더 많이 공유될수 있지 않을까 하는 기대를 해봅니다.

반응형