Asynchronous Javascript Loading Untuk Tombol Like Twitter, Facebook Dan Google+

Tombol Like Button yang dirancang oleh beberapa media umum ibarat Google+, Twitter dan Facebook sanggup katakan tombol yang wajib dipasang pada halaman blog, sebab fungsi dari tombol ini selain untuk membuatkan juga sangat penting untuk mengetahui seberapa manis pengunjung untuk menilai kualitas artikel pada suatu halaman, tapi dengan memasang tombol sosial ini sanggup menyebankan proses onload halaman menjadi makin berat, hal ini terjadi sebab ada beban pemuatan javascript terlebih dahulu dari pihak ketiga ketika pertama kali halaman tersebut melaksanakan proses loading.


Solusi terbaik untuk menangani duduk perkara loading pada pemuatan tombol sosial media sanggup memakai tehnik Asynchronous Javascript Loading, teknik ini bekerja dengan menunda pemuatan javascript sementara hingga halaman yang diakses benar-benar final terbuka sempurna, barulah ketika itu proses pemuatan tombol sosial media ini dijalankan. Untuk ketika ini hanya Google+ saja yang aku ketahui sudah mengaplikasikan pilihan untuk Asynchronous Loading dengan Javascript, sedangkan untuk Twitter dan Facebook tampaknya masih melaksanakan jalan masuk onload pada obyek global yang memberatkan halaman sebab prosesnya ketika itu juga pribadi mengusut javascript pada widget dan tombol like button.

Cara memasang Asynchronously Javascript Loading:

Silahkan letakan instruksi dibawah ini diatas tag </body>

<!-- Asynchronous Javascript Loading for Facebook, Twitter, G+ --> <script type='text/javascript'> //<![CDATA[ /* * Async Sharing Buttons (G+, Facebook, Twitter) * http://www.narga.net */ (function(doc, script) { var js, fjs = doc.getElementsByTagName(script)[0], frag = doc.createDocumentFragment(), add = function(url, id) { if (doc.getElementById(id)) { return; } js = doc.createElement(script); js.src = url; id && (js.id = id); frag.appendChild(js); }; // Google+ button add('http://apis.google.com/js/plusone.js'); // Facebook SDK add('http://connect.facebook.net/en_US/all.js#xfbml=1', 'facebook-jssdk'); // Twitter SDK add('http://platform.twitter.com/widgets.js'); fjs.parentNode.insertBefore(frag, fjs); }(document, 'script')); //]]> </script> <!-- End Asynchronously Javascript --> 

Selanjutnya kalian sanggup memasang dimana saja tombol Like Button Facebook, Twitter dan Google+ dengan instruksi dibawah ini (sesuaikan goresan pena warna merah 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> 

Untuk memasang Tombol Like Facebook, Twitter dan Google+ dalam halaman postingan silahkan gunakan instruksi 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'/> 

Untuk pola konkret penggunaan Asynchronous Javascript Loading kalian sanggup melihatnya pribadi diblog aku ketika ini Blogger Tutorial atau disini Blogger Templates 2013.

Ok, biar sesudah mencoba tutorial ini loading halaman sahabat semua sanggup jadi makin cepat :)