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 embel2 jQuery, otomatis template sobat harus terdapat jQuery library seperti ini.
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):
Untuk menampilkannya, simpan kode HTML ini dimana sobat suka
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/
123 komentar
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
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
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. 9…
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;
S…
ngiler pengen tapi ga iso nggawene
ane udah simpen kode ini di atas kode < /body >
tapi ttp ga muncul,itu knp ya?? tolong kasih solusinya :)
klo di wordpress itu pke PHP yah ??? :D ,,
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...
mau dapet dollar tanpa modal ?
visit ni http://kumpulaan-ptc.blogspot.com/2013/12/cara-mendapatkan-dollar-tanpa-modal-di.html
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);
});
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.
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? :/
$('i[rel="pre"]').replaceWith(function() {
return $('<pre><code>' + $(this).html() + '</code></pre>');
});
</script>
simpan kode ini dibagian </body>
kayak guru aja saya heheheh...
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
pencerahanya kang newbie berat nih
eh maaf OOT kang gmna sih cara bkin THREADED COMMENTS seperti log akang ini?? thanks sebelumnya
http://blog.kangismet.net/2013/09/blogger-threaded-comments-hack-v3.html
Salut untuk kang Ismet
http://blog.kangismet.net/2012/10/tag-kondisional-dan-cara-penggunaannya.html
Note: Kang lihat email, sudah transfer u/ pasang iklan!
saya mah gak punya fan page, jd nyimak aja heuheu....
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...
pake CSS apa Jquery ?
Punten sanes konter pulsa nyak :)
Buat di blog saya biar terlihat lebih lengkap terima kasih :d
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 :)