Perbaikan Asynchronous Javascript Loading untuk Tombol Like Sosial Media

Tutorial kali ini hanya untuk memperbaiki sekaligus mengganti ketidaksempurnaan metode Asynchronous Javascript Loading Untuk Tombol Like Twitter, Facebook dan Google+ yang saya tulis sebelum ini dan terus terang kode tersebut tidak berjalan sebagaimana yang saya harapkan. Saat saya mencoba ngecek menggunakan PageSpeed Tool dari Google dan ternyata tool tersebut tetap memberi laporan bahwa blog ini masih menggunakan metode Sinkron dan tentu saja untuk menghindari pencekalan penguraian halaman terpaksa saya harus merombak ulang metode lama dan menganti dengan metode Asynchronous Javascript Loading yang benar-benar bekerja sebagaimana mestinya.

Mungkin kalian juga mengalami hal yang sama dan sudah terlanjur menggunakan Script sebelumnya dan alangkah baiknya ganti saja dengan script yang bekerja dengan baik seperti dibawah ini.

Jika kalian sebelumnya sudah memasang tombol like untuk Facebook, Twitter, Pinterest dan Google+ silahkan cari kode seperti dibawah ini dan hapus semuanya:

http://connect.facebook.net/en_US/all.js
http://platform.twitter.com/widgets.js
http://assets.pinterest.com/js/pinit.js
https://apis.google.com/js/plusone.js

Lalu ganti dengan script dibawah ini dan letakan kode dibawah ini diatas tag </body>

<!-- Asynchronous Javascript Loading for Facebook, Twitter, G+ -->
<div id='fb-root' />
<script type='text/javascript'>
// Async Facebook
(function() {
    var fb1 = document.createElement('script');
    fb1.type = 'text/javascript';
    fb1.async = true;
    fb1.src = 'http://connect.facebook.net/en_US/all.js#xfbml=1', 'facebook-jssdk';
    var fb2 = document.getElementsByTagName('script')[0];
    fb2.parentNode.insertBefore(fb1, fb2);
})();
// Async Twitter
(function() {
    var tw1 = document.createElement('script');
    tw1.type = 'text/javascript';
    tw1.async = true;
    tw1.src = 'http://platform.twitter.com/widgets.js';
    var tw2 = document.getElementsByTagName('script')[0];
    tw2.parentNode.insertBefore(tw1, tw2);
})();
// Async Pinterest
(function() {
    var pt1 = document.createElement('script');
    pt1.type = 'text/javascript';
    pt1.async = true;
    pt1.src = 'http://assets.pinterest.com/js/pinit.js';
    var pt2 = document.getElementsByTagName('script')[0];
    pt2.parentNode.insertBefore(pt1, pt2);
})();
// Async Google+
(function() {
    var gp1 = document.createElement('script');
    gp1.type = 'text/javascript';
    gp1.async = true;
    gp1.src = 'https://apis.google.com/js/plusone.js';
    var gp2 = document.getElementsByTagName('script')[0];
    gp2.parentNode.insertBefore(gp1, gp2);
})();
</script>
<!-- End Asynchronously Javascript -->

Untuk pengguna platform non Blogger Script diatas bisa kalian pasang tanpa ada masalah dan untuk platform Blogger ada sedikit masalah terutama pemanggilan script pada Google+ (https://apis.google.com/js/plusone.js) terus terang dengan mengunakan metode Asynchronous Javascript diatas tidak akan berkerja karena pemanggilan script tersebut sudah include langsung didalam koding Blogger, saya sebelumnya pernah mencoba menghapusnya dan usaha tersebut sia-sia saja :)

Selanjutnya kalian bisa memasang dimana saja tombol Like Button Facebook, Twitter, Pinterest dan Google+ dengan kode dibawah ini (ganti http://www.zoomtemplate.com dibawah dengan alamat blog kalian) :

<!-- Google+ -->
<div class="g-plusone" data-size="medium" data-count="true" data-href="http://www.zoomtemplate.com">
<!-- Twitter -->
<a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-url="http://www.zoomtemplate.com">Tweet</a>
<!-- Facebook -->
<div id="fb-root"></div>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="1" data-show-faces="false" data-href="http://www.zoomtemplate.com"></div>
<!-- Pinterest -->
<a data-pin-config='beside' data-pin-do='buttonPin' href='http://pinterest.com/pin/create/button/?url=http://www.zoomtemplate.com'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>

Untuk memasang Tombol Like Facebook, Twitter, Pinterest dan Google+ dalam halaman postingan silahkan gunakan kode dibawah ini:

<!-- Google+ -->
<div class='g-plusone' data-count='true' data-size='medium' expr:href='data:post.url'/>
<!-- Twitter -->
<a class='twitter-share-button' data-count='horizontal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
<!-- Facebook -->
<div id='fb-root'/>
<div class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' data-width='1' expr:data-href='data:post.url'/>
<!-- Pinterest -->
<a data-pin-config='beside' data-pin-do='buttonPin' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>

Untuk contoh nyata penggunaan Asynchronous Javascript Loading kalian bisa melihatnya langsung diblog saya saat ini Blogger Tutorial atau disini Blogger Templates 2013.

Ok, semoga setelah mencoba tutorial ini loading halaman sobat semua bisa jadi makin cepat :)