Free Download & Tutorial Blog

Banner 468 x 60

Loading...

Menampilkan Komentar Facebook Berdampingan Di Blog

Selamat pagi sob...

Gimana kabarnya hari ini ??? Semoga baik-baik saja yah...



Ok, langsung aja sob, kali ini saya mau share bagaimana cara menampilkan komentar facebook berdampingan dengan komentar blogger. Saya pikir, cara ini cukup menarik karena selain menggunakan akun google, wordpress, live journal, dan lain sebagainya yang biasa digunakan untuk memberikan komentar di artikel sebuah blog, maka dengan menerapkan cara ini, pengunjung yang tidak memiliki akun-akun tersebut pun bisa memberikan komentarnya dengan menggunakan akun facebook mereka.

Begini caranya sob :

1. Login ke blogger.


2. Pilih Template - Edit HTML dan centang "Expand Template Widget".


3. Letakkan kode dibawah ini dibawah kode <div class='comments' id='comments'> .

<div class='commblogfb-tab' id='fb-comments' onclick='javascript:
commentToggle(&quot;#fb-comments&quot;);' title='Add Comments via Facebook'>
 <img class='commblogfb-tab-icon' src='http://1.bp.blogspot.com/-pfdCr67N0vY/URV01_6rbJI/AAAAAAAACVg/n_vDeB55BIE/s000/facebook.png'/> <fb:comments-count expr:href='data:post.url'/>
Facebook&#39;s Comments  </div>  <div class='commblogfb-tab inactive-select-tab'
id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);'
title='Add Comments via Blogger'> <img class='commblogfb-tab-icon'
src='http://4.bp.blogspot.com/-DG0bPhhycRU/URV03kQ819I/AAAAAAAACV0/PPkxhtfMJZI/s000/rss.png'/>
<data:post.numComments/> Blogger&#39;s Comments  </div><div class='clear'/>
 </div>  <div class='commblogfb-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='500px'/>
    </b:if>     </div>     <div class='comments commblogfb-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='ID FACEBOOK ANDA' property='fb:admins'/>
    <script type='text/javascript'>
    function commentToggle(selectTab) {
    $(&quot;.commblogfb-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
    $(selectTab).removeClass(&quot;inactive-select-tab&quot;);
    $(&quot;.commblogfb-page&quot;).hide();
    $(selectTab + &quot;-page&quot;).show();
    }
 </script><style type='text/css'>.commblogfb-page, .commblogfb-tab
{color:#3F3937;float:left;padding:5px;margin-right:5px;margin-left:5px;
cursor:pointer;font-weight:bold;background-color:#f2f2f2;border-radius:5px 5px 0
0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;position:relative;z-index:10;
box-shadow:0 -1px 2px #666;-moz-box-shadow:0 -1px 2px #666;-webkit-box-shadow:0 -1px 2px #666;
background-image:linear-gradient(#fff,#f2f2f2);background-image:-moz-linear-gradient(#fff,#f2f2f2);
background-image:-webkit-linear-gradient(#fff,#f2f2f2)}.commblogfb-page {background:
rgba(255,255,255,.4);margin-top:8px;}#blogger-comments-page {padding:0px 5px;display:none;}
.commblogfb-tab {background-color:#6196DB;background-image:linear-gradient(#6196DB,#9FBFE9);
background-image:-moz-linear-gradient(#6196DB,#9FBFE9);background-image:-webkit-linear-gradient
(#6196DB,#9FBFE9)}.commblogfb-tab-icon {height:14px;width:auto;margin:0 3px}.commblogfb-tab:hover
{background-color:#9FBFE9;background-image:linear-gradient(#9FBFE9,#9FBFE9);background-image:-moz-linear-gradient(#9FBFE9,#9FBFE9);background-image:-webkit-linear-gradient(#9FBFE9,#9FBFE9)}.inactive-select-tab {background:rgba(background-color:#e2e2e2;background-image:linear-gradient(#f4f4f4,#DDD);background-image:-moz-linear-gradient(#f4f4f4,#DDD);background-image:-webkit-linear-gradient(#f4f4f4,#DDD)}.inactive-select-tab,
.commblogfb-tab:hover {background-color:#3b5998;background-image:linear-gradient(#6b89d8,#3b5998);
background-image:-moz-linear-gradient(#6b89d8,#3b5998);background-image:-webkit-linear-gradient
(#6b89d8,#3b5998)}</style> 

4. Pratinjau, dan apabila tidak ada masalah maka Simpan Template.

5. Enjoy.


*Keterangan : Ganti ID FACEBOOK ANDA dengan id facebook milik anda sendiri (http://facebook.com/INI ID ANDA)

Gimana sob??? Berhasil tidak mempraktekkan cara diatas???

Semoga bermanfaat yah dan jangan lupa tinggalkan komentar di kotak komentar dibawah....
ads ads

30 Response to "Menampilkan Komentar Facebook Berdampingan Di Blog"

wah keren ni, terimakasih banyak sudah berbagi

Balas

simple..

sangat membantu mas

Balas

terima kasih... ;)

Balas

punya saya sudah jadi, thanks

Balas

keren gan. makasih infonya. ditunggu kunjungan baliknya gan

Balas

pengaruh ke loading gimana njeh?

Balas

relatif gan, coba cek berat blognya sebelum dan sesudah menggunakannya...

Balas

wah berhasil mbak, sangat superbbb :D hehhe :-bd kunjungi blog ku mbak www.habiball.blogspot.com :D

Balas

Terima kasih, ini yang aku cari....

Balas

silahkan gan dicoba...

Balas

Simple, Singkat, Padat....Terpercaya...(he he he)
kalau yang lain harus letakkan dbawah ini, dan dbawah itu..
trmkzih....
Kalau sempat kunjungi blog saya ya..kalau ga sempat gpp ga usah dikunjungi...mampir aja sudah ke www.46english.blogspot.com
(sm aja dg maksa aku ini?)
Hehe he he he....!!!!!!!!!!

Balas

:D :D :D ok :-bd gan blogwalking emang bagian dari rutinitas dalam ngeblog...

Balas

Oiya...trus kalau mau lihat ada komen lewat pesbuk gmn ya cara mengetahuinya?Trmkasih lagi...!!!!jgn bosen2 ya?

Balas

klik di tab "facebook's comments" gan...

Balas

Maksud saya gini...misalkan kita punya 9.346 posting..(wow banyak skali postingnya...Ngarang lo...punyanya sndiri cuma 13 posting)
he hee he..
ya anggaplah sgitu..bagaimana kita mengetahui kalau ada komen di masing-masing posting...?apakah semua komen jadi satu spt komen di blogger?
Mohon bimbingannya...!!!trmkasih..smoga dapat pahala...
Amiiiin..!!!!!!!!!!!!!!!!!!

Balas

:'( maaf ya kalo jawaban nya kurang memuaskan karena saya juga belum pernah menggunakan model komentar seperti ini di blog saya, tapi melihat kita memasukkan ID facebook, kemungkinan akan ketahuan kalau kita login di facebook,tp cara yg paling pasti cek setiap postingan satu per satu, masalahnya kalau postingannya banyak, ga kehitungan deh... **p

Balas

makasih infonya, langsung di coba yah :)

Balas

pleased oke gan thanks...komentar balik y
http://fajar-pkp.blogspot.com/

Balas

Nice Tips . Membantu blogger baru seperti saya hehehe
http://3pledoubleyou.blogspot.com/

Balas

Banyak orang nulis artikel tutorial tapi diblog nya sendiri ngga dipasang apa yang di tulis.....

Ada contoh demo nya ga gan yang dah agan pasang ????
masih work ga neh ???

Balas

kunjungan balik ya ke krizkypermadibdl.blogspot.com

Balas

wiihhhhh hebat banget nih, ijin praktek ya .hhe

Balas

berhasil nih,,, tapi kok agak berat ya...
mampir ya ke ulwannn.blogspot.com

Balas

Keren om.. salam hangat dari saya @RumahNo48

dad

Balas
  • Silahkan berkomentar yang bijak dan santun, serta tidak hanya bertujuan spam.
  • Komentar yang disisipi link aktif akan terhapus secara otomatis.
  • Terima kasih atas komentar anda. Semoga informasi yang ada di blog ini bermanfaat.
  • haii pleased huhhh dad shake wat2 order happy cheer spoiled
Konversi Kode