Membuat Komentar Facebook Berdampingan dengan Komentar Blog

Membuat Komentar Facebook di Blog selain dapat membuat blog terlihat lebih bagus dan rapih, para pengunjung pun akan lebih di mudahkan dalam berinteraksi dengan anda melalui Kotak komentar karena sebagian pengunjung anda pastinya ada yang sudah login ke akun Facebook, jadi mereka pun akan ebih mudah berkomentar.

Tetapi jika kita menambahkan komentar Facebook dan etap mempertahankan Kotak komentar Default blog tentu akan membuat blog keliatan tidak dinamis karena terlalu memanjang ke bawah, nah oleh sebab itu saya akan memberikan Cara Membuat Komentar Facebook Berdampingan dengan Komentar Blog.

Berikut adalah Screenshot nya
Membuat Komentar Facebook Berdampingan dengan Komentar Blog
Bagaimana ingin mencoba Komentar berdampingan tersebut.
1. Login ke Blog
2. Rancangan - Edit HTML
3. Untuk menghindari keselahan, Backup template anda terlebih dahulu dengan Download lengkap
4. Centang "Expand Template Widget"
5. Cari Kode <div class='comments' id='comments'>
Biasanya akan terdapat 2 kode tersebut di template anda
Copy kode di bawah ini tepat di bawah kode <div class='comments' id='comments'> yang ke 2

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' 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(&quot;#blogger-comments&quot;);' 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 == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

2 : Jumlah Komentar Facebook yang akan di tampilkan
400 : Lebar Komentar Facebook

6. Lalu Cari kode </head>
Copy Kode dibawah ini tepat diatas kode </head>

 <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='ID Facebook' 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>

ID Facebook : Ganti dengan ID Facebook anda yang terletak di bagian belakang browser URL Profil Facebook anda, Misalkan http://www.facebook.com/Blogdhika ID Facebooknya adalah Blogdhika

