블로그에 SNS 공유버튼 달기, 트위터 리트윗 버튼 + 페이스북 공유하기 버튼 + AddTis 버튼


블로그에 SNS 공유버튼 달기, 트위터 리트윗 버튼 + 페이스북 공유 버튼 + AddTis SNS 공유 버튼

블로그 Blog와 웹사이트 WebSite, 그리고 SNS 서비스



블로그와 웹사이트 그리고 SNS (Social Network Service)

블로그와 SNS 사이는 공생관계입니다. 블로그와 웹사이트가 콘텐츠를 생산하고 저장하는 도구라면 SNS는 이 만들어진 콘텐츠를 확산시키고 공유하는 도구입니다. 예를 들어 트위터도 140자의 한도 내에서 정보와 의견전달을 해야하는데 많은 양의 정보들은 어쩔 수 없이 사이트 링크를 이용할 수 밖에 없습니다. 조금 더 긴 장문의 글을 줄여주는 트위터 서비스도 있으나 이것은 트위터의 의미가 아니라고 생각합니다. 그리고 페이스북 또한 어느정도의 콘텐츠 생산과 저장이 가능하나 이것 역시도 기존의 웹사이트와 카페, 블로그에 비하면 역시 그 기능이 한정적일 수 밖에 없습니다. 이것이 현실이지요.

블로그와 웹사이트, 그리고 SNS 서비스와의 관계는 아래 링크들을 참조해보세요.
▶ 야후 코리아, 포털사이트 최초 오픈형 홈페이지 - 야후 퍼플나이트 in 탑클라우드
▶ 블로그에 소셜네트워크서비스(SNS) 공유버튼 달기 with AddThis for Blog + SNS Share
▶ 마이픽업 북마클릿, 온라인 즐겨찾기와 트위터 알리기를 동시에~ 북마클릿 사용방법 - 2편
▶ 마이픽업 위젯, 블로그와 트위터 환상적인 만남!! 국내최초 SNS 콘텐츠 유통 도구 - 1편
▶ 식스픽셀, 미래를 지배하는 디지털 유목민의 블로그와 트위터
▶ 블로그포럼 2009, 블로그 vs Twitter 누가 더 오래갈까?


Social Network Service


그리하여 국내외를 비롯한 많은 포털 사이트와 검색사이트, 포럼과 커뮤니티에서는 그들의 콘텐츠를 널리 확장시키고 정보공유를 원할히 할 수 있는 방법으로 소셜 네트워크 서비스(SNS, Social Network Service) 를 사용하고 있습니다.

기존의 Bookmarking 서비스인 Favorites (개인 브라우저 즐겨찾기), StumbleUpon, Delicious, Menéame 같은 북마클릿 서비스와 Email, IM Service 같은 이메일로 콘텐츠를 나르는 방법외에 요즘 각광받고 있는 SNS 서비스들이 있습니다.
대표적으로 트위터(Twitter)와 마이스페이스(Myspace), 페이스북(Facebook) 등을 꼽을 수 있지요.
이 포스트에서는 블로그와 웹사이트에 이러한 북마클링 도구와 SNS 도구들을 설치하는 방법을 말씀해드리겠습니다.


블로그 상단에 SNS 도구 설치하기

현재 이 블로그 http://2proo.net 의 포스트 상단에 보면 아래와 같은 도구들이 설치되어있습니다.


왼쪽에 있는 작은 도구들은 AddThis 라는 해외 SNS 서비스를 이용하고 있습니다. 하나하나 이미지를 다운받고 모으고 소스 설치하고 하려면 엄청난 시간과 노력이 들어갑니다. 그래서 간단하게 사용할 수 있는 도구 서비스를 사용하면 누구나 편하고 쉽게 설치할 수 있습니다. 아래 소개하는 AddThis 말고도 Share this 라는 서비스와 함께 여러 도구들이 있지만 이것저것 사용해본 결과 이 Addthis가 가장 좋더군요.
아래 사이트에 접속하면 회원가입없이도 기본적인 도구들을 마음껏 가져다 쓸 수 있습니다. 절차도 그닥 복잡하지 않습니다. 원하는 도구 선택한 후에 코드를 받아다 자신의 블로그나 사이트에 삽입만 하면 됩니다. ^^

