티스토리 블로그에 페이스북 댓글창 달기

2012년 10월 30일

스킨을 바꾸고 나니 사이드바에 블로그검색창 다는 것 말고도 해야할 일이 많다. 스킨 교체와 함께 사라져버린 페이스북 댓글창도 다시 달아보자. 

 

1. 코드받기

    – 먼저 코드를 받기 위해 ‘facebook develpers’라는 곳으로 가자. 

    >> 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수정에서 댓글창을 띄우고 싶은 위치에 위의 코드를 넣어준다.

다음과 같이 페이스북 댓글창이 들어간 것을 확인할 수 있다.