블로그에 페이스북(Facebook) fbShare 공유버튼 달기

요즘 페이스북에 대한 인기가 조금씩 올라가고 있는거 같습니다. 한때 페이스북이 한국에선 절대 성공할수 없다는 분도 계셨고 나름 선전할것이라 얘기 하는 분들도 계셨는데 지금은 제가 보기에 어느정도는 희망이 있어 보이는거 같습니다. 

그렇다고 싸이월드나 트위터처럼 대대적인 열풍까지는 아니더라도 어느정도의 인지도까지는 올라 가지 않을까 싶습니다.

그래서 제 블로그에 페이북 fbShare 공유버튼을 달기로 마음 먹고 검색을 해서 알아 보았습니다. 그런데 검색 건수도 얼마 없을뿐더러 정확하게 어떻게 단다는 내용이 없더군요. 그래서 임시로 달아 놓고 하루 이틀 고민을 좀 했더니 제 나름대로 해결책을 찾아 냈습니다.


제가 검색으로 찾아본 공유버튼 다는 방법을 읽어 보면 페이스북 공식 사이트에 가면 기본적인 버튼 다는 소스가 있다고 하던데 페이스북에서 아무리 찾아 봐도 소스가 없더군요. 그래서 결국은 페이스북에서 제공하는 버튼 말고 비공식 버튼을 달았습니다. 그리고 제가 원하는 방식으로 소스를 몇일 고민해서 수정해 넣었습니다. 

그럼 일단 기본적인 페이스북 버튼 다는 방법에 대해서 알아 보도록 하겠습니다. 먼저 아래 사이트에 가서 페이스북 공유버튼에 대한 소스를 원하는 블로그 위치에 붙여 넣습니다.



fbshare.me 링크에서 위 코드를 복사하신후 빨간색 박스 안에 있는 부분만 본인의 블로그 주소로 바꾸신후 원하는 위치에 붙여 넣으시면 됩니다. 그리고 글자색과 바탕색을 흰색과 곤색으로 바꾸고 싶으신 분들은 badge_text 부분과 badge_color 부분의 값을 아래의 값으로 바꿔 주시면 됩니다.

badge_text: 'white',
badge_color: '#f00',

이 색깔이 마음에 들지 않으시면 다른 색깔로 넣어 주셔도 됩니다. 사용자 마음에 드는 색깔로 변경해서 사용하시기 바랍니다. 

이렇게 하시면 기본적인 fbShare 공유버튼 다는 방법은 끝이 납니다. 그러나 이렇게 단 fbShare 공유버튼의 share 버튼을 눌러 보시면 그 해당글이 공유가 안되고 다 똑같은 글이 공유가 되는 것을 경험 하실 것입니다. 여기서 간단하게 변경해야할 부분이 있더군요. 각 글마다 share 버튼을 눌렀을때 그 글이 공유가 되게 하기 위해선 위에서 자기 블로그 주소를 넣은 url 의 값에 코드를 좀더 추가를 해야 합니다.

url: 'http://mastmanban.tistory.com[샵샵_article_rep_link_샵샵]'

제 블로그를 예로 했을때 제 블로그 주소 뒤에 article_rep_link 부분을 더 넣어 줘야 합니다. 그러면 페이스북 공유버튼에서 share 버튼을 누르면 각 글에 해당하는 글이 공유되는 것을 보실수가 있을 것입니다. 아울러 '샵샵' 이라고 씌여진 부분은 특수문자로 바꿔 주는거 아시죠? ^^

이렇게 하시면 페이스북 공유버튼 다는 방법은 끝이 납니다. 자리만 잘 잡아 넣어 주시면 깔끔하게 마무리가 될것입니다. 별거 아니고 간단한 방법인데도 몰랐을때는 왜이리 알아 내는게 힘든지... 알고 나니 너무 쉬운 방법이더군요. 페이스북 공유버튼을 다는데 저와 같은 고민을 하고 계신 분들이 계시다면 위 방법을 이용하여 간단하게 해결하시기 바랍니다. 

 



신고

