Maret 29, 2014

Async Javascript Loading Social Share Button

 Async Javascript Loading Social Share Button Untuk Blogger

Tips blogging terbaru kali ini adalah membuat async javascript social share button sehingga dapat meringankan kinerja blog anda saat loading. Asyncrounous javascript atau biasa disebut dengan async javascript ini lebih friendly dengan kecepatan loading blog anda. Hal ini dikarenakan dalam pemrograman Social Share Button dengan asyncronous API tidak akan banyak membebani browser ketika blog sedang di load.

Pengertian Async Javascript

Modul Asynchronous definition (AMD) adalah API JavaScript untuk mendefinisikan modul sehingga modul dan dependensinya dapat memuat asynchronously. Hal ini berguna dalam meningkatkan kinerja situs dengan melewati beban sinkron modul bersama dengan sisa dari isi situs.

Selain memuat beberapa file JavaScript saat runtime, AMD dapat digunakan selama pengembangan untuk menyimpan file JavaScript dikemas dalam banyak file yang berbeda. Hal ini mirip dengan bahasa pemrograman lain, misalnya Jawa, yang mendukung kata kunci seperti impor, paket, dan kelas untuk tujuan ini. Hal ini kemudian memungkinkan untuk menggabungkan dan mengecilkan semua sumber JavaScript ke dalam satu file kecil yang digunakan untuk penyebaran produksi. - wikipedia
Async Javascript dapat diterapkan pada semua pemanggilan javascript dan XHTML, anda sekalian mungkin sering mendengar AJAX, bukan club sepak bola, akan tetapi sebuah bahasa pemrograman berbasis javascript. AJAX ini lah yang biasa digunakan untuk async javascript pada social share button. Dengan AJAX ini diharapkan loading blog anda akan lebih ringan ketika memasang kode default social share button pada blog anda.

Membuat Async Social Share Button

Async Javascript Loading Social Share Button

Ada beberapa social share button yang dapat anda buat dengan menggunakan asyncrounous javascript, diantaranya Facebook, Google+, twitter, dsb. Saat memilih code yang digunakan pada social share button developer, saya rekomendasikan selalu untuk memilih asyncronous. Gunakan kode berikut pada template untuk mengoptimalkan kecepatan loading dalam memuat asynchronous. Optimasi ini memungkinkan seluruh konten di load sebelum atau pada saat yang sama. berikut code javascript yang harus dipasang pada template anda, letakan code dibawah ini sebelum code </head> atau sebelum </body>:

<script type="text/javascript">
(function(doc, script) {
  var js, 
      fjs = doc.getElementsByTagName(script)[0],
      frag = doc.createDocumentFragment(),
      add = function(url, id) {
          if (doc.getElementById(id)) {return;}
          js = doc.createElement(script);
          js.src = url;
          id && (js.id = id);
          frag.appendChild( js );
      };
     
    // Google+ button
    add('http://apis.google.com/js/plusone.js');
    // Facebook SDK
    add('//connect.facebook.net/en_US/all.js#xfbml=1&appId=200103733347528', 'facebook-jssdk');
    // Twitter SDK
    add('//platform.twitter.com/widgets.js');
    fjs.parentNode.insertBefore(frag, fjs);
}(document, 'script'));
</script>

Cara Memanggil Async Social Share Button

Anda dapat memanggil async social share button yang telah dibuat diatas dengan cara menggunakan code HTML dibawah ini. Anda bisa meletakan kode dibawah ini pada tempat dimana social share button ingin ditrampilkan.

<!--Twitter+--> 
<a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>
<!--Google+-->
<div class="g-plusone" data-size="medium" data-count="true"></div>
<!--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-action="recommend"></div>


Anda juga dapat memodifikasi share button ini agar dapat menyesuaikan kebutuhan blog anda dengan mengunjungi button developers pada masing - masing social media berikut :

facebook
google+
twitter

Berikut Hasil Test GTmetrix blog DEVILZART setelah menggunakan asyncronous pada elemen social share button.

Async Javascript Loading Social Share Button
Async Javascript Loading Social Share Button


Catatan - kekurangan pada platform blogger :
Platform blogger ini secara langsung terintegrasi dengan Google+ dan menggunakan syncronous pada pemanggilan javascriptnya, sehingga masih terdapat satu syncronous javascript pada blog ini yaitu pada javascript berikut: https://apis.google.com/js/plusone.js.

Tips blogging tentang Async Javascript Loading Social Share Button ini dapat anda gabungkan dengan twitter card, sehingga ketika artikel atau blog anda dishare ke twitter akan menampilkan content - content menarik di blog anda seperti gambar, video, aplikasi, dll. Silahkan baca artikel "twitter card untuk blogger" untuk mengenal lebih dalam tentang twitter card.

4 comments » Async Javascript Loading Social Share Button

makasih mas tutorialnya, izin nyimak yaa mas

Balas

makasih mas tutorialnya, nambah pengetahuan nih

Balas

terima kasih. saya berbangga dengan kejayaan kamu mas.

Balas

Mohon maaf komentar pada blog ini kami moderasi dan tidak akan langsung ditampilkan. Silahkan berikan komentar sesuai judul dan isi artikel. Komentar yang mengandung link aktif / live link, iklan, pornografi, dan semacamnya akan dihapus atau kami masukan pada kategori SPAM.

Catatan :
1. Untuk menyisipkan kode gunakan  <i rel="code">kode yang akan disisipkan</i>
2. Untuk menyisipkan kode panjang gunakan <i rel="pre">kode yang akan disisipkan</i>
3. Untuk menyisipkan quote gunakan <b rel="quote">catatan anda</b>
4. Untuk menyisipkan gambar gunakan <i rel="image">URL gambar</i>
5. Untuk menyisipkan video gunakan <i rel="youtube">URL Video youtube</i>

Keterangan :
Gunakan HTML konverter sebelum menyisipkan kode.
Contoh link image : http://blablabla.com/image.jpg.

Profile yang mengandung broken link akan dihapus tanpa pemberitahuan terlebih dahulu.
Konversi Kode

Top