페이스북 소셜 플러인 중, 코멘트 플러그인을 리스폰시브하게 바꾸는 방법이다. 반응형 또는 리스폰시브란, 화면(브라우저 또는 기기)의 크기에 따라 레이아웃의 크기가 자동으로 조절되는 것을 말한다. 작은 화면에서는 작은 화면에 딱맞게 페이스북 댓글이 보여지고, 큰 화면에서도 남는 여백 없이 딱 맞는 페이스북 댓글이 보여지게 된다.
페이스북 소셜 플러그인을 자신의 블로그에 성공적으로 설치했다면, 기본적으로 고정적인 크기의 페이스북 댓글이 생성되었을 것이다. 아직 페이스북 코멘트를 설치하지 않았다면, 페이스북 개발자 페이지를 참고 바란다.
1. 자신의 블로그의 CSS 편집창이나, 메인 CSS 파일에 아래 내용을 추가해준다.
/* Facebook Comment Responsive */
.fb-comments, .fb-comments iframe[style], .fb-comments span[style] {
width: 100% !important;
}
2. 원래는 1번만 하면 반응형이 동작해야하지만, 최근 페이스북 측의 변경으로 코멘트 플러그인 코드에 width=100%를 추가해줘야 한다.
페이스북 코멘트 플러그인 – HTML5 버전 : data-width=”100%”
<div class="fb-comments" data-href="주소" data-width="100%" data-numposts="5" data-colorscheme="light" ></div>
페이스북 코멘트 플러그인 – XFBML 버전 : width=”100%”
<fb:comments href="주소" width="100%" numposts="5" colorscheme="light"></fb:comments>
참고
http://thehacked.com/make-facebook-comments-responsive/
http://stackoverflow.com/questions/6500424/is-it-possible-to-set-a-fluid-width-for-facebooks-social-plugins/
 만들기){kind=link}