AddThis 사이트 : http://www.addthis.com/

기본적인 것들 외에 조금 더 수정하고 추가할 것들이 있어 이 포스트를 작성합니다.
포스트 위쪽에 달아놓은 모든 SNS 도구들은 아래 텍스트파일에 넣어두었습니다. 참고로 한줄에 모든 두구들을 넣기 위해서 테이블 테그를 사용했습니다. 마음대로 수정하셔서 사용하셔도 됩니다.

sns tools.txt


일단 가장먼저 왼쪽에 있는 조그만 버튼들에 대해 설명하겠습니다. AddThis 사이트에서는 기본적으로 회원가입을 하지 않아도 공유버튼들을 설치할 수 있는 코드들을 마음대로 쓸 수 있습니다. 하지만 이 도구들을 통해 어느 나라에서 어떤 서비스를 통해 유입되고 또 어떤 서비스를 가장 많이 사용하는지 통계를 내고 싶으시다면 회원가입도 무료이니 꼭 사용해보시길 바랍니다.

<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_print"></a>
<a class="addthis_button_favorites"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_myspace"></a>
<a class="addthis_button_google"></a>
<a class="addthis_button_stumbleupon"></a>
<a class="addthis_button_googlebuzz"></a>
<a class="addthis_button_orkut"></a>
<a class="addthis_button_digg"></a>
<a class="addthis_button_reddit"></a>
<a class="addthis_button_delicious"></a>
</div>

위 소스를 블로그나 사이트의 원하는 위치에 넣기만 하면 됩니다. 한줄 하나하나가 도구를 의미하는데, AddThis 에서는 290 여개의 세계 거의 모든 SNS 도구들을 지원하고 있습니다.

http://www.addthis.com/services/all 이곳을 보시면 지원하는 모든 도구들을 볼 수 있는데 위 코드를 수정하여 추가 및 삭제를 해서 사용해도 됩니다.
다만 주의할것이 있는데 <a class="addthis_button_googlebuzz"></a> 이 코드에서 googlebuzz 을 보듯이 SNS 도구 첫글자는 소문자여야 하고 사이띄기를 사용하지 않습니다. 이점만 지켜주면 수많은 SNS 도구들을 마음껏~ 추가하여 사용할 수 있습니다.


그리고 중간에 위치한 공유하기 버튼은 페이스북 자체의 버튼입니다. 아래 링크에 들어가시면 바로 사용할 수 있는 코드를 받을 수 있습니다. 다만 이 Facebook Share 버튼은 누구나 공통된 소스인지라 위 텍스트 파일에 들어있는 소스를 그대로 사용해도 무방합니다.
페이스북 공유버튼을 서비스해주는 사이트가 몇군대 있으나 그 속도가 무지무지무지무지 느려터지고 에러가 많아서 페이스북의 정품 코드를 사용하고 있습니다...
http://www.facebook.com/share/

Facebook Share button

 
<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">공유하기</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

위 페이스북 공유 버튼은 가로로 눕혀져 있는 버튼입니다. 세로 버튼은 위 페이스북 링크에 가셔서 받으세요.
한글로 써있는 공유하기 글자가 마음에 안드시면 원하는대로 바꿔서 사용해도 됩니다.


그 다음은 역시 AddThis 에서 제공해주는 도구인데 페이스북 좋아요 Like 버튼과 트위터 리트윗 버튼, 그리고 AddThis 툴을 통한 공유 수치를 보여주는 동시에 SNS 도구를 지원해주는 버튼 이 세가지를 한꺼번에 사용할 수 있습니다.

좋아요 버튼, 리트윗 버튼, Share 버튼


이 소스 역시 위에 첨부한 SNS tool.txt 안에 소스가 들어있습니다. 이것 역시 따로 회원가입을 하지 않아도 쉽게 설치할 수 있지만 이왕이면 통계를 낼 수 있도록 회원가입하여 사용하기를 추천합니다 ^^

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=nightin"></script>
<!-- AddThis Button END -->

이것이 소스인데 페이스북 좋아요 버튼과 리트윗, Share 버튼 모두를 한방에 짧은 소스로 사용할 수 있습니다.
맨 밑에 두줄의 소스 코드는 공유 통계를 낼수 있도록 해주는 코드인데 회원가입하면 받을 수 있습니다.

