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/

124 komentar

Amankan dulu posisi disini ^_^ setelah itu baru komentar ya :)

Balas

oh.. yang ini nih. kalau saya pasang pas di sliding rekomendasi kang :)

Balas

monggo silahkan dipasang jeng... CSSnya disesuaikan aja

Balas

Wah cepet juga si mbak. Iraha nya abdi menang pertamax? :D

Balas

hihihi takut ketelatan sama mas adhy sih..

oh jadi untuk kode pemanggilnya bisa dipasang pada add/gadget ya? keren juga kang. lihat2 dulu mau dipasang dibagian mana? lebarnya auto ya kang atau 300px?

Balas

bebas sih.. nantinya tinggal atur font-size

Balas

kira kira buat sosial media yang lain bisa gak ya :D

Balas

saya lagi coba2 kang.. untuk twitter sama gplus.. API-nya berubah, jadi pemanggilan JSON nya berbeda

Balas

ngomong'' itu kode nya pasang dimana ?

Balas

kalau javascript pastinya di atas </body> atau di atas </head>, kalau htmlnya bisa di postingan, widget, menu dll

Balas

gak ada tombol like fb'na kang di blog abdi mah .. naha nya !! hehe ..

Balas

naha atuh :D padahalmah lumayan kang peran jejaring sosial teh

Balas

muhun nyaeta ... kang kayakna kalau gambar fb'na dibikin buat lokasi tombol likena mantap tah

Balas

sok we acak2 kang.. da teu dishare CSS na mah :)

Balas

oke lah kalau begitu mah hehe ... tapi ngopi hula ahh

Balas

Menarik nih Kang menurut saya mohon ijin bungkus
Buat di blog saya biar terlihat lebih lengkap terima kasih :d

Balas

Pami tombol like na di lebetkeu kana konter tiasa teu Kang :)
Punten sanes konter pulsa nyak :)

Balas

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

Balas

Bagus sekali Kang Tampilannya ... Mungkin bisa untuk menampilkan Followers Twitter atau G+ Juga gak ya Kang?

Balas

mantep kang, akan saya coba dulu. thanks

Balas

Pelajari dulu dehh,,ctrl + d ya kang ^_^

Balas

untuk pertanyaan ini ku abdi di contoin dina kolom komentar kang !! mungkin ku akang ditingal hula gera

Balas

mas, ane mau request nih.. gmna tuh buat post infonya ?? ada Penulis, tanggal dan komen..

Balas

itu untuk variable warna yang diacak kang, bisa ratusan, biasana dibatasi ku * jumlah, abdi ge lieur keneh :) cobi ganti JS dengan warna tertentu, gentos kode2 warna na kang

function get_random_color() {
var letters = ["556270","00adf3","0e94ec","81d8d0","fa023c","a66c9d","ffcc00"];
var color = '#';
color += letters[Math.round(1 +Math.random() * 7)];
return color;
}

$(".post").each(function() {
$(this).css('background-color', get_random_color());
});

Balas

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 " :)

Balas

tiasa kang.. mangga acak2 we

Balas

untuk twitter sama gplus harus menggunakan API

Balas

saya ga pinter desain sama aplikasi, cuma pake Photoshop sama Notepad ++

Balas

makasih kang, ini yang saya tunggu-tunggu

Balas

Nah misalkan bikin template seperti blog akang ini gimana ?

pake CSS apa Jquery ?

Balas

Tos lami ningali konter sapertos kieu tapi sadayana manual, jadi siga nu ngabobodo heheheh...tah pami keiu mah kan up to date konterna. :D

Balas

Tos lami t OL... aeh aya bu baru.. nyimak heula ah...

Balas

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

Balas

Saya nyimak saja kang, yag terpenting silturahminya yah kang, salam.

Balas

Tapi teu ngefect'y kang .. leng we lieur abi teh

Balas

Malam yang panjang malam yang asyk untuk berduaa'n bareng kompi plus kopi kang hehe

Balas

pulang mamingan mampir dl disini :D
saya mah gak punya fan page, jd nyimak aja heuheu....

Balas

ijin pasang kang ismet..=D

Balas

saya juga ikut2an aja :D

Balas

Muhun kitu leres tah kitu ...

Balas

Plus kopi kang satu lagi hehe

Balas

tutorial yang ini kemarin sudah nyoba tapi langsung delet again, eh kang, saya request tutorial untuk membuat gallery photo preview di blogspot kang

Balas

