Home >> Internet >> How to Make Facebook Comments System & WordPress Plugin Fluid & Auto Responsive Width?

How to Make Facebook Comments System & WordPress Plugin Fluid & Auto Responsive Width?


When I started this TND Blog with a responsive design, everything seems to work perfect except the Facebook Comments system. Even the Facebook comments works fine and shows up perfectly blended to the responsive design of the theme unless in mobile phones. In mobile devices the width of the display screen is not showing the 700 px wide comment form. So, the theme was broken and the comment form went outside the theme.

Finally I have found a solution, which will make the css of the FB Comment form into fluid, responsive and 100% of width instead of fixed 700 px. Follow these steps below:

<

If you are using direct code snippet from Facebook developers site for the comment form, you need to add the below codes to the theme’s main css file:

.fb-comments, .fb-comments span, .fb-comments iframe

{

width: 100% !important;

}

Or try this code:

#fbcomments, .fb-comments, .fb-comments iframe[style], .fb-comments span

{

width: 100% !important;

}

Or try this code:

.fb-comments span

{

width: 100% !important;

}

.fb-comments iframe

{

width: 100% !important;

}

This will force the width of the code to occupy 100% of the inherited div. So that the fb comment form will not go outside the theme box. Remember, this code will also works in any website using default FB comment plugin. In WordPress using Facebook Comments, you need to enter any of the above code to your domainname/wp-content/wp-theme/themename/themestyesheet.css

I am using SEO Facebook Comments plugin, since 2 years on all my websites. Apart from the free plugin, the main advantage of this SEO Facebook Comments plugin is – The user comments from FB ID, will be stored in your local database and can be visible as normal WP comments. In order to avoid double comments (FB & WordPress), there is an option, which will hide the default comments and shows only the FB Comments. Here, the positive thing for search engine optimization is – the search engines can crawl & index the hidden default comments.

To Change SEO Facebook Comment width to Auto Responsive & Fluid:

fb-seo-comment

Go to the dashboard and click on Editor under Plugins, which will open an editor window. Now select “SEO Facebook Comments” on the top right drop down list. The select /assets/fbseo-style.css and add this code entirely by removing old code:

@CHARSET “UTF-8”;

div#fbSEOComments{

margin:0 auto; width: 100% !important;

}

div#sharefbseo{

width:425px; margin:0 auto; font-size:11px

}

div#sharefbseo a

{

font-size:11px

}

If you still got the problem, then add the below code to your WordPress theme’s main css file located here – domainname/wp-content/wp-theme/themename/themestyesheet.css:

div#fbSEOComments{

margin:0 auto; width: 100% !important;

}

This will help you to resolve your issue and your theme won’t be broken in Phones & Tablets. Everything will be responsive. If you want to say thanks, follow TND – The Next Digit on FB, G+ & Twitter for timely updates.


About suzanne

jhostetler@incomestore.com'
Suzanne loves to cover all aspects of Technology, Online Shopping & Gadgets. She is an Ebay & Amazon seller, who provides valuable information for the successful entrepreneurship. She has also worked for the Online Media such as PC-Tablet.com and many print media - Tech Magazines in France & US.

Fatal error: Uncaught Exception: 12: REST API is deprecated for versions v2.1 and higher (12) thrown in /home/nitin198/public_html/wp-content/plugins/seo-facebook-comments/facebook/base_facebook.php on line 1273