PLEASE DISABLE YOUR ADBLOCK OR DNS BLOCKED FOR SUPPORT THIS SITE!

Blog Inspirasi Digital

Blog Inspirasi Digital

Tutorial Mikrotik, Hotspot, Blog, SEO, WEB 2.0, HTML, CSS, Javascript dan Inspirasi Digital

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

dev checkTombol Like Button yang dirancang oleh beberapa media sosial seperti Google+, Twitter dan Facebook bisa katakan tombol yang wajib dipasang pada halaman blog, karena fungsi dari tombol ini selain untuk berbagi juga sangat penting untuk mengetahui seberapa bagus pengunjung untuk menilai kualitas artikel pada suatu halaman, tapi dengan memasang tombol sosial ini dapat menyebankan proses onload halaman menjadi makin berat, hal ini terjadi karena ada beban pemuatan javascript terlebih dahulu dari pihak ketiga ketika pertama kali halaman tersebut melakukan proses loading.

Asynchronous-Javascript
Solusi terbaik untuk menangani masalah loading pada pemuatan tombol sosial media bisa menggunakan tehnik Asynchronous Javascript Loading, teknik ini bekerja dengan menunda pemuatan javascript sementara sampai halaman yang diakses benar-benar selesai terbuka sempurna, barulah saat itu proses pemuatan tombol sosial media ini dijalankan. Untuk saat ini hanya Google+ saja yang saya ketahui sudah mengaplikasikan pilihan untuk Asynchronous Loading dengan Javascript, sedangkan untuk Twitter dan Facebook sepertinya masih melakukan akses onload pada obyek global yang memberatkan halaman karena prosesnya saat itu juga langsung memeriksa javascript pada widget dan tombol like button.

Cara memasang Asynchronously Javascript Loading:

Silahkan letakan kode 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 bisa memasang dimana saja tombol Like Button Facebook, Twitter dan Google+ dengan kode dibawah ini (sesuaikan tulisan 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 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'/>

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 :)

BERI KOMENTAR

Maaf untuk sementara waktu komentar di blog ini di nonaftifkan.

 

Back to Top