maaf o-o-t Kang kok dialog box saya tidak bisa di close?

Balas

makasih kang sharenya... jadi beda dah tampilanya g terlalu memakan ruang yang banyak.

Balas

Tampilannya bagus juga, akan saya coba!

Note: Kang lihat email, sudah transfer u/ pasang iklan!

Balas

sudah saya pasang.. mohon maaf atas keterlambatan

Balas

udah ada ko sob cek dimari http://blog.kangismet.net/2013/04/image-preview-dengan-jquery.html

Balas

betul kang... seueur nu ngabobodo :)

Balas

kemungkinan bentrok JS, atau coba posisi script di pindah2

Balas

mungkin perintah eksekusinya salah

Balas

Beuh ieu nu ngalarisan .. hebat si akang lah

Balas

Wah ada iklan baru nih... Langsung ke TKP :)

Balas

ikutan bikin aahh....... :D

Balas

kang ,request tutorial dp-thumbnail jquery kaya blog kang...

Balas

ok, thanks kang, biar saya pelajari dulu

Balas

Wah, Perlu belajar banyak ini kang tentang cara diatas, Maklum masih baru dengan hal yang beginian,, bisa dijadikan Refrensi mana tau nanti berguna..

Balas

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

Balas

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 :)

Balas

kalau domain dot net itu beli dimana yah kang ? bayarnya berapa perbulan atau pertahun ?

Balas

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

Balas

maaf kang OOT, cara membuat deleted-comment di Threaded Comment V.3 style 1 gimana ya kang, diartikel yang "Logika Tag Kondisional" binggung saya :(

Balas

tuan rumahna sibuk pasti ke nongol postingan baru gera....

Balas

ngaleu'eut heula oskadon geura kang rully meh raoseun .. teu leng-lengan teuing :D hehe

Balas

saya mau coba dulu buat mempraktekannya .. :')

Balas

Kang, udah ada update Pagerank desember ini, blog kang ismet dapat PR 4 :D selamat kang

Balas

Kang cara buat artikel terkait kaya blog kang ismet gi mana kang
pencerahanya kang newbie berat nih

Balas

Pagerank sudah update lagi ya?

Balas

[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

Balas

Mantap kang .. rek nyoba heula aah..

Balas

Keren greget bangget ama templatenya kang ismeet

Balas

mantap kang, boleh nih nanti dicoba

Balas

tutornya di sini keren-keren mas..lanjutkan. :)

Balas

wah selamat nya kang PRna Update jadi 4,.......

Balas

wah keren kang, nanti nyoba lah

Balas

hahaha Mantap lah,, lumayan buat nambah ilmu ^_^

Balas

kang ismet kok menghilang? kayaknya lagi bertapa tuh hehehe :)

Balas

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? :/

Balas

mantap banget nih kang,...

Balas

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);
});

Balas

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

Balas

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

Balas

silahkan baca postingan disini

http://blog.kangismet.net/2013/09/blogger-threaded-comments-hack-v3.html

Balas

gunakan tag konditional mas. silahkan baca postingan disini

http://blog.kangismet.net/2012/10/tag-kondisional-dan-cara-penggunaannya.html

Balas

Saya pasang kode itu .. tetap saja backgroundnya melewati garis kotak komentar -__-

Balas

ini sang mastah kemana ya, kok menghilang...

Balas

info untuk Cara Meningkatkan IQ gan , baca aja di http://www.herbalarjawinangun.com/2013/11/cara-meningkatkan-iq-yang-patut-anda.html :)

Balas

nuju kamana yeuh Kang Ismet, diantos update na :D

Balas

makasi infonya gan ..
mau dapet dollar tanpa modal ?
visit ni http://kumpulaan-ptc.blogspot.com/2013/12/cara-mendapatkan-dollar-tanpa-modal-di.html

Balas

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

Balas

mantep kang,, ijin pasang :)

Balas

pakai nth-child bukan kang?

Balas

kang saya mau tanya bisa nggk bikin 'post view:..." atau jumlah views per posting di blogspot ???
klo di wordpress itu pke PHP yah ??? :D ,,

Balas

di blog saya kok gak berhasil kang? Bantuannya dong

Balas

bantu ane gan...
ane udah simpen kode ini di atas kode < /body >

tapi ttp ga muncul,itu knp ya?? tolong kasih solusinya :)

Balas

