Adding 100% Fluid Width Facebook Comment

It’s painful to realize that one of the biggest Social Network in the world doesn’t allow fluid width comment box.

Here are the steps to get fluid Facebook comment box in your site:

  1. Get Facebook comment code from here: https://developers.facebook.com/docs/plugins/comments/Leave width blank.
    Set number of posts to any number you would like.

    Click ‘Get Code’ button and copy code from ‘Javascript SDK’ tab.
    (You will need to create new Facebook app)

  2. Put the code from 1. in your website
  3. Add the following CSS
    .fb-comments.fb_iframe_widget,
    .fb_iframe_widget span,
    .fb_iframe_widget span iframe {
      width: 100% !important;
    
  4. That’s it ! If you wrap Facebook comment in responsive <div>, it will become responsive comment box.

I usually wrap Facebook comment box with ~80% width div for Desktop, and 100% width for mobile 🙂

Hot Tip !

You can add this code to any web page, and change data-href=”…” to URL of current web page to create Facebook comment box for that specific page.

For WordPress theme, you can use <?php the_permalink(); ?> to get current page URL (for single page).


Posted

in

, , ,

by

Tags:

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *