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

Baca Juga

Tombol Like Button yang dirancang oleh beberapa media umum menyerupai Google+, Twitter dan Facebook sanggup katakan tombol yang wajib dipasang pada halaman blog, alasannya fungsi dari tombol ini selain untuk mengembangkan juga sangat penting untuk mengetahui seberapa anggun 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 alasannya ada beban pemuatan javascript terlebih dahulu dari pihak ketiga ketika pertama kali halaman tersebut melaksanakan proses loading.


Solusi terbaik untuk menangani dilema 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 simpulan 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 alasannya 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 rujukan faktual penggunaan Asynchronous Javascript Loading kalian sanggup melihatnya pribadi diblog aku ketika ini Blogger Tutorial atau disini Blogger Templates 2013.

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