masih gak muncul, apa aada yng salah =( pcfreesoftwarez.blogspot.com

Balas

Themplatee keren yo ki mas
ngiler pengen tapi ga iso nggawene

Balas

coba di jQuerynya periksa lagi

Balas

TOKO HANDPHONE TERBESAR TERLENGKAP TERMURAH DAN TERPERCAYA DI MITA OLSHOP ELEKTRONIKA
Produk dijamin asli orginal.Dapatkan harga promo di Mita olshop elektronika : Barang yang Kami Tawarkan Semuanya Barang ASLI ORGINAL dan bergaransi Resmi Distributor/TAM.
Semua Produk Kami Baru/Msh Tersegel dLm BOX_nya.
BERMINAT HUB-SMS 0816-590-523 ATAU KLIK WEBSITE RESMI KAMI www.mita-
olshop.blogspot.com

DI JUAL DENGAN HARGA PROMO ;

BLACKBERRY;
Blackberry Porsche Rp 4.000.000

Blackberry Blade Rp 3.500.000

Blackberry Q-10 Rp 3.000.000

Blackberry Z-10 Rp 2.800.000

Blackberry Q-5 Rp 2.300.000

Blackberry 10 Dev Alpha Rp 2.700.000

Blackberry 9900/Dakota Rp 2.000.000

Blackberry 9800/Torch2 Rp 1.700.000

Blackberry 9790/Onyx3 Rp 1.900.000

Blackberry 9780/Onyx2 Rp 1.300.000

Blackberry 9700/Onyx1 Rp 1.000.000

Blackberry 8520/Gemini Rp 700.000

Blackberry 9300/Gemini 3G Rp 1.000.000

Blackberry 9320/Amstrong Rp 1.200.000

Blackberry 9220/Davis Rp 900.000

Blacberry 9380/Orlando Rp 2.000.000

Blackberry 9360/Apollo Rp 1.400.000

SAMSUNG;
Samsung Galaxy S4 Rp 3.700.000

Samsung Galaxy S3 Rp 3.200.000

Samsung Galaxy S2 Rp 1.500.000

Samsung Galaxy Note 2 Rp 2.800.000

Samsung Galaxy Note Rp 2.000.000

Samsung Galaxy Tab 10 Rp 3.000.000

Samsung Galaxy Tab 7 Rp 2.200.000

Samsung NP300 Rp 4.000.000


IPHONE;
iPhone 5G 32Gb Rp 3.500.000

iPhone 5G 16Gb Rp 3.200.000

iPhone 4G 32Gb Rp 3.000.000

iPhone 4s 16Gb Rp 2.600.000

iPhone 3G 32Gb Rp 2.200.000

iPhone 3G 16Gb Rp 2.000.000

iPad 3 4G 64Gb Rp 3.000.000

NOKIA;
Nokia Lumia 920 Rp 6.350.000

Nokia Lumia 820 Rp 4.900.000

Nokia Lumia 720 Rp 3.500.000

Nokia Lumia 620 Rp 2.850.000

Nokia Lumia 520 Rp 1.900.000

Nokia Lumia 510 Rp 1.550.000

Nokia Lumia 900 Rp 4.200.000

Nokia Lumia 610 Rp 1.800.000

Nokia Lumia 710 Rp 2.400.000

Nokia Lumia 800 Rp 3.300.000

Nokia Asha 303 Rp 1.300.000


NIKON;
Nikon D3X Rp 17.200.000

Nikon D5100 Rp 3.350.000

Nikon D5000 Rp 3.000.000

Nikon D7000 kit 18-105mm Rp 5.000.000

Nikon D90 kit 18-105mm vr Rp 2.500.000

Nikon cooplix P500 BLACK Rp 1,300.000

Nikon D3100 kit non vr Rp 2.000.000

Nikon cooplix P7100 black Rp 1.500.000

Nikon cooplix L26 Red Rp 1.000.000

Nikon AF-S400mm F/2 8G ED vr ll Rp 1.300.000

CANON;
Canon Eos 1D MK II Rp 17.700.000

Canon Eos 600D Rp 3.500.000

Canon Eos 7D Kit II + Lensa Rp 8.000.000

Canon Eos 650D kit Rp 3.700.000 Acer Aspire One 725 Rp 2.700.000

ACER ASPIRE;
Acer Aspire E1-471G-32322G50Mn Rp 4.500.000

Acer Aspire V5-171-32364G50Ass Rp 3.500.000

Acer Aspire V3-571G-73614 G1T 15.6 Rp 2.000.000

SONY;
Sony Vaio SVE14-128Cv Rp 8.000.000

Sony Vaio SVE14-125CV Rp 4.200.000

TOSHIBA
Toshiba Portege NB510 DOS Rp 2.900.000

MITA SHOP ELEKTRONIKA
mita-olshop.blogspot.com

Balas

EMC SHOP Berbagi Menjelang Bulan Suci Ramadhan Dan Ramadhan.Kami Menawarkan Berbagai Jenis Type HP,Laptop,Camera,dll,Garansi Resmi Distributor dan Garansi TAM.Dengan Harga Relatif Murah Super Promo
Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
BERMINAT HUB-SMS:0856-4829-7690 ATAU KLIK WEBSITE RESMI KAMI http://www.emc-shop.blogspot.com/
BlackBerry>Samsung>Nokia>smartfrend>Apple>Acer>Dell>Nikon>canon>DLL

Dijual /Super Promo.;

Ready Stock !
BlackBerry 9380 Orlando - Black
Rp.900.000,-

Ready Stock !
BlackBerry Curve 8520 Gemini
Rp.500.000,-

Ready Stock !
BlackBerry Bold 9780 Onyx 2
Rp.800.000,-

Ready Stock !
Blackberry Curve 9320
Rp.700.000,-

Ready Stock !
Samsung Galaxy Tab 2 (7.0)
Rp. 1.000.000

Ready Stock !
Samsung Galaxy Nexus I9250 - Titanium Si
Rp.1.500.000,-

Ready Stock !
Samsung Galaxy Note N7000 - Pink
Rp.1.700.000

Ready Stock !
Samsung Galaxy Y S5360 GSM - Pure White
Rp.500.000,-

Ready Stock !
Nokia Lumia 800 - Matt Black
Rp.1.700.000,-

Ready Stock !
Nokia Lumia-710-white
Rp. 900.000,-

Ready Stock !
Nokia C2-06 Touch & Type - Dual GSM
Rp.450.000,-

Ready Stock !
Nokia Lumia 710 - Black
Rp. 900.000,-

Smartfren Andromax Z
Rp.1,000.000,-

Smartfren Andromax U Limited Edition
Rp.800.000,-

Tablet Asus Eee Pad Slider SL 1O1
Rp.2.000.000,-

Tablet Asus Memo Pad ME172 V
RP.500.000,-

Lenovo ldea Pad B490
Rp.1.500.000,-

Lenovo think Pad edge A86
RP.1.000.000,-

Ready Stock !
Apple iPhone 4S 16GB (dari XL) - Black
Rp.1.200.000,-

Ready Stock !
Apple iPhone 4S 16GB (dari Telkomsel)
Rp.1.200.000,-

Ready Stock !
Apple iPod Touch 4 Gen 8GB
Rp.700.000

Ready Stock !
APPLE iPod Nano 8GB - Pink
Rp.500.000,-

Ready Stock !
Acer Aspire 4752-2332G50Mn Core i3 Win7 Home
Rp 1.300.000

Ready Stock !
Acer Aspire S3-951-2364G34iss
Rp. 1.200.000,-

Ready Stock !
Acer Aspire 5951G Core i7 2630 Win 7
Rp. 2.500.000,-

Ready Stock !
Acer Aspire 4755G Core i5 2430 Win 7 Home Premium Green
Rp. 2.500.000,-

Ready Stock !
Nikon D7000 kit 18-105mm
Rp.1.700.000

Ready Stock !
Nikon D90 Kit 18-105mm Vr
Rp 1.300.000

Ready Stock !
Nikon Coolpix L 120 Red
Rp. 900.000

Ready Stock !
Nikon Coolpix P 500 Black
Rp 1.000.000

EMCSHOP
emc-shop.blogspot.com

Balas

Kang Mau Nanya Kodenya Di Taruh Di Mana
Jawabnya Ke Email Saya Aja Soalnya Jarang Ol : sahrulsidik000@gmail.com

Balas

kang yang G+ dan Twitter gimana ya kang, ane sampai sekarang belum ketemu juga caranya..

Balas

coba pake api yang ini kang, jarang berubah sepertinya http://urls.api.twitter.com/1/urls/count.json?url=http://blog.kangismet.net

Balas

mau tanya donk...
Kalo mengganti angka ribuan jadi K, dan jutaan jadi M, gmana caranya?
contoh: 1.000 = 1K

Balas

Poskan Komentar


×
Chat