이 세가지 도구들을 하나의 테이블로 엮어서 설치했습니다. 소스 내의 테이블 크기와 간격은 각자의 블로그나 사이트에 맞게 수정해서 쓰시면 됩니다. 수정하고 바꾸고 할것 없이 그냥 복사해다 붙여넣기를 하면 됩니다. 어때요. 쉽죠?


블로그 하단에 SNS 도구 설치하기

제 블로그에는 포스트 상단 제목 아래에 SNS 도구들을 설치해놓았고 포스트 하단에도 설치해놨습니다.
아래 이미지를 보시면 좌측부터 페이스북 공유하기 버튼, 마이픽업 북마클릿, Share 버튼, 리트윗 버튼이 있습니다.


위 SNS 툴에 대한 소스 역시 텍스트파일로 첨부하겠습니다. 다만 그대로 복사해서 붙여넣기하여 쓸 수 있는 도구도 있지만 약간의 수정이 필요한 도구도 있습니다. 위 도구들중 편하신대로 빼서 사용하셔도 돼고 그대로 사용하셔도 됩니다.
블로그 포스트 아래의 도구들 역시 간편하게 테이블로 묶어서 쓰시면 보기좋게

sns tools2.txt



그럼 가장먼저 페이스북 공유버튼 세로버전 인데 이것 역시 수정없이 그대로 가져다 쓰셔도 됩니다.
이 버튼은 누군가 처음 공유하기전에는 위에 숫자가 나타나지 않고 그냥 버튼만 달랑 있으니 잘못된게 아닙니다 ^^

<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php%22%3E공유하기%3C/a%3E%3Cscript src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>


참고로 페이스북 좋아요 버튼을 페이스북 정품(?) 으로 설치하고 싶으신 분은 아래 링크를 참조하세요.
http://blog2.cctoday.co.kr/410



그다음 트위터 알리기라고 쓰여있는 버튼은 MyPickup 이라고 부르는 국내산 SNS 유통 도구입니다.
이것 역시 쓸만한데 이 버튼 하나만으로도 아래처럼 많은 Social Network 서비스를 사용할 수 있습니다.
마이픽업 하나로 트위터와 페이스북, 미투데이, 요즘 을 비롯해 국내외 서비스들을 모두 사용할 수 있습니다.

마이픽업 MyPickup 국산 SNS Tools


북마클릿 설치방법은 아래 링크를 참조하세요~
http://www.estorylab.com/18



그다음 AddThis Vertical Share 버튼입니다. 이것 역시 AddThis 사이트에서 무료로 사용할 수 있습니다.
이 버튼 하나 역시 아주 간단한 코드로 되어있는데 아래 소스중 YOUR-ACCOUNT-ID 부분은 Addthis 계정 이름을 넣는 부분입니다. 물론 회원가입을 안한다면 아래 소스 그대로 그냥 사용해도 됩니다. 그러나!!! 역시 무료 회원가입 후 통계서비스를 사용하시길 추천합니다.

<a class="addthis_counter"></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=YOUR-ACCOUNT-ID"></script>

이 Share 라고 써있는 빨간 버튼을 누르면 아래와 같은 창이 뜨면서 공유하고픈 서비스들이 주루륵 나옵니다.
이중에 원하는 SNS 서비스를 골라 클릭하면 공유를 할 수 있습니다. ^^

AddThis SNS, Bookmarking Service




그 다음은 마지막으로 트윗미미 리트윗 버튼 (Tweetmeme Retweet) 입니다. 리트윗 버튼은 해외의 여러 사이트에서 제공을 해줍니다.
트위터 Twitter 공식 리트윗버튼은 아래 링크를 참조하세요.
http://twitter.com/goodies/tweetbutton

이 블로그 하단에 달린 리트윗 버튼은 아주 간단합니다. 아래 소스 코드에서 2proo 부분은 자신의 닉네임으로 바꾸면 설치 끝.
트위터 홈페이지에서의 리트윗은 원문 수정이나 의견 첨부없이 그냥 그대로 리트윗 하는 반면 위 트위터 공식버튼이나 아래 트윗미미 같은 리트윗 버튼들은 의견 첨삭이나 수정들이 가능합니다. 그리고 리트윗 retweet 된 횟수도 같이 나옵니다.

