Facebook 코멘트 플러그인 가로 100% 만들기

Facebook comment plugin

Facebook comment plugin 을 사용하려고 하면 width 가로 크기를 지정하게 되어있다. 가로 크기는 px 단위로만 지정할 수 있게 되어있는데 가로를 100%로 하고 싶을때는 이와같은 방법을 써보자.

<div class="fb-comments" data-href="http://example.com" data-num-posts="2" data-width="200"></div>

설정으로는 data-width="200" 이 되어있다. 이 커스텀 데이터인 data-width 는 페이스북의 코멘트가 iframe으로 나타날때 인라인 스타일로 style="width:200px" 의 값을 셋팅한다. 하지만 이 data-width와 인라인 스타일이 몇으로 설정되었던 상관없이 CSS로 재정의 하며 !important로 인해 CSS의 width 값이 더 높은 순위를 갖게 만들어 봅시다.

다음과 같은 스타일시트를 먹여주자

CSS

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

이거면 끝 :D

테스트는 http://jsfiddle.net/sZ5pT/1/


덧글

  • 멋진TIP이네요 2012/10/08 22:14 # 삭제 답글

    정말 이거면 끝이네요 :D 감사해요~
  • 이브 2012/11/01 03:51 # 삭제 답글

    근데 제가 테스트 해보면 가로가 100% 안되는데여...
  • lainfox 2013/01/17 10:55 # 답글

    @이브
    위의 http://jsfiddle.net/sZ5pT/1/ 에서 우측 하단 부분의 프레임을 늘렸을때 제대로 나타나지 않는 것인가요?
댓글 입력 영역