43

Facebook like box Blogger widget

Hai teman-teman, jumpa lagi dengan saya ( kok formal sekali sih ). Baiklah cukup sekarang bercandanya, karena saya akan ajarkan cara memasang facebook like box di Blogger dengan mudah.Widget ini sangat wajib lo untuk membuat blog anda dikenal social media ( fakta : ratusan traffic dari blog ini berasal dari Facebook ). Jadi tunggu apa lagi ?
Sebenarnya ada 2 cara, yaitu cara manual dan cara langsung

Cara manual :
Buka blogger > Layout / tata letak > Pasang widget HTML/Javascript
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fidbloggertrick&amp;width&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;header=true&amp;stream=false&amp;show_border=false&amp;appId=579594688731789" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:290px;" allowTransparency="true"></iframe>
Ganti idbloggertrick atau kode yang bewarna biru dengan laman facebook page anda
Jika misalnya facebook page anda seperti ini
facebook.com/pages/halamananda
Maka solusinya yang tergampang adalah  ganti / dengan %2F
Atau pingin halaman facebook page anda lebih singkat url nya seperti saya (facebook.com/idbloggertrick) gampang buka artikel : Merampingkan URL Facebook page mu
Jika anda punya AppID sendiri ganti 579594688731789 dengan app id anda sendiri

Cara langsung
Buka https://developers.facebook.com/docs/plugins/like-box-for-pages/ ( Otomatis dibuka di new tab  )
Setting Facebook like box di BloggerNah terus isi data-data secara lengkap
Dengan penjelasan :

1. Facebook Page url : Alamat facebook fan page blog mu
2. Width                    : Lebar facebook like box ( satuan px / pixel )
3. Height                   : Tinggi facebook like box  ( satuan px / pixel )
4. Centang Show Friend face jika anda ingin menampilkan muka orang yang like Facebook Fan Pagemu biasanya gambarnya diawali dari gambar teman anda jika teman anda juga like facebook fan page mu
5. Lalu hilangkan centang Show post untuk mendisable post terbaru dari facebook fan pagemu jika menganggu ( percaylah lebih baik hilangkan centang, tapi jika anda ingin menampilkannya centanglah tapi ini diluar tanggung jawab saya )
6. Show header buat memunculkan kata Find us on Facebook dan Show border untuk menampilkan border
Saran saya centang yang header tapi yang border tidak karena border kadang menganggu tampilan.

Setelah itu tekan Get Code
Akan muncul Popup
Like Box blogger setting

Perhatikan gambar diatas secara baik-baik
Terdapat 2 kata yang saya tebalkan dengan warna kuning yaitu HTML 5 dan IFRAME
Untuk IFRAME
sebenarnya hasilnya sama dengan cara manual tetapi cuma gak usah diganti urlnya sehingga bikin gak repot kan,  hahahha :) canda .

Tapi menggunakan IFRAME sangat tidak SEO FRIENDLY . Karena google tidak dapat mengindex ifame sama seperti gambar ( Google hanya mengerti gambar melalui tiga aspek, yaitu nama gambar title tag dan alt tag nya dan juga caption sebagai pelengkap )

Sekarang untuk yang HTML 5
Untuk menggunakan HTML 5 pertama tama anda copy dulu kode javascriptnya yang ada tulisan fb-root atau kode pertama ke atau diatas </body>
Lalu langkah kedua copy kode seperti dibawah berikut
<div class="fb-like-box" kode nya yang anda dapatkan seperti gambar diatas</div>  lalu buka Blogger > Layout/ Tata letak > Gadget > HTML / Javascript lalu paste kode tersebut

Bingung ? Bagaimana kalau pake kode saya

Pasang kode dibawah ini diatas </body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=579594688731789";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
ganti 579594688731789 dengan App ID anda jika anda memilikinya.

Lalu buka blogger > Tata letak / Layout > Gadget > HTML/ Javascript
Masukkan kode berikut
<div class="fb-like-box" data-href="https://www.facebook.com/idbloggertrick" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="false"></div>
Ganti facebook.com/idbloggertrick dengan url facebook page anda sendiri.

Sudah cukup kan ? Kurang lengkap hehehe ? :) silahkan tanya di melalui komentar

