facebook comments 가로 사이즈 100% 반응형 적용하기

facebook comments 를 사용할 경우 커멘트 입력창의 크기를 100% 로 적용하고 싶을 경우 data-width 속성만으로 모든 브라우저에 적용할 수 없다. 이 이슈를 해결하기 위한 방법을 소개한다.

facebook comments 가로 사이즈 100% 반응형 적용하기

Github Pages 를 이용한 개인 사이트나 블로그 운영이 늘어나면서 데이터베이스가 없는 사이트 형태가 많아졌다. Markdown 문서 양식을 자동으로 HTML 페이지로 만들어주는 획기적은 방식은 개발자에게 큰 인기를 얻었고 데이터베이스 없이 웹 사이트를 운영할 수 있다는 메리트 때문에 이런  Static Website 사용은 계속적으로 증가되고 있다.

그런데 데이터베이스 없이 컨텐츠를 static pages 로 만들 수는 있지만 데이터베이스 부재는 댓글 커뮤니케이션에 한계를 가진다. 댓글 서비스 자체는 데이터베이스가 필요한 서비스라 데이터베이스 운영없이 댓글 서비스를 운영할 수 없었다. 하지만 개발자들이 외부 서비스와 연동하여 여러가지 대안을 이용하여 댓글 서비스를 운영하고 있다. Github, Twitter, Facebook 등 소셜서비스와 연동하는 방법을 주로 사용하는데 그 중에서 comments 서비스 API를 공식적으로 제공하는곳은 페이스북이다.

facebook comments 라는 서비스는 facebook app으로 댓글 서비스를 등록하고 사이트에 facebook app 을 삽입하는 방식인데 이 때, 사이트 스타일에 맞춰서 댓글창이 들어갈 수 있도록 data-width 와 같은 HTML5 data attribute 속성을 사용할 수 있다. 예를 들어 가로 520px 사이즈에 맞추고 싶을 경우 다음과 같이 data-width 에 값을 고정할 수 있다.

<div class="fb-comments" data-href="{{url}}" data-numposts="10" data-width="520px"></div>

하지만 facebook  공식 가이드에도 px 단위로만 제안하고 있기 때문에 반응형 웹이나 가로가 100% 사이즈를 사용해야할 경우 어떻게 사용할지 정확한 가이드가 없다. 단순하게 data-width=100% 로 처리하면 될 것 같지만 사파리와 같은 특정 브라우저에서는 100% 사이즈가 적용이 되지 않는다. 크롬 브라우저로만 적용되는지 확인하고 운영하고 있다가 나중에 사파리에서 적용되지 않는 것을 확인하고 다음과 같이 스타일을 적용했다.

.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
  width: 100% !important;
}

이 스타일을 적용할 경우 사파리 브라우저에서 문제 없이 facebook comments 의 width 가 100% 로 적용되는 것을 확인했다.

References