티스토리에 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="/385" data-numposts="5"></div>한가지 문제가 있는데 Facebook 댓글의 data-href에는 완전한 url을 넣어줘야 동작한다. 잘은 모르겠지만 도메인 정보가 없을때 document.href를 자동으로 붙여주지 않는 것 같다. 이 때문에 상대주소로 치환되는 티스토리의 /385 로는 제대로 동작하지 않는다. 앞에 티스토리 주소를 full로 넣어주어야 한다. 티스토리 치환자 중에 이걸 만들어주는 것이 없는 점이 아쉽다.
반응형 디자인을 위한 width 설정
이제 댓글을 넣는 것은 다 했고 원하는 크기로 넣는 것만 남았다. disqus를 넣을 때는 이런 거 신경쓰지 않았지만 Facebook 댓글은 기본크기가 550px이기 때문에 반응형으로 만들어주려면 parent의 크기와 같은 크기로 댓글 크기를 만들기 위해서 width를 100%로 지정해주어야 한다. 그렇게 하면 parent와 동일한 크기의 span, iframe이 삽입된다. 단 이 경우 동적으로 크기가 변경되지는 않고 처음 초기화할 때 정해진다.
동적으로 크기가 변경되도록 할 수 있는데 삽입된 span의 style을 무시해야하기 때문에 important로 width style을 강제한다.
.fb-comments span { width:100% !important }자세한 내용은 Facebook 문서에서 볼 수 있다.