Posting Komentar Blogger

  1. template yang ente pakai inikan template buatan mas sugeng, kok link credit nya di delete ya ..
    apa nggak marah mas sugeng nya..

    BalasHapus
  2. Iya ya, lincese nya gak boleh didelete ya, trims telah mengingatkan :)

    BalasHapus
  3. ditunggu gan follback blognya :)

    diakuin.blogspot.com

    BalasHapus
    Balasan
    1. sudah tapi follow nya anoymous ya :) , kontennya ada dewasa, masak anak remaja follow :( jadi anoymous oke :) !

      Hapus
  4. udah di follow niyh blognya . . . .follback yaa . . .

    BalasHapus
  5. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  6. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  7. Thx infonya awalnya lancar. Masalah timbul setelah masuk ke Tata letak / Layout > Gadget > HTML/ Javascript - Masukkan kode. Koq gak bisa di save ya. Awalnya saya pikir itu template hasil downloadan tapi setelah saya ganti template standar tapi masalahnya sama saja. Mohon pencerahannya dan mohon untuk dapat meluangkan waktu utk mampir ke tempat saya http://resep-masakan-lezat-praktis.blogspot.com/

    BalasHapus
  8. keren juga, ijin nyoba ya, semoga bisa :d

    BalasHapus
  9. Info agan cukup bermanfaat
    kunjungi blog ane jg gan
    http://cybeertooth.blogspot.com/

    BalasHapus
  10. terima kasih sudah berbagi. sangat bermanfaat

    BalasHapus
  11. nice,, kunjungi saya juga y?.. :D
    www.anypost.tk

    BalasHapus
  12. sangat bermanfaat gan kunjung balik ya http://alungbejoselawase.blogspat.com

    BalasHapus
  13. kunjung di mari juga gan http://deancooel.blogspot.com/

    BalasHapus
  14. please info...body tag tuh yg mana ya...?masih awam banget nih...makasih :)

    BalasHapus
  15. Tv online www.danoebojes.com

    BalasHapus
  16. Tv online www.danoebojes.com

    BalasHapus
  17. Kunjungan pertamax
    mantap kang info nya.

    BalasHapus
  18. Ada yang salah kang, ketika kode yang akan diletakkan diatas kode /body terdapat kesalahan. Kesalahannya yaitu, didepan kode appID tidak ada simbol ; . Kita harus menambahkannya sesudah kode appID tersebut. Untuk lengkapnya, buka >>

    http://asli-tutorial.blogspot.com/2014/03/membuat-fanspage-dan-memasang-like-box.html

    saya tlh mengoreksinya. mungkin dapat anda jadikan referensi?
    BTW, saya mau tukeran link..blh gk ya?

    BalasHapus
  19. wow keren,,, makasih,,, sangat membantu,, :).... (h)

    BalasHapus
  20. kok di tempetku tetep gak bisa muncul kenafaa yaaaaaa. dulu pernah saya pasang trus saya remove. nah mau pasang lagi kok gak bisa yaaaaa pusiaang deh

    BalasHapus
  21. yang di copy ke layout, kode yang atas atau yang bawah ya?

    BalasHapus
  22. masuikin ke javanya ga jadi nyimpan gan

    BalasHapus
  23. GEBEAR HARGA PROMO TERPERCAYA DI DINA SHOP
    Barang yang Kami Tawarkan Semuanya Barang ASLI ORGINAL Ada Garansi Resmi Distributor dan Garansi TAM 2 bebas resiko bebas penipuan.Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
    BERMINAT HUB-SMS:085-77966-5033 ATAU KLIK WEBSET RESMI KAMI http://dina-shop7.blogspot.com/.

    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 Note 10.1.Rp.2,500.000.
    Ready Stock!
    Samsung Galaxy Tab 2 (7.0).Rp. 1.000.000
    Ready Stock!
    Samsung Galaxy S III Mini.Rp.1.800.000.
    Ready Stock!
    Samsung Galaxy Nexus I9250 - Titanium Si.Rp.1.500.000,-
    Ready Stock!
    Samsung Galaxy Note N7100.Rp.2.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-whiteRp. 900.000,-
    Ready Stock!
    Nokia C2-06 Touch & Type -Dual GSM-Rp.450.000,-
    Ready Stock!
    Nokia Lumia 710 - Black.Rp. 900.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 4755G Core i5 2430 Linux Blue.Rp 1.700.000.
    Ready Stock!
    Acer Aspire One AOD270 10.1.-Rp. 1.000.000,-
    Ready Stock!
    Acer TravelMate TM8481-2462G32.Rp. 1.400.000
    Ready Stock!
    Acer ICONIA Tab W500 10.1" Tablets Notebook.Rp. 1.100.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

    BalasHapus
  24. terima kasih ririn artikelnya sangat informatif,,,,,sebagian trik jg sudah saya pakai di http://hanahamimah.blogspot.com/

    BalasHapus
  25. bs dicoba oleh http://irwansulis.blogspot.com

    BalasHapus
  26. Makasih info nya sob, lgs dipraktekin ah ! :)
    follback blog ane ya,

    lirikmagz.blogspot.com
    discount-here.blogspot.com
    belajarbahasainggrisoffline.blogspot.com

    BalasHapus
  27. google sekarang sudah mengindeks iframe gan.. :D

    BalasHapus
  28. bagus infonya. bagi yang sedang mencari web hosting silahkan berkunjung
    kesini www.pesanhosting.com harganya murah cocok untuk pemula maupun
    corporate

    BalasHapus
  29. wah nice info gan..
    http://freebiexp.blogspot.com/2013/11/cara-mengatasi-notifikasi-fake-serial-number-idm-6.18-build-7.html

    BalasHapus
  30. nice ;)
    http://mastahsoftware.blogspot.com/
    Ditunggu follownya

    BalasHapus
  31. nice share gan, ini yang lagi ane cari hehehe

    http://priandadipatibangsa.blogspot.com/

    BalasHapus
  32. Hey teman teman.. maaf numpang.. jika kawan2 dlm kesulitan masalah uang atau sulit mendapat angka jitu untuk tembus angka togel.. jngan khawatir lg langsung sj klik www.prediksitogelsgp4d.blogspot.com

    ATAU KLIK
    https://www.facebook.com/pages/Ramalan-Angka-Kemenangan-4d-3d-2d/332297516941191

    Atau langsung hubungi RUWUH
    082 347 737 757 dijamin 100% positif TEMBUS karNa sy sendiri sdh 7x berturut turut menang angka togel hasil pemberian MBAH RUWUH INI. terimakasih.




    BAGI SAUDARA YG BUTUH TOGEL 2D 3D 4D TUNGGAL AHLINYA ADA PADA MBAH RUWUH,MAU BERGABUNG SILAHKAN HUBUNGI MBAH RUWUH DI 082 347 737 757 DI JAMIN TEMBUS 100% http://prediksitogelsgp4d.blogspot.com




    INGIN MERUBAH NASIB ANDA DENGAN CARA MAIN TOGEL ASALKAN YAKIN DAN PERCAYA DENGAN ANGKA YANG KAMI MAKSUD INSYAH ALLAH PASTI ANDA JAUH DARI HUTANG .MENGAPA KAMI MANGATAKAN DEMIKIAN.ANGKA BUAT PASANG TOGEL YANG DI BERIKAN NANTINYA SUDAH MASUK ANGKA GHAIB , JINN YANG KAMI PERINTAH SEBELUM MENDAPAT ANGKA BOCORAN TOGEL SGP / HKG.MAKA DARI ITU JANGAN REMEHKAN ….SEBELUM BERGABUNG ANDA PIKIR BAIK=BAIK KARNA SAMASEKALI TIDAK ADA PAKSAAN ATAU RAYUAN…!!! JIKA BUTUH ANGKA GHOIB-RITUAL. 2D_3D_4D_UNTUK TOGEL SGP-HKG.DI JAMIN JEBOL SELAMA CUMA 3 LUBANG HBG : 082347737757 ATAU KUNJUNGI www.prediksitogelsgp4d.blogspot.com






    BalasHapus
  33. cocok sekali gan ada yang bisa bantu ga?
    http://www.markaspoker.club
    http://punyapoker.blogspot.com

    BalasHapus

 
Top