Search code examples
javascriptresponsive-designfacebook-comments

How to make Responsive Facebook Comments


I'm having trouble getting the Facebook Comments Plugin responsive. Apparently they constantly change the way of rendering the frame and thus is very difficult to find a solution on the web.

Apparently the newest form was implemented in March 2014.

The old way was by CSS but it does not solve the problem nowadays. Apparently a javascript to rewrite the code that will call the frame code is required. This code should also make the adaptation of "data-width" every change browser size.

Someone already implemented this solution? Does anyone know another way to solve?

Thank you very much.


Solution

  • It looks like you can now specify 100% width in the facebook comments box like so, but it only works for page load. At least it's better than before.

    <div class="fb-comments" 
      data-href="http://example.com/" 
      data-width="100%" 
      data-numposts="5" 
      data-colorscheme="light">
    </div>
    

    I still had to add the following CSS if you want to change the width as the window change, and there's not guarantee that it won't change in the future. Hopefully the above code will eventually be fully responsive.

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