The Best Way To Render Facebook Social Plugins In HTML Markup. Showing FB Plugins on Smartphones Without Breaking Layout!

Amazon After you place the code for your Facebook social plugin on your website you may realize that something is not right when your website is rendered on a mobile device or smartphone. During the page load you may see a big empty region where the plugin is, and it disappears when the plugin is finally rendered. If this happens to you you've come to the right place.

My other post on Facebook Social Plugins Fail To Render On Mobile Devices gives you context on the problem of using HTML5 plugin code which only happens on mobile devices including iPhone and Android phone.

Below I will show you exactly how to fix the problem so that your FB social plugins will not show the empty region during page load on smartphones. The goal is to avoid layout breaking on mobile phones during page load even though when the page is fully loaded and rendered the page will eventually look fine.

First let's look at the causes of this issue.

Cause

When you click Get Code on the Facebook social plugin document webpage (e.g. https://developers.facebook.com/docs/plugins/like-button/) you see that you have the option of HTML5 or IFRAME. The HTML5 plugin code looks like the following:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

At the time of the writing, HTML5 plugin code has the problem of breaking page layout on smart devices during page load. If you use HTML5 plugin API code you may see a big empty region during page load, which disappears when the FB plugin is rendered and the page looks good again.

Therefore, simply pick IFRAME plugin code as described below.

Solution

The IFRAME plugin code looks like the following:

<iframe src="//www.facebook.com/plugins/like.php?locale=zh_TW&href=http%3A%2F%2Fwww.chtoen.com%2F&amp;width=72&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=21&amp;appId=370869749602419" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:35px;" allowTransparency="true"></iframe>

If you use iframe plugin code the problem is much better, but you still may see a small empty region which disappears when the FB plugin is rendered. In other words the page layout may still break a little on smartphones during page load.

Let's look at an even better solution.

An Even Better Solution!

We can hide the social plugin first with CSS style, and when the plugin is ready to be displayed we show the plugin via CSS and Javascript.

Here is an example of such plugin code:

<iframe class='fbPlugin' src="//www.facebook.com/plugins/like.php?locale=zh_TW&href=http%3A%2F%2Fwww.chtoen.com%2F&amp;width=72&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=21&amp;appId=370869749602419" scrolling="no" frameborder="0" style="display:none; border:none; overflow:hidden; height:35px;" allowTransparency="true"></iframe>

As you can see I've added display:none; to the CSS style to hide this plugin.

How do you know when the plugin is ready to render? Easy. Simply put the following Javascript code within the window.fbAsyncInit:

//'xfbml.render' indicates that all of the social plugins on the page have been loaded.
FB.Event.subscribe('xfbml.render', function(response) {
  $('.fbPlugin').show();
});

If you don't know what window.fbAsyncInit is consult my other post The Best Way to Install Facebook JavaScript API.

This solution should make sure the page layout near the Facebook plugin does not break during page load. Isn't this a neat solution to fix page layout breaking issue on smart phones while the page is loading?

If you have any questions let me know and I will do my best to help you!