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

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


Solusi terbaik untuk menangani duduk kasus 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 susukan onload pada obyek global yang memberatkan halaman sebab prosesnya ketika itu juga pribadi menilik javascript pada widget dan tombol like button.

Cara memasang Asynchronously Javascript Loading:

Silahkan letakan arahan 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 arahan 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 arahan 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 positif penggunaan Asynchronous Javascript Loading kalian sanggup melihatnya pribadi diblog aku ketika ini Blogger Tutorial atau disini Blogger Templates 2013.

Ok, agar sehabis mencoba tutorial ini loading halaman teman semua sanggup jadi makin cepat :)

Share this post