Minggu, Juni 01, 2014

kode asynchronous javascript tombol like share social media

menggunakan kode asinkronus untuk tombol like share berbagi sosial media - berdasarkan pagespeed milik google, blog ini mempunyai nilai 81 dari 100 untuk tampilan versi desktop. sebenarnya sih kurang cepat tapi apa daya. untuk menambah pagespeednya, saya harus merombak ulang setiap bagian blog. ok, next time saja.

sebelumnya blog ini hanya mempunyai nilai 67 dari 100 untuk pagespeed. syukurnya saya masih bisa menambah kecepatannya dengan mengurangi widget ga penting seperti arsip blog. widget tersebut bisa diganti dengan membuat sitemap atau daftar isi untuk pengunjung.

selain itu, ada peringatan untuk menggunakan kode asinkronus untuk tombol google plus (plusone). sungguh merepotkan ya? maksud dari kode asinkronus ini adalah kode tombol akan di-load paling akhir setelah semua bagian penting blog muncul. hal ini akan menambah page speed blog atau web. tak hanya google plus, hal ini berlaku juga untuk tombol sosial media lainnya seperti facebook, twitter, dan pinterest. google merekomendasikan menggunakan kode asinkronus untuk setiap tombol like atau berbagi berbagai social media.

berikut cara menggunakan kode asinkronus untuk google plus, facebook, twitter, dan pinterest :

hapus semua script yang mempunyai unsur di bawah ini

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

jangan lupa bckup template anda!

letakkan script di bawah ini di atas </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 -->

gunakan script di bawah ini untuk menampilakn tombol social media di setiap artikel

<!-- 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>

namun, walaupun sudah menggunakan kode asinkronus untuk tombol google plus, peringatan untuk menggunakan kode tersebut masih tetap ada. ya sudah, ignore saja.

0 komentar:

Posting Komentar