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.
Again this problem may happen on smart devices only such as iPhone and Android phone.
Background
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.
Cause
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() {
FB.init({
appId : '1234567890', // App ID
channelUrl : 'http://server.com/channel.html', // Channel File
status : true,
cookie : true,
xfbml : true
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));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.Solution
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!
Posts
