[SOLVED] Fixing Strange Facebook Like Button Layout Bug on Mobile! FB Like Button Breaks Page Layout during Page Load on Smartphones.

One day I realized my Facebook Like button on Chinese-to-English translation service website has layout problems on my iPhone. During page load, the FB like button, while being invisible, would take up a large height pushing down the content following it, and then the button would be rendered and the layout would snap back to its proper height. This behavior occurs on Android smartphones too.

Another issue is that the Chrome APP on my iPhone is not able to render the Facebook Like button on my website.

I have never had these issues before. What is going on?

So basically there are two issues: the Facebook Like button during-page-load layout snapping issue on mobile devices, the iphone-Chrome-app-not-able-to-render-facebook-like-button issue.

Note this problem does not happen on PC computers or laptop computers. However it is still better to fix it because your website may be viewed on mobile devices.

Root Cause

I was using the following API to render the Facebook Like button.

<div class="fb-like" data-href="http://www.chtoen.com/" data-width="100" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>

The FB Like button looks like the following:

It turns out that Facebook has changed how this button is rendered via JavaScript. It would be nice if the changes would not have affected the way the button is rendered, but unfortunately they did.

Read on to see how I fixed this issue.

Solution

I realized that if I used the iframe to render the Facebook Like button then both issues would be gone. So I simply changed the Facebook API code to use iframe instead:

<iframe width="100" height="20" style="vertical-align: text-top;border:none; overflow:hidden; width:100px; height:20px" allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=http://www.chtoen.com/&send=false&layout=button_count&width=72&show_faces=false&action=like&colorscheme=light&height=20'></iframe>

Here is how the FB Like button looks:

You may need to tweak the CSS to make it work. The key style is overflow:hidden. If you are still seeing some layout issue, please read Showing FB Plugins on Smartphones Without Breaking Layout!

Your problems should be solved.

Questions? Let me know!