로맨테크

즘 블로그 운영은 매우 일반적이고 더 나아가 페이스북, 트위터, 구글+ 의 대중화로 인해 자기가 올린 글을 SNS를 통해 전파하려는 분들이 많죠. 또한 방문객들 역시 현재 보고 있는 블로그 글이 마음에 든다면 페이스북 등에 다른 사람들과 공유하고 해당 주제를 함께 이야기 하고자 하는 분들이 많습니다. 


일반적으로 소셜 공유 버튼은 본문 아티클 제일 하단 혹은 댓글 바로 위 부분에 배치해두는 경우가 많은데요. 오늘 소개해드리는 소셜 공유 버튼 전문 서비스에서 출시한 AddThis Smart Layers를 이용하면 블로그 좌측에 떠다니는(플로팅) 공유 버튼을 삽입할 수 있습니다. 또한 페이스북 페이지, 트위터 등 팔로우 버튼은 물론 하단에 추천 콘텐츠까지 표시하게 설정할 수 있습니다.


공유 버튼 설정 방법 역시 AddThis 홈페이지에서 간단한 옵션 설정 후 HTML 코드를 받아 붙여넣기만 하면 바로 적용됩니다. 특히 눈여겨 볼 점은 태블릿/모바일 버전에서도 공유 버튼이 적용된다는 점 입니다. 최근 PC 버전보다 모바일 접속량이 더 많은 것을 볼 때 적절한 서비스 제공이네요. 




*. Follow : 우측 상단에 나타나는 각종 SNS의 팔로우 버튼을 추가할 수 있습니다. 현재는 페이스북, 트위터, 링크드인, 구글플러스를 지원하네요. 빈칸의 자신의 프로필 주소를 입력해주셔야 합니다.

*. Share : 떠다니는 플로팅 공유 버튼입니다. 왼쪽 혹은 오른쪽으로 설정할 수 있고 버튼의 갯수도 조정할 수 있습니다.

*. What's Next :  우측 하단 팝업 형식으로 나타나는 추천 콘텐츠입니다. PC, 태블릿에선 보이지만 모바일 페이지에선 보이지 않으니 참고하세요.

*. Recommended Content : 블로그 최하단 4개씩 추천 콘텐츠를 보여줍니다.




위 이미지는 제 블로그에 적용한 모습입니다. 추천 콘텐츠의 경우 Smart Layers를 적용하고 24시간 정도가 지나야 보여지게 됩니다. 또한 공유, 트래픽 등 간단한 통계(회원가입 필요)도 제공합니다. 




코드는 HTML/CSS 편집에서 </body>를 검색하신 뒤 바로 위에 붙여넣기 하시면 됩니다. 추후 코드 수정을 용이하게 하기 위해서 <!-- 스마트 레이어 --> 같은 형식으로 주석을 달아놓으시는 것도 좋은 방법입니다. 

신고
DISQUS 로드 중…
댓글 로드 중…

블로그 정보

로맨테크 - ColorFilter

기술과의 로맨틱한 만남, 로맨테크! 일상속 IT 정보와 이를 활용한 유용한 팁을 다루는 블로그입니다. 모바일/인터넷/컴퓨팅/소셜/쉐어링 그리고 中國관련 내용까지, 놓칠 수 없는 알찬 정보들을 알기 쉽게 소개해 드립니다.

최근에 게시된 글