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.
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:
Read on to see how I fixed this issue.
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!