티스토리 블로그에 페이스북 댓글창 달기
블로그 스킨을 바꾸고 나니 사이드바에 블로그검색창 다는 것 말고도 해야할 일이 많다. 스킨 교체와 함께 사라져버린 페이스북 댓글창도 다시 달아보자.
1. 코드받기
- 먼저 코드를 받기 위해 'facebook developers'라는 곳으로 가자.
>> https://developers.facebook.com/docs/reference/plugins/comments/
- http://fruitfulife.net/티스토리-블로그에-페이스북-댓글창-달기/ 이 글의 '1. 코드받기' 부분을 참고해서 빈 칸을 채운뒤 'get code' 단추를 눌러 코드를 받는다.
2. 코드수정
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ko_KR/all.js#앱아이디";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="내블로그주소" data-num-posts="댓글갯수" data-width="폭"></div>
대충 이런 식으로 코드가 나오지만 그대로 달면 다른 글에 달린 댓글까지 몽땅 전체적으로 끌고 다니게 된다. 개별 글마다 따로 댓글이 써지도록 하려면 '치환자'라는 것을 넣어줘야 한다. 분홍색으로 표시된 부분을 내 블로그 주소 뒤에 넣어준다.
<!--페이스북댓글시작-->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ko_KR/all.js#xfbml=1&앱아이디";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="내블로그주소[##article_rep_link##]" data-num-posts="3" data-width="550"></div>
<!--페이스북댓글끝-->
앱아이디는 developers에서 아이디를 만들면 코드를 받을 때 자동으로 포함되어 나오므로 따로 써넣지 않아도 된다.
내 블로그 주소와 댓글갯수, 댓글창 폭도 앞서 코드받을 때 넣은 대로 나온다. 폭은 실제로 적용해 본 다음 조절하면 된다.
3. html수정하기
티스토리 관리>스킨수정>html수정에서 댓글창을 띄우고 싶은 위치에 위의 코드를 넣어준다.
다음과 같이 페이스북 댓글창이 들어간 것을 확인할 수 있다.
