Perbaikan Asynchronous Javascript Loading Untuk Tombol Like Sosial Media

Tutorial kali ini hanya untuk memperbaiki sekaligus mengganti ketidaksempurnaan metode Asynchronous Javascript Loading Untuk Tombol Like Twitter, Facebook dan Google+ yang aku tulis sebelum ini dan terus terperinci arahan tersebut tidak berjalan sebagaimana yang aku harapkan. Saat aku mencoba ngecek memakai PageSpeed Tool dari Google dan ternyata tool tersebut tetap memberi laporan bahwa blog ini masih memakai metode Sinkron dan tentu saja untuk menghindari pencekalan penguraian halaman terpaksa aku harus merombak ulang metode usang dan menganti dengan metode Asynchronous Javascript Loading yang benar-benar bekerja sebagaimana mestinya.

Mungkin kalian juga mengalami hal yang sama dan sudah terlanjur memakai Script sebelumnya dan alangkah baiknya ganti saja dengan script yang bekerja dengan baik menyerupai dibawah ini.

Jika kalian sebelumnya sudah memasang tombol like untuk Facebook, Twitter, Pinterest dan Google+ silahkan cari arahan menyerupai dibawah ini dan hapus semuanya:

http://connect.facebook.net/en_US/all.js http://platform.twitter.com/widgets.js http://assets.pinterest.com/js/pinit.js https://apis.google.com/js/plusone.js 

Lalu ganti dengan script dibawah ini dan letakan arahan dibawah ini diatas tag </body>

<!-- Asynchronous Javascript Loading for Facebook, Twitter, G+ --> <div id='fb-root' /> <script type='text/javascript'> // Async Facebook (function() {     var fb1 = document.createElement('script');     fb1.type = 'text/javascript';     fb1.async = true;     fb1.src = 'http://connect.facebook.net/en_US/all.js#xfbml=1', 'facebook-jssdk';     var fb2 = document.getElementsByTagName('script')[0];     fb2.parentNode.insertBefore(fb1, fb2); })(); // Async Twitter (function() {     var tw1 = document.createElement('script');     tw1.type = 'text/javascript';     tw1.async = true;     tw1.src = 'http://platform.twitter.com/widgets.js';     var tw2 = document.getElementsByTagName('script')[0];     tw2.parentNode.insertBefore(tw1, tw2); })(); // Async Pinterest (function() {     var pt1 = document.createElement('script');     pt1.type = 'text/javascript';     pt1.async = true;     pt1.src = 'http://assets.pinterest.com/js/pinit.js';     var pt2 = document.getElementsByTagName('script')[0];     pt2.parentNode.insertBefore(pt1, pt2); })(); // Async Google+ (function() {     var gp1 = document.createElement('script');     gp1.type = 'text/javascript';     gp1.async = true;     gp1.src = 'https://apis.google.com/js/plusone.js';     var gp2 = document.getElementsByTagName('script')[0];     gp2.parentNode.insertBefore(gp1, gp2); })(); </script> <!-- End Asynchronously Javascript --> 

Untuk pengguna platform non Blogger Script diatas dapat kalian pasang tanpa ada duduk perkara dan untuk platform Blogger ada sedikit duduk perkara terutama pemanggilan script pada Google+ (https://apis.google.com/js/plusone.js) terus terperinci dengan mengunakan metode Asynchronous Javascript diatas tidak akan berkerja alasannya pemanggilan script tersebut sudah include eksklusif didalam koding Blogger, aku sebelumnya pernah mencoba menghapusnya dan perjuangan tersebut sia-sia saja :)

Selanjutnya kalian dapat memasang dimana saja tombol Like Button Facebook, Twitter, Pinterest dan Google+ dengan arahan dibawah ini (ganti http://www.zoomtemplate.com 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> <!-- Pinterest --> <a data-pin-config='beside' data-pin-do='buttonPin' href='http://pinterest.com/pin/create/button/?url=http://www.zoomtemplate.com'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a> 

Untuk memasang Tombol Like Facebook, Twitter, Pinterest 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'/> <!-- Pinterest --> <a data-pin-config='beside' data-pin-do='buttonPin' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a> 

Untuk referensi positif penggunaan Asynchronous Javascript Loading kalian dapat melihatnya eksklusif diblog aku ketika ini Blogger Tutorial atau disini Blogger Templates 2013.

Ok, biar sehabis mencoba tutorial ini loading halaman teman semua dapat jadi makin cepat :)