구글 블로거 팁: 페이스북 댓글 사용하기(수정판)

이 포스트는 소셜댓글, 내 블로거에서 페이스북 댓글을 남긴다 의 업그레이드입니다. 예전 방법으로 페이스북 댓글을 도입했지만, 그동안 달라진 social plugin을 업그레이드하고, 전에 남겨진 댓글도 살리기 위한 방법입니다.
처음사용자는 이 방법을 사용하거나, 다른 방법인 블로거에서 페이스북 댓글 사용하기(처음사용자용)을 참고하셔도 좋습니다.

1. faceboo app 생성.

위의 두 포스트에 공통으로 나와있는 내용이라 생략합니다. 블로거에서 페이스북 댓글 사용하기(처음사용자용)을 참고하시고, app domain에 blogspot.com을 추가하는 것만 잊지 마세요.

이제 다음 4가지의 절차를 시작해 보겠습니다. 이전 포스트와 중복된 내용이 있긴 합니다.

xmlns attribute
SDK script
Open Graph protocol tags
Adding the xmlns attribute

1. xmlns attribute

2. SDK script

YOUR APP ID는 발급받은 숫자를 넣으세요.

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId  : 'YOUR   APP 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/en_US/all.js';
    e.async = true;
      document.getElementById('fb-root').appendChild(e);
    }());
</script>

3. Open Graph protocol tags

MY-SITE-NAME : 블로거 이름
YOUR-APP-ID : 발급받은 APP ID 숫자
YOUR-FACEBOOK-PROFILE-ID : 페이스북 사용자 프로필 ID
(www.facebook.com/kwang10e 의 kwang10e와 같은 영문 또는 숫자)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta   expr:content='data:blog.pageTitle' property='og:title'/>
<meta   expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta   expr:content='data:blog.title' property='og:title'/>
<meta   expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta   content='MY-SITE-NAME' property='og:site_name'/>
<meta content='YOUR-APP-ID'   property='fb:app_id'/>
<meta content='YOUR-FACEBOOK-PROFILE-ID'   property='fb:admins'/>
<meta content='article'   property='og:type'/>

4. 코멘트 박스

post-footer-line-3을 찾아서, 바로 밑에 아래의 코드 추가.

width='500', colorscheme='dark' 는 수정할 옵션입니다.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments width='500' expr:title='data:post.title' expr:href='data:post.url'   expr:xid='data:post.id'/></div>
</b:if>