공유수 보여주는 버블형 SNS버튼들 모음

버블형 버튼이 미관에 좋아서 찾다보니 생각보다 찾기가 쉽지 않아서 링크 모음집을 만들었다.



주의:대부분 공유하고자 하는 주소를 JS를 통해 지정해줄 수 있으며, 어떤 경우엔 반드시 그래야 한다. 따라서 JS에 대한 기본적인 지식이 있어야 한다.(댓글이나 이메일로 문의하실 수 있습니다.)


1. 페이스북 '좋아요[=추천]'
https://developers.facebook.com/docs/plugins/like-button/
가장 간단한 방법은 iframe이다. 필요에 따라 속성을 조정할 수 있다.
이벤트가 발생하면 JS로 알려주는 서비스도 제공한다.


2. 트위터 '트윗'
https://twitter.com/about/resources/buttons#tweet
위에서 얻은 코드에 data-count="vertical" 속성을 추가해주면 된다.
(★data-size="large"로 설정되면 버블 모양이 되지 않으니 주의하라!)
iframe이다.


3. 구글+ '+1'
https://developers.google.com/+/web/+1button/
위에서 크기를 반드시 'tall'로 설정해야 버블 모양이 가능하다.
iframe이다.


4. 미투데이 '미투하기'
http://me2day.net/me2/plugin/guide/metoo_plugins
미투데이 아이디가 있어야 사이트를 등록한 다음 고유코드를 발급받아 버튼을 사용할 수 있다.
me2:metoo 태그는 데이터만 전달하고, 다음 자리에 iframe이 생성된다.


5. 카카오톡, 카카오스토리 공유
http://kakao.com/services/api/kakao_link
http://kakao.com/services/api/story_link
링크(URL) 형식으로 데이터가 전달되며, 링크를 클릭하면 스마트폰 내에서 앱으로 이동한다.


6. 싸이월드 '공감'
http://devsquare.nate.com/openApi/empathyButton
공감 버튼의 경우 iframe과 링크 형식의 두가지 형태를 제공한다.
iframe:공감 수가 나타나긴 하지만 버블 모양이 아니고 버튼 우측에 있다.
링크형식:이미지 아이콘을 사용한다.


참고:공유수를 보여주지 않는 링크 형식의 간단한 방법도 있다. 데이터가 절약된다는 장점이 있다.

적용 예