7. Cari kode /* Comment atau #comments
Setiap Template mempunyai struktur kode yang berbeda-beda, jadi cari saja kode yang mirip dengan kode diatas
Copy kode berikut di bawah kode diatas tadi

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

8. Simpan

Selesai, sekarang anda sudah mempunyai Komentar Facebook Berdampingan dengan Komentar Blog

97 komentar:

Fahmi Setiawan mengatakan...

Nice info gan :D
visit back ya :D heheheee

Dhika mengatakan...

ok dah kang Fahmi

Fahmi Setiawan mengatakan...

Saya masih kecil mas... hahahaha
jangan Di panggil kan ya, tua banget rasanya, kwkwkwkw...
Panggil aja fahmi/pahmi...
salam kenal ya Om/Bang/Pak/Gan.

Dhika mengatakan...

HAHAHA, biar lebih sopan aja ...
oya kenapa comment pakai ID Google, bukan Link Blog akang

Mr. San San mengatakan...

saya sudah coba.. tapi ada peringatan "warning url posting tidak ditemukan".. contoh diposting ini gan

http://sanieburonan.blogspot.com/2012/02/logo-akbid-siti-fatimah-slawi-format.html

gimana gan cara betulinya.??

email pliss : sanieride@gmail.com

Mohamad Fazri Ali mengatakan...

makasih banyak gan infonya ! http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gifhttp://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif

Amandio Vieira mengatakan...

Nice Info Mas Broww....

Dhika mengatakan...

@Mr. San San : Mungkin salah meletakan kodenya, karena setiap template pasti memiliki struktur kode yg berbeda2

@Amandio Vieira : Ok sama2

Eka Saputra mengatakan...

kok saya coba kagak bisa yua tolong bantuannya....

saya ga bisa nemuin kode /* Comment atau #comments

Dhika mengatakan...

@Eka Saputra : Setelah saya cek template akang silahkan pasang kode diatas tepat di bawah kode
#comments h4 {
color: #666666;
font-size: 14px;
font-weight: bold;
letter-spacing: 0;
line-height: 1.4em;
margin: 1em 0;
}

Silahkan di coba
text-transform: none;

HENDRO mengatakan...

q sudh coba tpi gx ada tu hsinya

Dhika mengatakan...

Bisa kok, saya sudah menerpaknannya di blog saya satu lagi

Blogger Bodoh mengatakan...

Mantap, berfungsi untuk blog saya, tpi untuk ID Facebooknya, saya khan posting di fun page

Itu ngambil yang mana yach

URL Pribadiku, atau URL Fun Page

Sedangkan belakang URL fun page ada angka yang mengikuti seperti ini http://www.facebook.com/pages/Blogger-Bodoh/232728603431098

eazysong mengatakan...

sy pke kok malah gambar diatas blog saya,, slidenya malah ngga berfungsi ya,,, itu knp yak???
dah sy hapus lagi,, "comment yg berdampingan" nya...

Hwa Woo-9-89 mengatakan...

rada-rada bingung gw,,,

MivMivMiv mengatakan...

kok hasil nya biasa biasa aja ya gan ? ga ngaruh sedikit pun :-/

Yesi Novia mengatakan...

Kok g bs sich???ttp aja kotak komen biasa ~x(

Download Software mengatakan...

oke gan, thanks banget tutorialnya gan..
Jadi rajin comment deh kalau gini..

planktoon blog mengatakan...

tutorial mantapz............. :)]

Kevin Samara mengatakan...

mantap gan

Kevin Samara mengatakan...

tpi munculnya kok dua commnet fb nya

Muhammad Fakhrul mengatakan...

kagak muncul apa apa gan.. kagak ngaruh...:((

Leonardo mengatakan...

kalau mau buat berbeda disetiap postingan gimana gan?

syahsmkn2tb mengatakan...

Nice post... Tx
Mampir jg ya

menul vengeance mengatakan...

sudah lakuin step by step knp gk ada perubahan ya :-t

Kurniawan Sanchez mengatakan...

Nice info sob! Download Software n games Full Crack di http://shadow-rpl.blogspot.com

ZaimFata mengatakan...

aku bisa tapi klo udah pernah nulis komentar bloggernya, komentar facebooknya gak mau muncul?

Awing's Blog mengatakan...

makasih gan....anne berhasil keren bag sumpah

ʁ-ə ɡ-ɨɭ mengatakan...

makasih banyak infonya mas..


visit balik yah :D

Irwanz'blogs mengatakan...

wow baru kali ini berhasil hehe
thanks bgt bwat info nya #NICE posting :D


mampir yaak hehe
http://irwantzsite.blogspot.com/
jangan lupa folw blog saia :)

Agriculturproduct mengatakan...

Ahh,sial banget nich gan.gak mau masuk.

Kazutoshi Hiranuma mengatakan...

Bisa kang mantabb !! THx INFO NYA

Vina Herlina mengatakan...

follow back
http://vinafreedownload.blogspot.com/

Maulana Akib mengatakan...

untuk mengatur lebar bgnya

Rafa Ditya mengatakan...

kaga bisa gan.... :((

bez mengatakan...

udah bisa, tks,,
http://serufo-uny.blogspot.com/2012/04/liputan.html

selanjutnya buat bikin widget recent comment yang dari kotak komentar fb yang da di smua postingan gimane tu gan??

kal yg dari fb kan ada tuh tinggal add widget recent comments aja.

bisa gk ya,,,

Fadhil Priambodo mengatakan...

mantap Gan :D
mampir yah tempat saya di www.fadhilpb.blogspot.com

Juragan Bisnis mengatakan...

DA

SDN Kembangan Utara 05 Pg mengatakan...

Makasih ilmunya sangat bermanfaat, semoga selalu mendapat kebaikan ya :)

Zamrud Hijau mengatakan...

Info yang baguz sekali untuk disimak.....
Bermanfaat sekali untuk saya....

Mohon kunjungan baliknya yaa....
Dan saya juga sangat berterima kasih sekali kalau anda berkenan FOLLOW dan Backlink Blog sederhana saya.... :-)

( http://zamrudhijau.blogspot.com/ )

BiF admin mengatakan...

gan kalo nyari tau ada nggak komentar fb di blog gimana?
jawab yaa

Heka Ardiant mengatakan...

@bif admin.
Kayaknya musti manual deh, ya di cek satu persatu..

@mas dika, uda di terpain mas, hasilnya bisa di lihat di blog baru saya http://cimotivator.blogspot.com/2012/05/pelajaran-yang-tidak-bisa-di-ajarkan.html

Xylon mengatakan...

gak ada code yang kaya gini
div class='comments' id='comments'>

jadi w bingung mao mulai gimana..
blogger beda sekarang

Ifan Muhammad Luthfi mengatakan...

thank you gan.. :D

felix mengatakan...

mantap infonya,thanks...

Ramadhan.S.K. mengatakan...

Kerne gan :D thanks banget. Mamapir ya --> http://ramadhansk.blogspot.cm/

Anonim mengatakan...

nice gan..mantp..tq

Rizal Skate Punk mengatakan...

Gan itukan komentar Facebooknya desebelah kiri, cara pindahin komentar fb ke sebelah kanan tapi tetap berdampingan dgn koment blog gimana cara'na? itu berdampak pada loading blognya.
http://ichizoku-uchiha.blogspot.com/

Jalz mengatakan...

bagaimana cara pindahin nya ke sebelah kanan??

Majalah Siantar mengatakan...

info nya bagus gan,,,

lanjut..

Yumna Nuruddin mengatakan...

bung tu ID FBnya pkek www.facebook.com/id facebook gx?

Tutorial Smart mengatakan...

Mo nanya gan, kira-kira efektif mana ya pasang koment facebook double ma koment blog apa satu saja kayak punya agan ini? Thanks... kunjung balik gan ke tutorsmart ya

BJGP mengatakan...

berhasil tapi klau sudah pernah ada koment blog , koment fbnya gak kelihatan

joni haryadi mengatakan...

sepp gan.. berhasil... ni blog khusus testing template saya incomee.blogspot.com.
masukan saya: salah satu kode diatas di pasang di bawah "" yang ke 1 itu baru berhasil.
btw. gimana memindahkan komentar facebook nya ke kanan??
terima kasih..

dorokdoc mengatakan...

di postingan yang dah ada koment nya ga muncul pilihan kedua kotak koment nya gan..
sama di halaman utama tombol readmore nya jadi ilang.

ARRA mengatakan...

wah berhasil ane gan, tengkyu inpoh nya :D

ARRA mengatakan...

gan, ane mau nanya nih. kalo mau ganti warna font nya gimana ya ?? :D soalnya blog ane template nya warna item :D jadi gak keliatan tuh si komeng pesbuk nya . :)

blogriefs mengatakan...

kogh gagh berhasil gan. gag terjadi perbedaan apapun

Anonim mengatakan...

berhasil mabro.. tq ye.. jadi nambah manteb ni blog ane ;;)

Qnozzaholick mengatakan...

wah asik nick dapet info baru lagi,
follow this my blog donk

m.rifqi sucahyo mengatakan...

Nice info sob, makasi dah mau berbagi

Viyan Pradita mengatakan...

Yang gak bisa atau gak ngefek.. coba perhatikan langkah NO.5
Pada kode : <div class='comments' id='comments'>

Di atas dijelaskan menaruh kodenya di <div class='comments' id='comments'> yang Kedua (2), Tapi bagi yang gak bisa coba taruh kodenya dibawah <div class='comments' id='comments'> yang pertama (1).

Semoga membantu.

Muara Fatan mengatakan...

Thanks kang,... Sekarang sudah sudah pasang di salah satu blog sya, hasilnya Nyammi.

Diary Online mengatakan...

Ini Yang Saya Cari Thx Kawan

Kurniawan Sánchez mengatakan...

sukses sob.. thx! tapi kok muncul like box FB di pojok knan atas yh? liat disni http://shadow-rpl.blogspot.com/

TUTORIAL BLOGGER mengatakan...

mksih sob invonya..
kpn2 mmpir'y sob heheh.
lam knal Master

girayraspati mengatakan...

100% work di blog ane... makasih tutorialnya gan...
blh liat ni girayblog.blogspot.com

Fachrul Akbar Tirtawidjaja mengatakan...

gak terjadi perubahan sama sekali kang dhika.sadahal langkah langkah saya udah sama percis dan gak ada hambatan.

Fachrul Akbar Tirtawidjaja mengatakan...

gak terjadi perubahan sama sekali kang dhika.sadahal langkah langkah saya udah sama percis dan gak ada hambatan.

Dhika mengatakan...

@ALL : ada yg berhasil, dan ada yang gagal dalam memasang script diatas ...
Hal tersebut didasari karena setiap template tidak semuanya memiliki struktur kode yg sama ....
Jadi saran saya, jangan menyerah untuk mencoba !!!

rachmad tatawarna mengatakan...

nice gan :D ane gagal -_-

monocotil mengatakan...

mantap mas browww,,, thankz

Berita Terbaru mengatakan...

Nice post, lebih irit tempat karena tidak ditampilkan, namun bagi user facebook, klo gak tau/teliti bisa terlewat

topSpot | Find your top spot here mengatakan...

Saya belum bisa, soalnya template saya beda banget kode2 nya ~x(

mrizal rthalos mengatakan...

Bloger tolol.....
katanya Copy kode ini itu tapi malah G bisa diCopy.. bloger tolol... tai lo

roydo ari pratama mengatakan...

gan, tolongin ane dongk, ane pngen masang di tmplte dinamis, tapi selalu ga bis gan. ne tau ni bukan untuk dinmic, tapi tolon donk gan,..,

Dhika mengatakan...

@roydo ari pratama : Peringatan errornya apa gan?

Klik Disini mengatakan...

Mantap Cay, sukses 100% :D :))

Ahmad Ridwan mengatakan...

Nih buat yang ingin setiap komentar facebook ada pemberitahuan dan ada apakah komentar tersebut mau ditampilkan atau tidak. sama seperti komentar blogger.

Langsung saja ke halaman ini, http://softwareku4u.blogspot.com/2013/01/membuat-komentar-facebook-ada-pemberitahuan-masuk.html

Heri mengatakan...

siiiip gan infonya......

Dian Hadinata mengatakan...

untuk kolom komentar facebooknya kok gk muncul gan?
please cek dimari http://ibussinessonline.blogspot.com

#suwun :)

Ali hussain mengatakan...

You made some good points .I did a little research on the topic and found that most people agree with your blog. Thanks.airport pickup w2 | heathrow to w2 | minicab in w2

dedy-aswan mengatakan...

gue gak nemu kode nya......
soalnya skrn gak ada kata expand

gimana nih...????

bayu widiyanto mengatakan...

nice info thanks

kunbal www.gallerysold.blogspot.com

sikkahoder mengatakan...

bagaimana kalau pakai fan page??? id nya mana??

Albeitsy mengatakan...

kalo buat template responsive bisa gak gan

melody achmad mengatakan...

nyobain dulu ya kk

pantun mengatakan...

ini nggak jalan di web saya,, haduuuh kayanya mesti ganti template lagi nih...

andrian mengatakan...

oke sipp

koper-ebook mengatakan...

thank's gan atas ilmunya,q mau terapin dulu di blogku

Intan Sudibjo mengatakan...

ko punya saya gk berdampingan yah? :o

Anonim mengatakan...

MENABUNGLAH SEJAK DINI.....
Sangat disarankan untuk masa depan anda.....
tapi gimana kalau penghasilan pas pasan sehingga hanya sedikit uang yang bisa ditabung namun ingin memiliki tabungan dalam jumlah yang besar.......??????
INI SOLUSINYA....!!!!!!!!!!!!!!!

http://indoboclub.com/?ref=nandian

Cukup dengan modal awal 100 ribu untuk upgrade pertama kali dan uang anda anda berkembang di jaringan IBC....
CARANYA:
# buka link >> http://indoboclub.com/?ref=nandian
# klik REGISTER NOW, pastikan upline a.n >> nandian>>
# isi data ACCOUNT INFORMATION dan PERSONAL INFORMATION
# klik JOIN NOW
# SELAMAT....!!!!!! anda telah bergabung dengan IBC

* lakukan upgrade paket iklan untuk buat status akun menjadi ACTIVE
* Iklankan URL anda melalui Facebook, Twitter, Email, dll untuk mencari downline dan dapatkan bonus referral hingga 10 level......

Plan INVESTASI,
Profit 2% /hari (senin-jumat, selama 100 hari)
- Investasi Tanpa Auto Compound selama 100 hari
◕ $10.00 = $20.00
◕ $20.00 = $40.00
◕ $30.00 = $60.00
dst... sampai dengan...
◕ $5000.00 = $10165.00

- Investasi Menggunakan Auto Compound (AC) selama 100 hari*
◕ $10.00 di AC akan jadi $62.45
◕ $20.00 di AC akan jadi $124.89
◕ $30.00 di AC akan jadi $187.34
dst... sampai dengan...
◕ $5000.00 di AC akan jadi $32579.13

★ Suport Bank : PM (Perfect Money), Bank MANDIRI, BNI, BCA, BRI, & Bank Daerah lainnya
★ Uang yang kita investasikan akan dipakai untuk Bisnis FOREX, ADVERTISING, DLL.

pendidikanberprestasi mengatakan...

semoga berhasil

prudentialyogyakarta1 mengatakan...

maksh ya mas , ..jossss.. bisa mas dipasang, tetapi dilaka artikel belum ada yangkoment di kotak koment blog kok kontak coment fbyna ga keliahta ya ????? apaklah nda bisa diperlihatkan semua walau belum ada yang komentar ????? coba mas cek blog sya...biar bisa dibandingkan ....http://prudentialyogyakarta1.blogspot.com

maksih ya mas.... saya tunggu jawabnanya....

aditya aulia rahman mengatakan...

nice info gan

http://hamahara.blogspot.com/

Akbar Abdullah mengatakan...

bercanda itu sehat



7 alasan mengapa tertawa itu sehat



10 makanan menyehatkan


caranya salah kalee :P

Obat Kolesterol mengatakan...

sukses ,, makasih infonay http://goo.gl/Nlu4q4 | http://goo.gl/IfvHUY | http://goo.gl/0GZ7I5 | http://goo.gl/9M1wDg

Posting Komentar

 
Copyright © 2011 Andhika Hutomo Blogdhika.com. Powered by Blogger™