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 jelas isyarat 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 isyarat 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 isyarat 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 kasus dan untuk platform Blogger ada sedikit duduk kasus terutama pemanggilan script pada Google+ (https://apis.google.com/js/plusone.js) terus jelas dengan mengunakan metode Asynchronous Javascript diatas tidak akan berkerja alasannya ialah pemanggilan script tersebut sudah include pribadi 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 isyarat 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 isyarat 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 pola konkret penggunaan Asynchronous Javascript Loading kalian dapat melihatnya pribadi diblog aku dikala ini Blogger Tutorial atau disini Blogger Templates 2013.

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

Share this post