Cara Membuat Komentar Facebook dan Blog Berdampingan

Cara Membuat Komentar Facebook dan Blog Berdampingan – Kolom komentar merupakan media yang paling penting untuk memberikan kesempatan pengunjung untuk menulis pendapat tentang artikel yang dibacanya. Jika komentar didalam blog dibuat dengan gaya yang berbeda pasti lebih menarik, apa lagi ditambah Social Media lain untuk platform komentar di blog.

Cara Membuat Komentar Facebook dan Blog Berdampingan

Tutorial ini Membuat komentar Facebook berdampingan dengan komentar Facebook dengan gaya Tab yang keren dan menarik. Kita lihat dulu contoh kolom komentar dengan tab, jadi contohnya seperti ini ;

Keren bukan?, jika anda berminat untuk membuatnya silahkan simak tutorial dibawah ini ;

1. Login ke Blogger anda
2. Masuk ke menu Template > EditHTML
3. Cari kode <div class=’comments’ id=’comments’>
4. Letakan kode ini dibawah <div class=’comments’ id=’comments’>

<div class=’comments-tab’ id=’fb-comments’ onclick=’javascript:commentToggle(“#fb-comments”);’ title=’Comments made with Facebook’>
<img class=’comments-tab-icon’ src=’http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png’/><fb:comments-count expr:href=’data:post.url’/> Comments</div>
<div class=’comments-tab inactive-select-tab’ id=’blogger-comments’ onclick=’javascript:commentToggle(“#blogger-comments”);’ title=’Comments from Blogger’>
<img class=’comments-tab-icon’ src=’http://www.blogger.com/img/icon_logo32.gif’/> <data:post.numComments/> Comments</div>
<div class=’clear’/>
</div>
<div class=’comments-page’ id=’fb-comments-page’>
<b:if cond=’data:blog.pageType == “item”‘><div id=’fb-root’/>
<fb:comments expr:href=’data:post.url’ num_posts=’2′ width=’550‘/></b:if></div>
<div class=’comments comments-page’ id=’blogger-comments-page’>

<script src=’http://connect.facebook.net/en_US/all.js#xfbml=1’/><script src=’http://code.jquery.com/jquery-latest.js’/><meta content=’IDFANPAGEFACEBOOK’ property=’fb:admins’/><script type=’text/javascript’>function commentToggle(selectTab) {$(“.comments-tab”).addClass(“inactive-select-tab”);$(selectTab).removeClass(“inactive-select-tab”);$(“.comments-page”).hide();$(selectTab + “-page”).show();}</script>

<style>.comments-page { background-color: #f2f2f2;}#blogger-comments-page { padding: 0px 5px; display: none;}.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}.comments-tab:hover { background-color: #eeeeee;}.inactive-select-tab { background-color: #d1d1d1;}</style>

Keterangan :

  • Jika anda memiliki Fans Page, ganti Warna merah dengan nomer ID Fans page anda. (ID Fans page bisa anda lihat di URL homepage fanspage anda, berupa digit angka
  • Ganti angka warna biru 500, sesuai dengan ukuran lebar kolom komentar di blog anda
  • Jika gagal, coba kembali cari kode <div class=’comments’ id=’comments’>, lalu pasang lagi

Selesai… Sangat mudah dan cepat. Demikian artikel tutorial membuat komentar Facebook berdampingan dengan komentar blog. Semoga bermanfaat dan selamat mencoba.

Guest Post Danforblog

55 thoughts to “Cara Membuat Komentar Facebook dan Blog Berdampingan”

  1. selamat malam Mas,,, saya dulu pernah mau mencobanya Mas untuk membuat berdampingan Komentar Facebook dengan Blog tapi niat saya urungkan karena khawatir blog akan semakin berat…

  2. @Maya : otomatis post juga akan tampil di dinding facebook mereka.. ๐Ÿ˜€

    @budi : sama-sama mas,

    @Elsa : Trafick dari facebook mending pakai Fanspage aja mbak, ๐Ÿ˜€

    @Hayrdin : sudah jelas mas, komentar facebook bisa menambah berat loading blog

    @Ilham : bisa menambah berat loading mas,

  3. sepertinya menarik ya mas kalau bisa pasang faceboook comment dengan blogger comment secara berdampingan, jadi bisa ada opsi pilihan untuk para komentator blog ๐Ÿ™‚

  4. @Yobert: silahkan di coba gan

    @Wahyu: iya mbak, harusnya tambah twitter biar makin Komplit.. ๐Ÿ˜€

  5. emang ada twitter comment? wkwkwkwk ๐Ÿ˜€
    tapi lumayan jadi agak berat mas loading nya kalau pasang facebook comment ini di blog

  6. tutorial yg bagus gan,,
    main-main ke blog saya gan
    _wikie20.blogspot_com/ jgn lupa like n follow ya,,:)

  7. @Aldi : Silahkan dicoba

    @Lek Miend : oke sama2 mas,

    @Wahyu : mungkin aja ada mbak.. :D, berat udah jelas.. karena widget Facebook pakai Frame..

    @Ebsan : oke, di tunggu gan

    @Wikie : oke nanti saya Follow.. ๐Ÿ˜€

  8. harapan nya jadi makin banyak yang bisa berkomentar di blog kita ya mas, misalnya pengunjung nggak punya kaun google, mereka bisa pakai akun fb untuk comment

  9. Saya dari kemaren mau pasang komentar blog dan fb yg berdampingan ini mas,tapi sllu gagal.ndak tau knp masalah nya.
    coba skg saya apply lg mas di blog saya.salam kenal mas.

  10. @Maulana : pasti nambah berat

    @Wahyu : betul mbak, hamir semua pengunjung blog pasti punya Facebook

    @Nehand : silahkan di coba gan, sudah ane test kok

  11. wah bisa dicoba nih mas utk menjaring visitor dari facebook juga tentunya ๐Ÿ˜€ makasih sdh berbagi n salam sukses ๐Ÿ™‚

  12. ALPHA SHOP.TOKO HANDPHONE ORIGINAL Tepercaya.Aman dan Murah Bebas Resiko.Nikmati Keuntungan Berbelanja Dengan Hrg Relatif Murah,Super Promo.Kami Menawarkan Berbagai Jenis Type HP,Laptop,Camera,dll,Garansi Resmi Distributor dan Garansi TAM …….
    Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
    BERMINAT HUB-SMS:0857-3112-5055 ATAU KLIK WEBSITE RESMI KAMI __alpha-shopelektronik.blogspot_com/
    BlackBerry>Samsung>Nokia>smartfrend>Apple>Acer>Dell>Nikon>canon>DLL

    Dijual

    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,700.000

    Smartfren Andromax U Limited Edition
    Rp.1.000.000

    Tablet Asus Eee Pad Slider SL 1O1
    Rp.2.500.000

    Tablet Asus Memo Pad ME172 V
    RP.800.000

    Lenovo ldea Pad B490
    Rp.2.500.000

    Lenovo think Pad edge A86
    RP.1.700.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

    ALPHA SHOP
    alpha-shopelektronik.blogspot_com

  13. ALPHA SHOP.TOKO HANDPHONE ORIGINAL Tepercaya.Aman dan Murah Bebas Resiko.Nikmati Keuntungan Berbelanja Dengan Hrg Relatif Murah,Super Promo.Kami Menawarkan Berbagai Jenis Type HP,Laptop,Camera,dll,Garansi Resmi Distributor dan Garansi TAM …….
    Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
    BERMINAT HUB-SMS:0857-3112-5055 ATAU KLIK WEBSITE RESMI KAMI __alpha-shopelektronik.blogspot_com/
    BlackBerry>Samsung>Nokia>smartfrend>Apple>Acer>Dell>Nikon>canon>DLL

    Dijual

    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,700.000

    Smartfren Andromax U Limited Edition
    Rp.1.000.000

    Tablet Asus Eee Pad Slider SL 1O1
    Rp.2.500.000

    Tablet Asus Memo Pad ME172 V
    RP.800.000

    Lenovo ldea Pad B490
    Rp.2.500.000

    Lenovo think Pad edge A86
    RP.1.700.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

    ALPHA SHOP
    alpha-shopelektronik.blogspot_com

  14. kalau form komentar wordpress, pasti semua orang bisa berkomentar mas tanpa perlu punya akun facebook dan google hehe ๐Ÿ˜€

  15. saya sering lihat yang komentar fb dan blog berdampingan sekarang saya tahu caranya, makasih mas ๐Ÿ™‚

  16. tutornya menarik… tp kl bikin lemot saya musti mengurungkan niat nih, mas. yg skg aja udh lumayan lemot… ^_^

  17. sebenernya pengen coba pakai komentar facebook dan blogger berdampingan seperti itu, tapi melihat blog saya agak berat, jadi saya tahan-tahan deh ๐Ÿ™‚
    tapi saya simpen dulu kodenya, siapa tahu bisa dipake di lain kesempatan ๐Ÿ™‚

  18. mi9n saya udah membuat seperti diatas, pas ada yg komentar menggunakan kotak komentar menggunakan komenntar blog, kotak komentar fb ilang, coba lihat di artikel saya ini _si-kudil.blogspot_com/2014/04/cara-instal-game-ps2-opl-dengan-usbutil.html sebelumnya ada yg komentar pada kotak kometar fb tp sekarang gak ada, solusinya gmna y ?๏ปฟ

  19. MaNTaP

    BLoG GW JuGa uDaH BiSa
    MeNDaMPiNGi KoMeNTaR FB DaN BLoG BeRDaMPiNGaN

    JiKa iNGiN MeNiKMaTi iNDaHNYa KaTa KaTa
    MaMPiR Ya Ke BLoG GW
    SaNG PeNCiNTa
    Si PeLuKiS KaTa KaTa iNDaH NaN SYaHDu

    _istanapuisisangpencinta.blogspot_com/
    _kerajaankata.blogspot_com/

  20. Mantap broo…jadi juga, makasi ya infonya semoga berguna buat yang lain
    buat teman2 yang mau nyari rumah, ruko, tanah & kavling wilayah cibubur, jakarta timur main ke web aku ya di
    __franklintproperty_com/

  21. Sebenernya caranya mudah saya pahami tapi berhubung membuat loading blog jadi saya urungkan untuk memasangya.

  22. โœ” Agen Vimax Asli
    โœ” Agen Vimax Asli
    โœ” Agen Vimax Asli
    โœ” Agen Vimax Asli
    โœ” Agen Vimax Asli
    โœ” Agen Vimax Asli
    โœ” Agen Vimax Asli
    โœ” Agen Vimax Asli
    โœ” Agen Vimax Asli
    โœ” Agen Vimax Asli
    โœ” Agen Vimax Asli
    โœ” Agen Vimax Asli
    โœ” Agen Vimax Asli
    โœ” Agen Vimax Asli
    โœ” Agen Vimax Asli
    โœ” Agen Vimax Asli
    โœ” Agen Vimax Asli
    โœ” Agen Vimax Asli
    โœ” Agen Vimax Asli
    โœ” Agen Vimax Asli
    โœ” Agen Vimax Asli
    โœ” Agen Vimax Asli
    โœ” Agen Vimax Asli
    โœ” Agen Vimax Asli
    โœ” Agen Vimax Asli
    โœ” Agen Vimax Asli
    โœ” Agen Vimax Asli

  23. Keren sob artikelnya sangat bermanfaat, terimakasih. Akan saya coba langsung di blog saya _solusikerontokanrambut.wordpress_com/

  24. Kenapa di blog ini kok ga dipasang ya mas, kalau aku sudah pasang di blog aku dan langsung berhasil, silahkan di cek dan jgn lupa komentarnya ya teman-teman, klik disini > _fifisurabaya.blogspot_com/2014/12/3-cara-mengembalikan-kesuburan-rambut.html

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA, Maaf ini untuk menghindari SPAM Robot...! *