Mar 13, 2014

f Comment

[SOLVED] Facebook Social Plugins Fail To Render On Mobile Devices. How Do I Fix FB Javascript API SDK Failures on Smartphones?

Amazon If you integrate FB social plugins into your website you may realize that the FB plugins are not rendered on mobile devices such as iPhone and Android smartphones. The FB social plugins on your website are hidden or invisible on mobile device's web browser. However such problems do not occur on laptop computers or PCs.

Or maybe only sometimes FB like button and FB comment plugin on your website fail to appear when viewed on smartphones like iPhone and Android phone, and other times they are rendered and loaded successfully.

Why? How do you fix the problem that FB plugins sometimes do not render on smart mobile phones?

If FB plugin renders on your smartphone but it breaks page layout during page load, consult my other article Showing FB Plugins on Smartphones Without Breaking Layout!

I remember I was having this problem because I was using the iframe version of the FB social plugin API to render the FB Like button. If I used the HTML5 version of the plugin code I would not have had this problem. However if I used the HTML5 version, my page's layout would be broken for a brief moment while the page is loading. When the page is done loading, the layout would snap back to its perfect position. Since I do not like the brief moment of the broken layout, I decided to go with the iframe solution.

Again this problem may happen on smart devices only such as iPhone and Android phone.


This behavior happened on my website Chinese to English. After some testing I realized this behavior, or misbehavior rather, was only happening on mobile devices. It was not happening on my laptop or PC or MacBook.


The cause seems to have to do with when the FB JavaScript API is requested while the webpage is loading. I put the FB API at the bottom of the HTML markup. The asynchronous FB API SDK looks something like this:
window.fbAsyncInit = function() {
      appId      : '1234567890', // App ID
      channelUrl : '', // Channel File
      status     : true, 
      cookie     : true, 
      xfbml      : true  

// Load the SDK Asynchronously
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); = id; js.async = true;
     js.src = "//";
     ref.parentNode.insertBefore(js, ref);
For some reason this causes problems when FB social plugins are trying to render on the page. The FB plugins including FB Like button, FB comment plugin are all invisible and hidden. Let's read on to see how I fixed the problem.


To fix this issue I had to move the FB API SDK code up to as high as possible in the HTML markup. I put the code right after the opening <body> tag.

You are welcome to look at the source HTML markup of my website Chinese to English to see exactly how I fixed it. Go to this website on your mobile phone to view the mobile layout.

However, this fix still does not guarantee that the FB social plugins will always render successfully. There are still times when the plugins fail to load, but the chance of this happening is much lower than before.

Questions? Let me know!
Please leave a comment here!
One Minute Information - by Michael Wen
ADVERTISING WITH US - Direct your advertising requests to Michael