<!-- ReTwitter Button -->
<script type="text/javascript">
tweetmeme_source = '2proo';
tweetmeme_service = 'bit.ly';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js">
</script>


이상 현재 이 블로그에 달려있는 Bookmarking Site, Social Network Service 도구들의 소스와 설치 방법을 소개했습니다. 현재도 그렇지만 앞으로도 더욱 더 사이트간의 연결고리가 강화되고 밀접해지면서 SNS 도구들의 역활이 크게 증가하고 있습니다. 블로그나 웹사이트 그대로 머물지 말고 콘텐츠와 정보들을 더 멀리 더 많이 전파하여 효율적인 사이트 운영하시기를 바랍니다.

이미지 맵

'BLOG Story' 카테고리의 다른 글

글에 남긴 여러분의 의견은 33개 입니다.

  1. 이전 댓글 더보기
    • 유용한 정보 감사합니다~~ 그런데 이건 네이버 블로그에서는 안되는건가요? 그냥 소스만 덜렁 붙이는게 아닌가봐요 ㅠ.ㅠ

    • 필요한 분들에겐 소중한 정보로군요.
      저도 조만간 필요성을 느낄 것 같아 참고로 해두겠습니다.
      감사합니다.^^

    • 찾고있던 정보인데 때맞춰 상세히 설명해 주셨네요.. 당장 적용해 봐야겠어요..감사~감사

    • 2proo님이 위에서 설명하신 것이 티스토리 블로그의 SNS로 보내기 플로그인 보다 좋은 것 같아요.

    • 네이버 블로그에 좋아요 버튼과 공유하기 버튼을 중앙에 나란히 달려고했는데 몇시간째 하다가 포기하고
      좋아요 버튼이라도 달려고 확인 눌렀더니 태그가 고대로 나오네요. 제껀 왜 안되는 걸까요??
      올려놓으신 txt파일 그대로 붙여넣기 해봐도 안되구요.. 미리보기에선 되던데...

    • 네이버는 자바스크립트나 아이프레임 등의 소스등을
      사용할 수 없게 일체 막아놨습니다.
      폐쇄적이라고 하는 이유가 그거죠..

      여튼 네이버에서는 사용할 수 없는 소스입니다. ^^

    • Grrr Angel 님과 같은 현상 발생하네요!
      네이버 블로그 에디터(글,사진 올리기 )에서 설명하신 html 프로그램언어 소스를 넣으면 이미지 버튼이 아니라 html언어가 그대로 나오네요!담장부탁드립니다 제가 워낙 기계치라서요!부탁합니다

    • 네이버에서는 사용할 수 없는 소스입니다.

    • 안녕하세여. 한가지 질문드려도 될런지 모르겠습니다. ^^;
      공유하기 버튼은 추가를 했는데
      문서에서 클릭을 하면 그 문서와 관련 된 썸네일 이미지와 내용이 팝업(담벼락에 글올리기전 팝업)에 어떻게 노출 시킬 수 있는지 의문입니다. ^^;;
      아무리 찾아도 그 부분에 대한 내용은 없는 것 같아 질문드립니다. 감사합니다. *^^*

    • 님처럼 공유하기 클릭하면 팝업이 뜰 때 썸네일 이미지와 내용을 노출시킬 수 있는 방법이 뭔가여?? 찾다찾다 질문드립니다. ㅜㅜ

    • 12/13일 질문드렸는데 답장이 없어서요!
      네이버 블로그에선 왜 안되는지요! 급답변 부탁할께요!

    • 아 이메일로 똑같이 문의하신 분이신줄 알았는데 아니셧군요.
      네이버는 안됩니다.^^;
      네이버가 폐쇄적인 이유는 한두가지가 아니지만요...
      네이버에서 안되는게 너무 많지만 오픈할 기미는 전혀 안보이더군요.
      어쨋든 네이버에서는 어쩔 수 없어요 ^^

    • 정말 보기에도 완벽한 블로그입니다 덕분에 좋은 정보 알아갑니다........

      정말 좋은소스네요 친구들한테도 소개했습니다 ^^

*

*

이전 글 다음 글