Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Custom Facebook Like Counter dengan JQuery

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

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

http://elishaterada.com/realtime-facebook-likes-count-updater-with-jquery/

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

121 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. Amankan dulu posisi disini ^_^ setelah itu baru komentar ya :)
    1. oh.. yang ini nih. kalau saya pasang pas di sliding rekomendasi kang :)
    2. Mbak leoni numpang comment :)

      Oh ya kang ismet, bisa jelasan penggunaan CSS dengan
      1. LESS
      2. SCSS
      3. SASS

      Saya cari di css-tricks , tapi susah ngesearch disana, cari tutorial awal susah :( bisa bantu kk :)
  2. Mantap.. deh kang
  3. kira kira buat sosial media yang lain bisa gak ya :D
    1. saya lagi coba2 kang.. untuk twitter sama gplus.. API-nya berubah, jadi pemanggilan JSON nya berbeda
  4. gagal pertamax :(
    1. ngomong'' itu kode nya pasang dimana ?
  5. gak ada tombol like fb'na kang di blog abdi mah .. naha nya !! hehe ..
    1. naha atuh :D padahalmah lumayan kang peran jejaring sosial teh
  6. Menarik nih Kang menurut saya mohon ijin bungkus
    Buat di blog saya biar terlihat lebih lengkap terima kasih :d
    1. silahkan kang..
  7. Pami tombol like na di lebetkeu kana konter tiasa teu Kang :)
    Punten sanes konter pulsa nyak :)
    1. tiasa kang.. mangga acak2 we
  8. ke sembilan belax .. wkwkwkwk :D
    1. maksudnya apa nih ?
  9. Kang oot nih .. Saya menggunakan warna otomatis berbah pada .post-body untuk setiap postingan nah akang tahu gak dgn kode ini var letters = '0123456789ABCDEF'.split(''); saya ingin merubah dengan warna-warna tertentu saja , maklum kang masih ngaraba-raba JS'na
    1. untuk pertanyaan ini ku abdi di contoin dina kolom komentar kang !! mungkin ku akang ditingal hula gera
  10. Bagus sekali Kang Tampilannya ... Mungkin bisa untuk menampilkan Followers Twitter atau G+ Juga gak ya Kang?
    1. untuk twitter sama gplus harus menggunakan API
  11. Good job brother..
  12. sip , menyimak kang.
  13. mantep kang, akan saya coba dulu. thanks
  14. Pelajari dulu dehh,,ctrl + d ya kang ^_^
  15. mas, ane mau request nih.. gmna tuh buat post infonya ?? ada Penulis, tanggal dan komen..
    1. nanti diusahakan
  16. Terima Kasih kang atas ilmunya :) ' oh iya saya mau bertanya nih kang ' akang pakai aplikasi apa aja sih dalam membangun desain web seperti ini ? terus akang beli domainnya diweb mana yah ? " mohon bimbingannya " :)
    1. saya ga pinter desain sama aplikasi, cuma pake Photoshop sama Notepad ++
  17. mantaplah kang.
  18. makasih kang, ini yang saya tunggu-tunggu
  19. Nah misalkan bikin template seperti blog akang ini gimana ?

    pake CSS apa Jquery ?
    1. CSS plus jQuery
  20. Tos lami ningali konter sapertos kieu tapi sadayana manual, jadi siga nu ngabobodo heheheh...tah pami keiu mah kan up to date konterna. :D
    1. betul kang... seueur nu ngabobodo :)
  21. Tos lami t OL... aeh aya bu baru.. nyimak heula ah...
  22. mf kang, ini pertanyaan OOT

    tolong bantu saya kang, ini template blog saya entah kenapa banyak yang tidk berfungsi, seperti menu multitab, scorl to top, dan slide show,.. yang ada kemaren saya edit untuk memasang top menu NOTIFIKASI KOMENTAR dan SLIDE BOX REKOMENDASI dari kang Ismet...
    1. kemungkinan bentrok JS, atau coba posisi script di pindah2
  23. Mantap nih kang
  24. Saya nyimak saja kang, yag terpenting silturahminya yah kang, salam.
    1. Muhun kitu leres tah kitu ...
  25. Malam yang panjang malam yang asyk untuk berduaa'n bareng kompi plus kopi kang hehe
    1. pastinya :D
  26. pulang mamingan mampir dl disini :D
    saya mah gak punya fan page, jd nyimak aja heuheu....
    1. saya juga ikut2an aja :D
  27. ijin pasang kang ismet..=D
  28. tutorial yang ini kemarin sudah nyoba tapi langsung delet again, eh kang, saya request tutorial untuk membuat gallery photo preview di blogspot kang
    1. udah ada ko sob cek dimari http://blog.kangismet.net/2013/04/image-preview-dengan-jquery.html
  29. maaf o-o-t Kang kok dialog box saya tidak bisa di close?
    1. mungkin perintah eksekusinya salah
  30. makasih kang sharenya... jadi beda dah tampilanya g terlalu memakan ruang yang banyak.
  31. Tampilannya bagus juga, akan saya coba!

    Note: Kang lihat email, sudah transfer u/ pasang iklan!
    1. sudah saya pasang.. mohon maaf atas keterlambatan
  32. Trims kang!
    1. Beuh ieu nu ngalarisan .. hebat si akang lah
  33. kang ,request tutorial dp-thumbnail jquery kaya blog kang...
  34. Wah, Perlu belajar banyak ini kang tentang cara diatas, Maklum masih baru dengan hal yang beginian,, bisa dijadikan Refrensi mana tau nanti berguna..
  35. Kang Ismet emang paling jos... OOT nih. Tolong dongmas buat tutorial merubah background image secara otomatis sesaui dengan label seperti yang mas pakai di halam depan.... Terima kasih...
    Salut untuk kang Ismet
    1. gunakan tag konditional mas. silahkan baca postingan disini

      http://blog.kangismet.net/2012/10/tag-kondisional-dan-cara-penggunaannya.html
  36. ikut bergabung ..... :)
  37. waduh.. ni kang ismet orgnya tidak peli ilmu, dan rata" ilmu yg diberikan sangat bermanfaat bgi org" tertentu... :D :D
    eh maaf OOT kang gmna sih cara bkin THREADED COMMENTS seperti log akang ini?? thanks sebelumnya
    1. silahkan baca postingan disini

      http://blog.kangismet.net/2013/09/blogger-threaded-comments-hack-v3.html
  38. maaf kang OOT, cara membuat deleted-comment di Threaded Comment V.3 style 1 gimana ya kang, diartikel yang "Logika Tag Kondisional" binggung saya :(
  39. tuan rumahna sibuk pasti ke nongol postingan baru gera....
  40. Kang, udah ada update Pagerank desember ini, blog kang ismet dapat PR 4 :D selamat kang
  41. Kang cara buat artikel terkait kaya blog kang ismet gi mana kang
    pencerahanya kang newbie berat nih
    1. Pagerank sudah update lagi ya?
  42. [ASK]
    Bole Tanya Ga?
    Blog Saya 15 hari Lalu di hack Oleh Orang Russia,dan tampilannya di Ganti Jadi Deface Mode
    Tapi Sekarang udah Kembali Normal Blognya ( http://alvin-crew.blogspot.com )
    Yang Jadi Masalahnya neh, Blog Saya ketika telah berhasil di Recovery yang Sebelumnya Visitor per hari Berkisar antara 1000~2500 tapi setelah di hack malah gak ke indeks Google!!!
    Gimana Tuh Gan? o.O
    Mohon di Bantu Donk.
    Terimakasih
  43. Mantap kang .. rek nyoba heula aah..
  44. Keren greget bangget ama templatenya kang ismeet
  45. mantap kang, boleh nih nanti dicoba
  46. tutornya di sini keren-keren mas..lanjutkan. :)
  47. wah selamat nya kang PRna Update jadi 4,.......
  48. wah keren kang, nanti nyoba lah
  49. hahaha Mantap lah,, lumayan buat nambah ilmu ^_^
  50. Kang, mau tanya dong soal Syntax Hig apa tau .

    Nah, saya kan menaruh tag pre di postingan dan itu berhasil ..
    tapi pas saya coba naro tag pre di komentar contoh :

    Aseeemm
    terus pas udah di posting (publikasikan komentar) eh malah backgroundnya melewati batas kotak komentar, saya kepengennya tidak melewati batas komentarnya . (Jadi sama seperti komentar sebelumnya) tidak melewati batas kotak komentar . itu gimana ya kang? :/
    1. <script type='text/javascript'>
      $('i[rel="pre"]').replaceWith(function() {
      return $('<pre><code>' + $(this).html() + '</code></pre>');
      });
      </script>


      simpan kode ini dibagian </body>

      kayak guru aja saya heheheh...
  51. mantap banget nih kang,...
  52. Taruh ini dimana ya kang ?
    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);
    });
    1. <script type='text/javascript'>
      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);
      });
      </script>


      taruh kode ini pas dibagian
      </body>

      tukar nama kangismet.net dengan fans page anda.
  53. tengkyu bro!!
  54. ini sang mastah kemana ya, kok menghilang...
  55. info untuk Cara Meningkatkan IQ gan , baca aja di http://www.herbalarjawinangun.com/2013/11/cara-meningkatkan-iq-yang-patut-anda.html :)
  56. nuju kamana yeuh Kang Ismet, diantos update na :D
  57. makasi infonya gan ..
    mau dapet dollar tanpa modal ?
    visit ni http://kumpulaan-ptc.blogspot.com/2013/12/cara-mendapatkan-dollar-tanpa-modal-di.html
  58. Kang mau nanya nih,,
    gimana sih caranya klo mau ngerubah warna background gambar postingan di homepage dan berbeda-beda warnanya??? contohnya kyak blog akang ini... lg butuh nih kang tutorialnya... jika berkenan mohon bantuannya...
    1. pakai nth-child bukan kang?
  59. mantep kang,, ijin pasang :)
  60. Not work -_- , why ??
  61. kang saya mau tanya bisa nggk bikin 'post view:..." atau jumlah views per posting di blogspot ???
    klo di wordpress itu pke PHP yah ??? :D ,,
  62. di blog saya kok gak berhasil kang? Bantuannya dong
  63. bantu ane gan...
    ane udah simpen kode ini di atas kode < /body >

    tapi ttp ga muncul,itu knp ya?? tolong kasih solusinya :)
  64. Themplatee keren yo ki mas
    ngiler pengen tapi ga iso nggawene
  65. jquerynya taro di mana???
  66. kang yang G+ dan Twitter gimana ya kang, ane sampai sekarang belum ketemu juga caranya..
    1. coba pake api yang ini kang, jarang berubah sepertinya http://urls.api.twitter.com/1/urls/count.json?url=http://blog.kangismet.net
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.