본문 바로가기

기타

Facebook comment(댓글) 연동 쉽고 빠르게 하기


급하게 Facebook 댓글관련 내용을 정리할게 있어 블로그에 적용을 해보게 되네요.
일단 본인의 블로그에 Facebook 댓글을 달려면 Facebook 계정이 있어야 겠죠..

일단 계정이 있으시면 페이스 북 앱을 만드셔야 합니다.
앱을 만드실려면 http://developers.facebook.com/setup 으로 들어가시면 됩니다.

앱을 처음 만드시게 되면 2가지 경우로 인증을 하셔야 합니다.

첫번째로는 LG U+에서 인증을 하거나 신용카드로 인증을 하는 방법입니다.
저같은 경우 LG가 아니기에..ㅠ 신용카드로 인증을 했습니다. 다행히 마스타 카드가 있었네요.
여기서 잠깐...

인증을 했는데 갑자기 제 핸드폰으로 Facebook에서 1.01달라는 결재를 했네요..
아놔... 짜증이 확 났지만....
확인 절차라고 하네요.. 저처럼 1달러에 열불내지 마시고~
결재후 바로 취소 처리를 해주니 느긋하게 기다리시기 바랍니다.

각설하고~


앱 만들기를 누르고 나면 아래와 같이 설정하신 부분이 나오게 됩니다.
앱 id 는 후에 사용될수 있으니 복사 해 놓으시기 바랍니다.



개발자 대시보드를 누르게 되면 아래와 같이 본인 앱의 상태를 볼수 있습니다.



앱이 전부 준비가 되었으면 페이스북 댓글 플러그인의 코드를 생성해야 합니다.
코드의 생성은  이곳에서 가능합니다.
아래와 같이 코드에 해당 내용을 적어 주시고..



url : 댓글을 올릴 주소
posts : 몇개의 댓글을 ?
width : 댓글의 너비
color : 색상 (2가지 뿐임)
get code: 해당 내용을 토대로 코드 생성


이렇게 코드를 복사해서 넣으시면 되는데...몇가지만 수정을 하셔야 합니다.

<!-- [START]facebook comment -->
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=본인의앱아이디&amp;xfbml=1"></script>
<fb:comments href="본인의블로그주소 [ ##_article_rep_link_## ] " num_posts="3" width="500"></fb:comments>
<!-- [E N D]facebook comment -->

주의:  [ ##_article_rep_link_## ]  블로그에 글을 쓰기 위해 [ ##  <-- 이렇게 썻지만  직접 넣으실때에는  [## 공백없이 넣으시기 바랍니다. 앞 뒤 다요~


앱아이디 위에서 복사해 놓으셨다면 위와 같이 하시구요~
앵커태그에 본인의 블로그주소 넣으시고 뒷부분에 tistory 기준으로  말씀드리면 게시물 번호를 넣으셔야 합니다.
그래야 각 게시물 별로 댓글이 관리가 되기 때문입니다. 해당 [ ##_article_rep_link_## ] 는 치환되는 역할을 합니다.
tistory의 어드민에 들어가신후 스킨에 html/css로 들어가시면 무수히 많은  [ ##_article_rep_link_## ] 가 있을겁니다.

자 이제 코드를 생성 했으니 코드를 해당 블로그에 넣어야 겠습니다.
상단의 코드를 넣으시기 전에 댓글들을 관리를 하실려면 메타 태그를 넣으셔야 합니다.

<meta property="fb:app_id" content="페이스북 앱 ID">
<meta property="fb:admins" content="페이스북 계정 ID">


요 두가지를
<html>
<head>
<meta property="fb:app_id" content="페이스북 앱 ID">
<meta property="fb:admins" content="페이스북 계정 ID">

</head>
</html>
요런식으로 넣어 주셔야 합니다.

앱id는 아는데 계정id는 뭔지 모르시는 분들이 많은데 해당 계정id는 이곳 에서 알수 있습니다.
상단의 웹사이트를 위한 인사이트를 누르시면 해당하는 코드를 받으실수 있습니다.



다음과연결에 앱을 선택하시면 앱아이디도 받을수 있으시 손으로 타이핑 하지 마시고 가셔서 복사해서 쓰시기 바랍니다. ㅎ

자 코드가 준비 되셨으면 admin > 스킨 > html/css편집 가셔서 head에 메타태그 넣으신후
본인이 원하시는 적정한 위치에 댓글 소스

<!-- [START]facebook comment -->
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=본인의앱아이디&amp;xfbml=1"></script>
<fb:comments href="본인의블로그주소[ ##_article_rep_link_## ]" num_posts="3" width="500"></fb:comments>
<!-- [E N D]facebook comment -->

넣으시면 되겠습니다.

저 같은 경우는 본문 하단에 구글 광고가 있는데 그 밑부분에 넣어 봤습니다.


메타는 이렇게~


자 이렇게 하게 되면 모든게 다 완성이 된겁니다.
본인의 블로그에 댓글을 직접 달아 보신후 확인해 보시면 되겠습니다.

댓글들 관리는 아래와 같이 ... 한곳에서 삭제도 가능하시고~
댓글 관리하는 곳은 여기로~