블로거에서 페이스북 댓글 사용하기(처음사용자용)

facebook의 social plugin을 사용하여, blogspot에 페이스북 댓글(facebook comment)을 추가하는 다른 코드를 정리해 봅니다.

이 방법은 페이스북 댓글을 처음으로 추가하려는 사람들에게  추천합니다.





1. facebook app를 만듭니다.

https://developers.facebook.com/apps

app display name은 구별하기 쉽게 적당히...

뭔줄 아시죠? ^^

네모박스의 app ID를 기억하세요. 전 보안상 blur 처리

예전에 만들어 놓은 저의 app 요약화면 입니다. 위처럼 꼭 필요한 필드만 채우셔도 됩니다.여기서 필요한 것은 네모로 Blur 처리한 곳에 나오는 숫자로된 App ID 입니다.


2. 템플릿 백업

템플릿 메뉴의 [백업/복원]을 눌러서 [전체템플릿다운로드]로 xml 파일을 백업합니다.
(만약을 위해서 ^^)


3. xmlns, meta tag  추가

템플릿의 [html 편집]으로 갑니다. 백업했으니 경고창도 무시하고 자신있게 고고~~

html 의 맨 뒤에 xmlns 속성을 추가합니다.
xmlns:fb="https://www.facebook.com/2008/fbml"

head 바로 밑에 meta tag를 삽입합니다. 위의 과정에서 발급받은 자기의 app ID 숫자를 적으세요.

<meta content='YOUR_FACEBOOK_APPLICATION_ID'   property='fb:app_id'/>

3. 페이스북 코멘트(FB comments) 폼 추가

가젯 코드 펼쳐서 보여주기를 체크합니다.
Ctrl+F(검색)를 눌러 post-footer-line post-footer-line-3 을 찾고 아래 태그를 추가합니다.
width='500' colorscheme='light'은 설정을 변경할 수 있습니다.

<br /> <b:if cond='data:blog.pageType == "item"'><br /> <div id="fb-root"></div><br /> <script>(function(d){<br />  var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}<br />  js = d.createElement('script'); js.id = id; js.async = true;<br />  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";<br />  d.getElementsByTagName('head')[0].appendChild(js);<br /> }(document));</script><br /> <fb:comments width='450' colorscheme='light' expr:title='data:post.title' expr:href='data:post.url' expr:xid='data:post.id'/><br /> </b:if><br />

저의 스샷에는 Tweetbox Code도 보이네요.

4. 저장. 끝.

5. 코멘트 관리

https://developers.facebook.com/tools/comments