menu

Memasang Asynchronous Javascript Loading Tombol Like Sosial Media G+, Facebook, Twitter dan Pinterest


Tombol like sosial media dari berbagai jejaring sosial merupakan hal yang wajid untuk di pasang pada halaman sebuah blog, melihat dari fungsi tombo-tombol sosial media ini sangat membantu kita untuk mengetahui seberapa bagus kualitas artikel yang kita terbitkan, karena dengan keberadaan tombol sosial media ini pengunjung dapat menilai kualitas artikel, dan juga melaui sosial media ini pengunjung juga dapa dengan mudah melakukan share artikel ke jejaring sosial mereka, yang tentunya akan membantu kita dalam meningkatkan pengunjung ke blog. Namun keberadaan tombol sosial media ini dapat menyebakan proses loading halaman blog menjadi lebih berat, hal ini disebakan karena ada beban loading javascript terlebih dahulu dari pihak ketiga saat halaman pertama kali melakukan proses loading.

Pada artikel kali ini admin akan share Asynchronous Javascript yang dapat memperbaiki loading halaman blog yang menjadi berat karena keberadaan tombol sosial media seperti yang saya uraikan di atas. Jika sebelumnya anda sudah memasang tombol like sosial media di blog, silahkan cari dan hapus terlebih dahulu alamat javascript tombol like tersebut, seperti 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

Kemudian cari kode tag </body>  lalu copy dan pastekan  Asynchronous Javascript  dibawah ini tepat diatasnya.
<!-- 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 -->

Sekarang anda bisa memasang tombol like sosial media  Google+, Facebook, Twiiter dan Pinterest dimanapun anda inginkan. Anda dapat mengguanakan kode tombol like sosial media dibawah ini :
<!-- 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.tobadak.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  Google+, Facebook, Twiiter dan Pinterest di setiap postingan anda dapat menggunakan kode di bawah 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>

Yapzz,, sekian dulu untuk tuorial blogger kali ini gan...


Judul : Memasang Asynchronous Javascript Loading Tombol Like Sosial Media G+, Facebook, Twitter dan Pinterest
URL : http://www.tobadak.com/2014/01/memasang-asynchronous-javascript-loading-tombol-like-sosial-media.html
Penulis : Arman Tobadak
Back to Top