Blogspot(Blogger)에 Facebook Social Commentary 달아보기
얼마전에 시작한 페이스북 소셜 댓글 플러그인을 블로그스팟에 달아보자. 우선 이 방법을 적용기엔 몇 가지 단점이 있다: 템플릿 문제로 좀 귀찮은 작업이 필요하고 / 댓글 갯수 라던지가 제대로 표시안되고 0으로 표시되는 부작용이 있다. (내 블로그야 댓글이 거의 없다보니 0개로 표시되어도 아무 의미 없다. 이히힛 -_-;)
우선 코드를 얻어야 된다. 의미는 좀 어려워 보이는데 아래 URL로 이동해서 그냥 몇 가지만 입력해 주면 코드를 알려주는 거라 부담없이 꾹꾹...
http://developers.facebook.com/docs/reference/plugins/comments/
그런데, 어플리케이션 아이디(App ID)가 등록이 안되어 있다면 등록(Registering your site)하라는 메시지가 보일 것이다. 링크를 눌러서 등록해주자.
사이트URL을 입력할 때 꼭 끝에 '/'를 붙여줘야 된다. 안붙이면 에러를 내면서 다시 입력하라고 한다.
AppID가 발급되면 위 처럼 표시가 나올테니 잘 기록해 놓다. 그리고 다시 코드를 얻어보자.
코드가 발급되면 적용해보자. 그런데 사실 만들면 나오는 코드는 거의 쓸 모 없다는 것을 미리 이야기 했어야 했는데 늦었다. (골탕먹이려는게 아니라 그냥 했던 대로 적는거니 비방은 자제를 ㅠㅠ)
[꾸미기 - HTML편집] 으로 들어가서 [가젯 코드 펼쳐서 보여주기]에 미리 체크해 두자. 나중에 체크하면 수정한 코드가 몽땅 날아가버리니 주의.
실제 스킨을 수정할 차례다. 혹시 실수할 지도 모르니 [스킨 다운로드하기]를 클릭해서 미리 백업해 두는 것을 추천한다.
상단에 html 태그를 수정한다. fbml 네임 스페이스를 추가하는 작업이다. 가장 마지막 줄만 추가하면 된다.
그리고 다음 스크립트를 head 내부 어딘가에 쓰자. 내 경우 </head> 바로 위에다가 넣었다.
이제 가장 중요한 코드. '<body'로 시작하는 코드를 찾아서 그 아랫 줄에 다음 코드를 넣는다.
이제 마지막 작업. 실제로 댓글이 표시될 위치를 정해야 한다. 여기서는 blogspot의 기본 댓글 내용을 페이스북 소셜댓글로 바꾸려고 한다.
내 경우 여기까지만 하니 동작하는 것을 확인했다. 안되면 백업해둔 템플릿 코드를 복원시켜서 다시 시도해 보자.
참고: http://chensonism.blogspot.com/2009/10/adding-facebook-comment-in.html
우선 코드를 얻어야 된다. 의미는 좀 어려워 보이는데 아래 URL로 이동해서 그냥 몇 가지만 입력해 주면 코드를 알려주는 거라 부담없이 꾹꾹...
http://developers.facebook.com/docs/reference/plugins/comments/
코드가 발급되면 적용해보자. 그런데 사실 만들면 나오는 코드는 거의 쓸 모 없다는 것을 미리 이야기 했어야 했는데 늦었다. (골탕먹이려는게 아니라 그냥 했던 대로 적는거니 비방은 자제를 ㅠㅠ)
[꾸미기 - HTML편집] 으로 들어가서 [가젯 코드 펼쳐서 보여주기]에 미리 체크해 두자. 나중에 체크하면 수정한 코드가 몽땅 날아가버리니 주의.
실제 스킨을 수정할 차례다. 혹시 실수할 지도 모르니 [스킨 다운로드하기]를 클릭해서 미리 백업해 두는 것을 추천한다.
상단에 html 태그를 수정한다. fbml 네임 스페이스를 추가하는 작업이다. 가장 마지막 줄만 추가하면 된다.
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml'>
그리고 다음 스크립트를 head 내부 어딘가에 쓰자. 내 경우 </head> 바로 위에다가 넣었다.
<script src='http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php' type='text/javascript'/>
이제 가장 중요한 코드. '<body'로 시작하는 코드를 찾아서 그 아랫 줄에 다음 코드를 넣는다.
<script type='text/javascript'>
FB.init("App ID", "");
</script>
App ID는 위에서 발급 받은 어플리케이션 아이디를 적어줘야 한다. 숫자로 되어있는 거니 Secret 키와 헷갈리지 말 것.이제 마지막 작업. 실제로 댓글이 표시될 위치를 정해야 한다. 여기서는 blogspot의 기본 댓글 내용을 페이스북 소셜댓글로 바꾸려고 한다.
<b:includable id='comment-form' 으로 시작되는 부분을 검색해서 내부의 내용을 다 지우고 다음 처럼 fb:comment를 넣는다.<b:includable id='comment-form' var='post'> <fb:comments width='500'/> </b:includable>완료. 크기가 안맞으면 width 값을 마음껏 수정하면 된다. 내 경우 코드를 얻을 때는 600이라 적었지만 실제로는 500을 적용하니 딱 맞았다.
내 경우 여기까지만 하니 동작하는 것을 확인했다. 안되면 백업해둔 템플릿 코드를 복원시켜서 다시 시도해 보자.
참고: http://chensonism.blogspot.com/2009/10/adding-facebook-comment-in.html
댓글
전 너무 느려서 빼버렸습니다.
템플릿을 파악해서 글 보기 일 때만 표시하도록 수정하면 해결될 것 같지만 귀찮아서... ^^;;;