facebook 소셜 플러그인 커맨트 서비스는 간단하게 자신의 페이지에 페이스북 댓글을 담는 기능인데요.

처음에 Get Code를 하시면 아시겠지만, 폭을 지정해야합니다. 그래서, 반응형 웹에 적합하도록 class를 overide할 필요가 있습니다.

방법은 간단합니다.

소셜 댓글을 달기전 바로 윗 부분에

/*facebook social plugin */
.fb-comments, .fb-comments iframe[style], .fb-comments span[style] {width: 100% !important;}

의 스타일을 지정하시면됩니다.

 

즉, 전체 모양은 다음과 같은 식이 됩니다.

<style>

/*facebook social plugin */
.fb-comments, .fb-comments iframe[style], .fb-comments span[style] {width: 100% !important;}

</style>

<div id=”fb-root”></div>
<script type=”text/javascript”>// <![CDATA[
(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=”http://j1act.com/confess” data-num-posts=”4″></div>

고백기도집 랜딩 페이지도 이와 같은 방법으로 구성 되었습니다.

페이지를 방문하셔서 웹브라우저 크기에 따라 사이즈 조절이 되는 fb commnets를 확인해 보시기 바랍니다.

감사합니다.