Custom Facebook Like Counter dengan JQuery

Facebook Like Counter with JQuery - Menampilkan jumlah Like Facebook terkadang diperlukan. Tapi tampilannya kadang-kadang tidak sesuai dengan keinginan. Atau terkadang mempengaruhi loading blog.

Setelah mencari dan mencari, akhirnya saya menemukan cara untuk memodifikasi tampilan jumlah count pada like facebook ini. Sebetulnya ini tidak teralu penting, hanya sebagai catatan buat saya dan mungkin bermanfaat buat sobat.

Untuk memahaminya, silahkan lihat demo dibawah kemudian klik 'Like' (bukan maksa ya... kali aja mau lihat demo). Setelah diklik, kemudian Refresh.



Karena menggunakan embel² jQuery, otomatis template sobat harus terdapat jQuery library seperti ini.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

Kalau sudah ada (versi berapapun) tidak usah dipasang lagi, karena pada template tidak boleh lebih dari 1 jQuery library.

Untuk jQuery nya, seperti ini (ganti yang ditandai dengan fb sobat):

jQuery(document).ready(function() {
    realtime_fb_likes();
    setInterval("realtime_fb_likes()", 30000);
});
function realtime_fb_likes() {
    $.getJSON('http://graph.facebook.com/kangismet.net/', 
      function(data) {
      var fb_likes = addCommas(data.likes);
      $('.fb-likes-count').text(fb_likes);
    });
}
function addCommas(nStr) {
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + '.' + '$2');
    }
    return x1 + x2;
}

Untuk menampilkannya, simpan kode HTML ini dimana sobat suka

<span class="fb-likes-count"></span>