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 aba-aba 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 aba-aba 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 aba-aba 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 dilema dan untuk platform Blogger ada sedikit dilema 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 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 aba-aba 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 aba-aba 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='"http://pinterest.com/pin/create/button/?url=" + data:post.url'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>
Untuk pola positif penggunaan Asynchronous Javascript Loading kalian dapat melihatnya pribadi diblog aku dikala ini Blogger Tutorial atau disini Blogger Templates 2013.
Ok, supaya sesudah mencoba tutorial ini loading halaman teman semua dapat jadi makin cepat :)
