Facebook Like Button 추가

PUBLISHED
POSTED IN COMPUTING
참조
  1. Facebook Javascript SDK [링크]
  2. Social Plugins Like Button [링크]
내용 :
  1. Like Button 추가
  2. iFrame 을 사용하지 않고 XFBML 을 사용
1. 먼저 Develop Application을 추가해서 Application ID를 발급받아여 한다.
2. 블로그 스킨을 수정한다.
아래 코드는 Textcube 기준으로 작성되었습니다.
2.1. 네임스페이스를 추가한다.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

설명 :
  1. 보통 스킨파일(skin.html)의 위쪽 두,세번째 라인 정도에 작성되어 있을 것이므로 xmlns:fb="http://www.facebook.com/2008/fbml" 만 추가해주시면 될 것입니다.

2.2. Facebook javascript 로드하는 코드를 추가한다.
<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() { 
    FB.init({ 
      appId  : '본인의 Application ID를 입력해야 합니다',  
      status : true, // check login status  
      cookie : true, // enable cookies to allow the server to access the session  
      xfbml  : true  // parse XFBML 
    }); 
    };
    (function() {  
    var e = document.createElement('script'); 
    e.src = document.location.protocol + '//connect.facebook.net/ko_KR/all.js'; 
    e.async = true; 
    document.getElementById('fb-root').appendChild(e); 
    }()); 
</script>

설명 :
  1. <body> 바로 다음에 위의 내용을 넣어주시면 됩니다.
  2. "본인의 Application ID를 입력해야 합니다" 부분에 자신의 Application ID 를 입력해주셔야 합니다.
2.3. 적당한 위치에 Like Button을 로드하는 코드를 추가한다.
<fb:like href="http://본인의블로그주소를입력해야합니다[##_article_rep_link_##]" layout="button_count" font="trebuchet ms"></fb:like>

설명 :
  1. 위 코드는 Social Plugins[링크]에서 원하는 설정값을 선택하여 만들수 있습니다.
  2. 스킨 파일(skin.html)에서 ##_article_rep_desc_## 라고 검색하시면 버튼을 추가할 위치를 쉽게 잡으실 수 있을 듯합니다.
  3. 본인의블로그주소를입력해야합니다 항목에는 현재 자신의 사이트에 해당하는 도메인을 입력해주시면 됩니다.
    저의 경우 bbon.kr을 입력해서 사용중입니다.

기본적으로 본인의 정보를 기입해야한는 부분을 입력한 후 위의 코드를 스킨파일(skin.html)에 수정, 추가하면 바로 동작해야 합니다.
작업 후 확인하셔할 것은 Like 버튼을 클릭했을때 현재 포스트의 주소가 정확하게 인식되고 있는지를 확인해보셔야 합니다.

이제 본인이 작성한 유용한 글을 다른 분들이 Facebook으로 가져가기 쉬운 기능을 추가했습니다.
좋은 컨텐츠를 블로그에 게시하시면 전세계 Facebook 사용자에게 공유되겠죠.
이올린 태그검색올블로그 태그검색테크노라티 태그검색태그스토리 태그검색티스토리 태그검색
Comment Trackback

TRACKBACK URL : http://bbon.kr/blog/trackback/817