Menambah Kode Async Like Facebook,
Mengapa menambah kode atau kata 'async', kode async atau mungkin singkatannya asyncron,
menambah kode async pada kode script-scriptan adalah sebenarnya bertujuan buat mempercepat loading blog itu sendiri diperamban, karena ini merupakan salah satu cara mempercepat loading,
coba aza buka di Speed Test Loading tentu ada bedanya, dan script tanpa kode async pada umumnya akan menghalangi atau disebut render perambanan blog atau situs,
namun juga ada kelemahannya terkadang ada sebagian kecil yang dipasang kode async malah tidak berfungsi script tersebut ini menurut pengalaman para pakar, mungkin karena saking tidak menghalangi atau menggagu peramban malah dianggap hilang ya,,,hehehehe...
Pada developers.google.com/speed/pagespeed/ disarankan untuk menggunakan async salah satunya like facebook,
silakan coba aza deh,,,
Berikut cara Menambah Kode Async Like Facebook:
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Untuk Selengkapnya:
Untuk Asynchron Loading Cara memasang tombol like untuk Facebook, Twitter, Pinterest dan Google+ silahkan cari kode seperti 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 kode 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 bisa kalian pasang tanpa ada masalah dan untuk platform Blogger ada sedikit masalah terutama pemanggilan script pada Google+ (https://apis.google.com/js/plusone.js) terus terang dengan mengunakan metode Asynchronous Javascript diatas tidak akan berkerja karena pemanggilan script tersebut sudah include langsung didalam koding Blogger, saya sebelumnya pernah mencoba menghapusnya dan usaha tersebut sia-sia saja :)
Selanjutnya kalian bisa memasang dimana saja tombol Like Button Facebook, Twitter, Pinterest dan Google+ dengan kode dibawah ini (ganti http://ngaran-ku.blogspot.com/ dibawah dengan alamat blog kalian) :
<!-- Google+ -->
<div class="g-plusone" data-size="medium" data-count="true" data-href="
http://ngaran-ku.blogspot.com/">
<!-- Twitter -->
<a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-url="
http://ngaran-ku.blogspot.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://ngaran-ku.blogspot.com/"></div>
<!-- Pinterest -->
<a data-pin-config='beside' data-pin-do='buttonPin' href='http://pinterest.com/pin/create/button/?url=
http://ngaran-ku.blogspot.com/'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>
Catatan: Ganti Kode berwarna merah
Alamatku dengan Url alamatmu
Untuk memasang Tombol Like Facebook, Twitter, Pinterest 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'/>
<!-- 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 contoh nyata penggunaan Asynchronous Javascript Loading
Sekian, selamat mencoba
Selesai