소셜댓글, 내 블로거에서 페이스북 댓글을 남긴다

페이스북의 social plugin이 그동안 많이 달라져서 이 방법은 이제 더 이상 추천하지 않습니다.

페이스북 댓글 사용하기(수정판) 또는 블로거에서 페이스북 댓글 사용하기(처음사용자용)을 참고하십시오.

(2012.1.13. 수정)

여기저기 많은 사이트에 남긴 내 댓글을 한 곳에서 볼수는 없을까?

xml과 open api라는 기술이 소통을 중시하는 철학과 만나면서 서서히 이런 요구가 '소셜댓글'이라는 이름으로 등장하고 있습니다.
블로그 운영자의 입장에서도 내 포스트의 댓글이 거대한 소셜 네트워크에 노출되면, 트래픽도 늘고, 피드 관리도 훨씬 편해질 것입니다.
저는 페이스북을 선택하였습니다. 실시간으로 트위터,페이스북,블로그,구글버즈 연동하기 에서 언급한 것처럼 종착역을 페이스북으로 잡고 있기 때문입니다. 트위터 댓글도 계획 중입니다

아래의 방법은 allblogtools.com의 포스트에서 알게 되었음을 미리 말씀드리며... blogspot에서 적용하는 방법입니다. tistory나 wordpress에서의 방법은 다른 분께 미룹니다.

1.페이스북 Application ID를 만듭니다.

• 개발자 페이지(http://developers.facebook.com/setup/)
• Site name : 어플리케이션 이름이 되니 영문으로(나중 수정 가능)
• Site URL : 블로거의 URL(맨 마지막에 / 를 꼭 붙이세요)

다음 화면에서 설정(App ID, App Url, App Secret), 예시 화면이 나오면 성공입니다.
http://www.facebook.com/apps/application.php?id=153346064694900
어플리케이션 대쉬보드가 생겼습니다. (위 링크는 제꺼^^)
여기서는 필요한 것은 App ID(숫자)뿐이니 나머지는 패스하고 페이스북 코드를 스킨에 넣어 보겠습니다.

2. xmlns attribute 태그 추가

블로거 관리 메뉴의 꾸미기--Html 편집에서 우선 스킨 다운로드하기로 먼저 백업해 놓으시고
코드의 맨 윗부분인 html을 찾아서 xmlns:fb='http://www.facebook.com/2008/fbml' 를 추가합니다.

3.SDK script 추가

가젯코드 펼쳐서 보여주기를 체크하고 body 태그를 찾아서 아래의 코드를 넣으세요.

(Ctrl+F로 찾기 기능을 이용하면 편합니다)

<div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({ appId : '지급받은 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>

4.Open Graph protocol tags 추가

위의 코드 바로 밑에 아래 코드를 넣으세요.

<br /> <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='사이트 이름' property='og:site_name'/> <meta content='http:.....> <meta content='지급받은 APP-ID 숫자' property='fb:app_id'/> <meta content='당신의 페이스북 아이디' property='fb:admins'/> <meta content='article' property='og:type'/>

이미지 경로 : http://로 시작하는 경로를 넣으세요 (필요없으면 삭제)
페이스북 ID : 당신의 페이스북 아이디.

5.Adding the xmlns attribute 추가

<data:post.body/> 태그를 찾아서(Ctrl+F로) 바로 아래에 다음 코드를 넣으세요.

<b:if cond='data:blog.pageType == "item"'> <div><fb:comments width='450' expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id'/></div> </b:if>

디자인에 맞추어 550 너비는 수정하세요.

6. 스킨저장으로 끝입니다.

7. (선택) 블로거의 기본 댓글기능을 숨기려면

관리메뉴의 설정--댓글 에서 숨기기를 선택하고 저장하면 됩니다.
저의 경우는 그냥 공개하기로 놔두고, 누구나(익명댓글) 댓글 달게 해놓고, 페이스북은 페이스북 로그인 사용자만 사용하게 하였습니다.