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

44 komentar:

  1. Balasan
    1. Kok miliku gak jalan alias eror Mas, Mohon pencerahannya.

      Hapus
    2. Maksudnya gak jalan gimana ya? kan dia berjalan di balik layar jadi memang tidak keliatan :)

      Hapus
    3. Kang Jum. Mungkin bisa diperhatikan script di atas pada bagian :


      Silahkan dibetulin aja kang jadi

      Hapus
    4. Maaf nih Om, tadi saya pasang, eh yg bikin error ketauan. itu pada kode kan strip setelah tanda seru kurang satu, sebab penutupnya yg diakhir kan dua strip tuh. jadi pas ane tambahin satu lagi jadi bener, jadinya begini

      Hapus
  2. ijin sedot gan ...

    BalasHapus
  3. Anonim1/7/13

    Solusi yang mantab kang,,, langsung dicoba.

    BalasHapus
  4. meminimalisir loading dengan memanfaatkan javascript baru bukannya sama aja menambah beban loading blog sob. Menurutku menggunakan bawaan blogspot jauh lebih cepat.

    BalasHapus
    Balasan
    1. kalo menggunakan bawaan blogspot gak bisa di custom letaknya, kayaknya cuman bisa include halaman post aja khan, koreksi kalo salah ya :)

      Hapus
  5. andika1/7/13

    terima kasih mas oom untuk sharingnya, cuman untuk blog yang banyak gambar tetap aja berat khan om?

    BalasHapus
    Balasan
    1. untuk halaman banyak gambar itu lain cerita :)

      Hapus
  6. Keren Tipsnya Mas Langsung Ane Terapkan dan Hasilnya Wowww. Thanks

    BalasHapus
  7. solusinya om baru saja saya coba. manjur, hehe ☺
    terima kasih banyak om.

    BalasHapus
  8. Menurutku ini bagus mas om

    BalasHapus
  9. terimakasih om, ini yang saya cari

    BalasHapus
  10. lumayan, dengan ini postingan saya gampang di share om..nice

    BalasHapus
  11. Om berengaruh pada Adsense ita ak kalo Script Diubah ubah?

    BalasHapus
    Balasan
    1. Tidak ada hubungannya sama sekali dengan adsense :)

      Hapus
  12. Luar biasa om karena membantu meringankan script loadingnya yang selama ini kadang membuat loading lambat tapi ada tutorial yang om buat beres semua :)

    BalasHapus
  13. Perlu dicoba ini om,mau ngerasain gimana beda loading sebelum dan sesudahnya.

    BalasHapus
  14. Solusi yang banyak ditanya ini om karena banyak yang bilang pakai javascript membuat loading lambat di blog tapi bantuan om ini mudahan meringankan blognya.Seep Om.

    BalasHapus
  15. om kalau mau nambah tombol share fb dan share g plus gmn caranya?

    BalasHapus
    Balasan
    1. sepertinya sudah banyak yang ngebahas, di googling aja ya..

      Hapus
  16. seneng nih blognya o-om udah update lagi,,udah mulai sharing lagi,,hehe,,dicoba dulu kang,,nuhun,, :)

    BalasHapus
  17. Kasian pemula kang... coba lebih detail untuk kode no 2 :
    masa ke ZoomTemplate semua... :)

    BalasHapus
    Balasan
    1. oh iya saya lupa, thanks ya :)

      Hapus
  18. thanks mas buat informasi nya.,.,.

    BalasHapus
  19. siap ke TKP nih gan, bagus postingannya.. :) salam blogger sukses

    BalasHapus
  20. terima kasih infonya

    BalasHapus
  21. langsung saya cobain om tipsnya,,
    makasih om udah share ilmunya

    BalasHapus
  22. Untuk yang sama-sama menggunakan JS, yang ini mungkin bisa menjadi salah satu alternatif terbaik om.

    BalasHapus
  23. gak mau ketinggalan n mu ikutan nyoba gan.......

    BalasHapus
  24. Thanks tutorialnya Om

    BalasHapus
  25. makasih nih gan infonya,,,

    BalasHapus
  26. keren om, saya coba di blog saya, jangan mampir balik yah om

    BalasHapus
  27. Tinggal copas aja ya om script tsb?
    Thanks

    BalasHapus
  28. trima kasih untuk tips nya...

    BalasHapus
  29. langsung dicoba gan, tinggal nunggu hasilnya,

    thanks

    BalasHapus
  30. Mohon ijin untuk COPAS SCRIPT-nya ya Gan..., saya mau aplikasikan ke website saya.

    Thanks

    BalasHapus
  31. om kalo tombol Like, tweet, G+ yang udah kepasang diblog, gimana kalo mau di modif sama asynchronous javascript loading

    BalasHapus
    Balasan
    1. pasang kode asynchronous javascript-nya saja, untuk kode likenya kalao sudah dipasang gak masalah :)

      Hapus
  32. Kang Oom, itu di script Asynchronous nya kan ada url http://www dot narga dot net kan, itu sebenernya url apa? maksudnya tetep kayak gitu atau diganti url blog saya? tadi saya ganti pake url saya tapi tetep jalan Kang.

    BalasHapus
    Balasan
    1. itu nama kode pembuat script sebaiknya dibiarkan saja :)

      Hapus
  33. Ijin ane coba sob,, oya ini aku kasih media sosial atau sosial bookmark mantep banget buat cari backlink sob,, http://telusur.me ,dan lintas.me . ini berefek pada index google dan hasilnya index google makin cepat..

    BalasHapus

Silahkan beri komentar dengan bijak dan sesuai dengan topik artikel, karena semua komentar akan saya moderasi terlebih dahulu sebelum ditampilkan. Thanks :)

 

Back to Top