Facebook memang sebagai Social Media sedangkan Blogger adalah Pembangun Blog dengan platform gratis. Hubungan pembuatan komentar Facebook di Blogger, bukan untuk media promosi di social media melainkan menghubungkan konektivitas antara social media tersebut dengan blog kita. Sehingga, blog kita mendapatkan lalu lintas yang besar dengan facebook. Untuk cara pembuatan kotak komentar facebook ini cukup mudah dan 100% berhasil. Agar blog Anda lebih terkonektivitas dengan facebook, langkah pertama adalah dengan membuat aplikasi di facebook terlebih dahulu. Tetapi, bagi Anda yang hanya ingin mengarahkan kotak komentar sebagai Anda yang menjadi adminnya tidak perlu membuat aplikasi facebook ini.
Cara Membuat Aplikasi di Facebook :
Login ke Facebook Anda.
Silahkan klik link Pembuatan Aplikasi Facebook ini.
Klik "Create New App"
Masukkan Nama Aplikasi anda di "App Display Name" , seperti gambar diatas.
Beri centang di I agree to the Facebook Platform Policies dan tekan "Continue".
Isikan pada kolom "Website", dan "App on Facebook (Canvas URL)" dengan alamat blog kamu. Lalu Simpan. Catat nomor Aplikasi ID Anda, seperti yang ditunjukkan di gambar Facebook tersebut. Sampai disini anda telah selesai membuat plugin aplikasi facebook. Sekarang lanjut ke tahap pembuatan komentar facebook di blog.
Cara Membuat Kotak Komentar Facebook di Blog :
1. Masuk akun blogger anda lalu pilih TEMPLATE, EDIT HTML
2. Klik pada bidang kotak yang berisi kode-kode template anda, letakkan pointer dimana saja.
3. Lalu cari kode ]]></b:skin> (Untuk memudahkan pencarian, gunakan CTRL + F
4. Letakan kode CSS di bawah tepat di atas kode ]]></b:skin> :
<div style="border: 1px solid rgb(238, 238, 238); height: auto; margin: 0px; overflow: auto; padding: 10px; width: 585px;">.comments-page { background-color: #00BFFF;}<br><div style="margin: 0px; padding: 0px;">#blogger-comments-page { padding: 0px 5px; display: none;}</div><div style="margin: 0px; padding: 0px;">.comments-tab { float: left; padding: 5px; margin-right: 3px;</div><div style="margin: 0px; padding: 0px;">cursor: pointer; background-color: #f2f2f2;}</div><div style="margin: 0px; padding: 0px;">.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}</div><div style="margin: 0px; padding: 0px;">.comments-tab:hover { background-color: #eeeeee;}</div><div style="margin: 0px; padding: 0px;">.inactive-select-tab { background-color: #d1d1d1;}</div></div>
5. Setelah itu cari lagi kode </head> kemudian letakkan kembali kode di bawah ini tepat di atas kode </head> :
<div style="border: 1px solid rgb(238, 238, 238); font-family: Lato, 'Myriad Pro', Arial, sans-serif; font-size: 14px; height: auto; line-height: 21px; margin: 0px; overflow: auto; padding: 10px; width: 585px;"><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><br><script src='http://code.jquery.com/jquery-latest.js'/><br><meta content='<b style="margin: 0px; padding: 0px;"><span style="color: #3d85c6; margin: 0px; padding: 0px;">ID FB Anda</span></b>' property='fb:admins'/><br><script type='text/javascript'><br>function commentToggle(selectTab) {<br>$(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;);<br>$(selectTab).removeClass(&quot;inactive-select-tab&quot;);<br>$(&quot;.comments-page&quot;).hide();<br>$(selectTab + &quot;-page&quot;).show();<br>}<br></script><br><div style="margin: 0px; padding: 0px;"></div></div>
Ganti kata ID FB Anda dengan aplikasi facebook yang telah Anda buat tadi. Jika Anda tidak membuat aplikasi facebook, silahkan masukkan id facebook anda yang terlihat di browser. Contoh : http://facebook.com/pemakan.wortell/ masukkan pemakan.wortell saja.
6. Karena kita akan membuatnya berdampingan dengan komentar bawaan dari blogger. Maka kita perlu menambahkan beberapa script lagi. Silahkan cari kode <div class='comments' id='comments'> .. Biasanya kode tersebut tidak hanya 1, kalau di dalam template anda terdapat lebih dari 1 kode tersebut.Cari kode yang paling terakhir, lalu letakan script dalam kotak di bawah ini tepat di bawah kode <div class='comments' id='comments'> :
<div style="border: 1px solid rgb(238, 238, 238); font-family: Lato, 'Myriad Pro', Arial, sans-serif; font-size: 14px; height: auto; line-height: 21px; margin: 0px; overflow: auto; padding: 10px; width: 585px;"><div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'><br> <img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/><br> <fb:comments-count expr:href='data:post.url'/> Comments<br> </div><br> <div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'><br> <img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments<br> </div><div class='clear'/><br> </div><br> <div class='comments-page' id='fb-comments-page'><br> <b:if cond='data:blog.pageType == &quot;item&quot;'><br> <div id='fb-root'/><br> <fb:comments expr:href='data:post.url' num_posts='<span style="color: red; margin: 0px; padding: 0px;">5</span>' width='<span style="color: red; margin: 0px; padding: 0px;">500</span>'/><br> <div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:588px;'>Facebook Comments by<br><b><a href='http://impoint.blogspot.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>Media Blogger</a></b><br></div><br> </b:if><br> </div><br> <div class='comments comments-page' id='blogger-comments-page'></div>
Lalu, Klik Simpan Template dan lihat hasilnya. Jika Kotak Komentar Facebook belum terlihat juga mungkin template tidak memiliki script kode yang support dengan facebook.
Maka, cari kode ini <html dan ganti dengan kode di bawah ini :
<html xmlns:fb='http://www.facebook.com/2008/fbml'
Simpan Template Anda.
sekian semoga bermanfaat..
Artikel
0 komentar:
Posting Komentar