Thursday, July 19, 2012

Fixing Facebook Like Button to make it valid and fast.

Okay, Facebook Like is important part of your site.
You can easily add code for showing it on your site, BUT!.. It's somehow erroneous and not optimized well.

So let me show you how to make it more valid and faster to load.
Original Facebook code that you can grab on their site: https://developers.facebook.com/docs/reference/plugins/like/
(I will use default setting but this is not important).

1. Include the JavaScript SDK on your page once, ideally right after the opening tag.
Place the code for your plugin wherever you want the plugin to appear on your page. <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>
So what you need to change:
First - script should have type attribute.
Second - script should load asynchronously for faster page rendering.
<div id="fb-root"></div> <script type="text/javascript"> (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> This part can be left unchanged. <div class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div>

No comments:

Post a Comment