티스토리 Facebook 댓글 적용 방법

티스토리에 disqus를 적용하는 것과 더불어 Facebook 댓글을 적용하는 방법도 알아봤다. 댓글 count같은 것은 없고 댓글만 가능하다.

Facebook SDK

Facebook plugin을 사용하기 위해서는 javascript sdk를 먼저 로드해야한다. 이 sdk를 로드하고나면 다른 plugin도 쉽게 사용이 가능하다.

<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/sdk.js#xfbml=1&version=v2.4&appId=sampleId";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Facebook comments

Facebook SDK를 르드했으면 다음의 tag를 원하는 곳에 넣어주면 된다.

<div class="fb-comments" data-href="[##_article_rep_link_##]" data-numposts="5"></div>

한가지 문제가 있는데 Facebook 댓글의 data-href에는 완전한 url을 넣어줘야 동작한다. 잘은 모르겠지만 도메인 정보가 없을때 document.href를 자동으로 붙여주지 않는 것 같다. 이 때문에 상대주소로 치환되는 티스토리의 [##_article_rep_link_##] 로는 제대로 동작하지 않는다. 앞에 티스토리 주소를 full로 넣어주어야 한다. 티스토리 치환자 중에 이걸 만들어주는 것이 없는 점이 아쉽다.

반응형 디자인을 위한 width 설정

이제 댓글을 넣는 것은 다 했고 원하는 크기로 넣는 것만 남았다. disqus를 넣을 때는 이런 거 신경쓰지 않았지만 Facebook 댓글은 기본크기가 550px이기 때문에 반응형으로 만들어주려면 parent의 크기와 같은 크기로 댓글 크기를 만들기 위해서 width를 100%로 지정해주어야 한다. 그렇게 하면 parent와 동일한 크기의 span, iframe이 삽입된다. 단 이 경우 동적으로 크기가 변경되지는 않고 처음 초기화할 때 정해진다.

동적으로 크기가 변경되도록 할 수 있는데 삽입된 span의 style을 무시해야하기 때문에 important로 width style을 강제한다.

.fb-comments span { width:100% !important }

자세한 내용은 Facebook 문서에서 볼 수 있다.

신고
«   2017/12   »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31