댓글 9

  • BlogIcon 딴죽걸이 (2010.06.23 00:45 신고)

    스킨 들어가서 html/css 편집 들어가서 덧붙였는데 어떻게 해야되나요??

  • BlogIcon CSKIN (2010.06.23 18:33 신고)

    쩝 전아무래도 안쓰는지라 상관이없군요

    트윗도 재미없고 저한테는 소셜네트웤이 안맞는지 ㅎㅎ;

    • BlogIcon MastmanBAN (2010.06.24 17:53 신고)

      저랑 같네요. 이상하게 저도 소셜이 재미가 없더군요. ^^

  • BlogIcon 닉쑤 (2010.06.30 20:57 신고)

    안녕하세요, 항상 유용한 정보 잘 구독하고 있습니다. 한RSS쓰는데, 탐독?한다능.. ㅋ
    다름이 아니라, 궁금한 점이 있어 이렇게 글 남겨봅니다.

    지금 이 블로그 오른쪽에 스크롤바 바로 옆에 붙은 구독 링크들을 어떻게 붙이는지 궁금해서요.
    follow me 부터 다음뷰, 올블로그.. 한Rss 믹시 등등등.. 화면 스크롤에 상관없이 붙어있는거요.

    테터쓰고 계서서 가능한지 아님 HTML로 티스토리에서도 가능한지 궁금하네요.
    제가 티스토리 쓰고 있는데 한RSS구독버튼은 어찌 붙여놨는데 다른것도 하고 싶어서 궁금하던 차였거든요.

    포스팅엔 게으르면서 이것저것 스킨 꾸미기에만 열심힙니다. ㅋ
    시간되시면 답변 주시면 감사하겠습니다.
    앞으로도 잘 볼게요. ^^

    • BlogIcon MastmanBAN (2010.07.01 09:33 신고)

      크... 감사합니다.^^

      트위터 팔로우미는
      http://www.go2web20.net/twitterfollowbadge/
      에서 코드를 얻으셔서 코드에 넣으시면 되구요.

      따라 다니는 추천 버튼은 다음뷰를 예로 들면

      <a style="display:scroll;position:fixed;top:302px;right:0px;" href="http://v.daum.net/reporter/couple7777?type=point#cmd:2" target="_blank" title='Daum ViewOn'>
      <img src="http://cfs.tistory.com/custom/blog/4/49480/skin/images/daum.png" alt="Daum view" width="42" height="42" /></a>

      이게 기본 코드인데 href 와 img 부분만 닉쑤님 주소로 변경해 주시면 됩니다. 그리고 </body> 위에 붙여 넣으시면 됩니다.
      나머지 버튼은 위 코드에서 href 와 img, 좌표값 빼고는 똑같습니다.

      만약 이거보다 더 자세한 설명을 원하시면 제가 따로 포스팅을 해야 합니다. 필요하시면 다시 댓글 달아 주십시요. ^^

  • BlogIcon 닉쑤 (2010.07.02 18:49 신고)

    와 빠른 답변!! 감사드려요 BAN님.

    열심히 따라 해 본결과 성공했습니다. ㅋㅋ
    눌러줄 사람이 없더라도 자기 만족을 느끽있음;;;;

    첨엔 좀 헤맷지만 BAN님꺼랑 비교해 보면서 하니깐 되네요. ㅎㅎ
    친절한 답변 감사드려요.
    그리고 이거에 관해서 제가 했던거 포스팅 해볼게요. 물론 링크, 트랙백 걸구 ㅋ

    그럼 앞으로도 잘 부탁드립니다. (응? 뭘?!)
    좋은하루 되세요~

    • BlogIcon MastmanBAN (2010.07.03 10:43 신고)

      축하드립니다. 그리고 자세한 포스팅까지...
      다음부터 제 블로그에 따라다니는 버튼에 대한 질문을 하면 닉쑤님 글을 소개해 드리도록 하겠습니다. ^^
      즐거운 주말 보내세요. ^^

  • BlogIcon StoryG (2011.05.21 10:03 신고)

    url: 'http://블로그주소[샵샵_article_rep_link_샵샵]' 했는데 계속 블로그 전체가 공유되는데 왜 그렇죠?