Cara membuat kotak komentar facebook di blogger terbaru 2014
Panduan lengkap tentang blogger - Cara membuat kotak komentar facebook di blog, Cara Membuat Comment Box Facebook di Blogger di bawahnya : Membuat komentar dengan tampilan yang menarik, akan memancing pengunjung untuk berkomentar di blog Anda. Hal ini sudah tidak menjadi hal yang baru, dan telah banyak yang memakai dengan aplikasi plugin tambahan Facebook ini. Mengapa banyak orang yang ingin membuat kotak komentar facebook di blognya? Salah satu faktor utama adalah untuk meningkatkan traffik pengunjung bagi blog mereka.
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.
Baca juga : cara menghilangkan kotak komentar di blogspot
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.
Baca juga : cara menghilangkan kotak komentar di blogspot
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 :
A. Cara Membuat / mendaftar Aplikasi di Facebook :
- Login ke Facebook Anda.
- Silahkan klik link ini : http://developers.facebook.com/apps Facebook. Maka anda akan masuk ke halaman facebook aplikasi, LALU KLIK REGISTER NOW / BUAT APPLIKASI BARU. Untuk lebih lengkap nya perhatikan gambar di bawah ini :
 |
| Gambar tampilan utama untuk facebook applikasi |
- Jika sudah nanti akan ada tampilan Form kecil, Klik angka 0 lalu pilih Mendaftar. Untuk lebih lengkap nya perhatikan gambar di bawah ini :
 |
| Gambar cara membuat aplikasi kotak komentar fb terbaru 2014 |
- Akan muncul form Pembuatan aplikasi baru : Kolom pertama isi dengan nama website anda, kolom ke-2 kosongkan saja, dan PILIHAN KATEGORI pilih saja dengan APLIKASI UNTUK HALAMAN, laluBUAT APPLIKASI. Untuk lebih lengkap nya perhatikan gambar di bawah ini :
- Setelah anda klik mendaftar maka akan muncul kode sapta yang harus anda isi lalu pilih KIRIM.Untuk lebih lengkap nya perhatikan gambar di bawah ini :
- Setelah itu anda sudah sampai di halaman applikasi anda. tapi tunggu dulu masih ada beberapa langkah untuk menyempurnakan halaman applikasi facebook anda. pilih PENGATURAN di halaman applikasi anda. Untuk lebih lengkap nya perhatikan gambar di bawah ini :
 |
| Gambar tampilan applikasi facebook |
- Jika sudah anda memilih pengaturan, anda lengkapi E-MAIL anda dan pilih TAMBAHKAN PLATFORM. Untuk lebih lengkap nya perhatikan gambar di bawah ini :
 |
| Cara membuat kotak komentar fb di blog terbaru 2014 |
- Setelah itu pilih SITE WEB. Untuk lebih lengkap nya perhatikan gambar di bawah ini :
 |
| Cara membuat applikasi facebook terbaru 2014 |
- Dan yang terahir : 1. isikan url situs anda, 2. kosongkan, 3. simpan perubahan, 4. simpan id applikasi anda untuk Pembuatan kotak komentar facebook di blog di tahap selanjut nya. Untuk lebih lengkap nya perhatikan gambar di bawah ini:
 |
| cara membuat kotak komentar di blogger 2014 |
B. Cara Membuat Kotak Komentar Facebook di Blog :
- LOG IN ke blog anda di www.blogger.com
- Setelah anda log in maka anda akan di bawa ke dasboard blog, nah di dasboard blog inilah anda harus klik tanda segitiga kebalik (opsi pilihan) lalu pilih TEMPLATE. Untuk lebih detail nya lihat gambar di bawah ini :
 |
| Gambar tampilan dasboard blog |
- Jika anda sudah mengklik template anda maka anda akan di bawa ke halaman HTML dan pilih EDIT HTML Untuk lebih detail nya lihat gambar di bawah ini :
 |
| Gambar tampilan edit html blog |
- Jika anda sudah masuk di dalam kolom halaman html blog lalu cari kode ]]></b:skin> untuk mempercepat pencarian klik 1x di dalam kotak HTML lalu anda tekan CTRL + F Nanti akan ada kolom kecil di di pojok kanan atas lalu masukan kode ]]></b:skin> di kolom tersebut dan tekanENTER pasti langsung dapat kode tersebut. Lalu Letakan kode CSS di bawah tepat di atas kode ]]></b:skin> :
MASUKAN KODE DI BAWAH INI TEPAT DI ATAS KODE : ]]></b:skin>
.comments-page { background-color: #00BFFF;}
#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;}
- Jika sudah cari lagi kode </head> Dan letakan kode di bawah ini tepat di atas 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 FB Anda' 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>
CATATAN :GANTI ID FB DENGAN ID APPLIKASI FB YANG ANDA BUAT TADI.<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='ID FB Anda' 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>
- 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'>. Cara pencarian nya sama seperti cara di atas yaitu dengan Menekan ( CONTROL + F ). Biasanya kode tersebut tidak hanya 1, kalau di dalam template anda terdapat lebih dari 1 kode tersebut. Cari kode yang paling terakhir, CARA NYA TEKAN ENTER SAJA LAGI DI KOLOM PENCARIAN ( CONTROL + F ) ADA LAGI TIDAK KODE NYA JIKA SUDAH MENTOK lalu letakan script dalam kotak di bawah ini tepat di bawah kode <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='5' width='500'/>
<div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:588px;'>Facebook Comments by
<b><a href='http://impoint.blogspot.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>Media Blogger</a></b>
</div>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<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='5' width='500'/>
<div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:588px;'>Facebook Comments by
<b><a href='http://impoint.blogspot.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>Media Blogger</a></b>
</div>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
- DAN TERAHIR KLIK SIMPAN TEMPLATE
0 comments:
Post a Comment