Cara Pasang Kotak Komentar Facebook Di Blog Blogspot
Ini cara paling gampang menampilkan kolom komentar yang sanggup dishare pribadi ke Facebook oleh Anda atau pengunjung.
Anda sanggup "ambil" aba-aba kotak komentar FB itu di sini: Facebook Developer.
Jika gagal, Anda sanggup memasang Kotak Komentar Facebook di bawah posting blog dengan memakai kode-kode lainnya yang CB share juga di bawah aba-aba facebook comments box for blogger pertama.
Kotak Komentar Facebok Ini, Bagus Tidak Buat SEO Blog?
Sebelumnya, kita ulas dikit, Kotak Komentar Facebook di Blog sanggup anggun buat SEO, kalau banyak --bahkan kebanyakan-- pengunjung Anda komentar di sana dan di-share ke akun Facebooknya. Tapi, jika hanya sedikit, bahkan tidak ada sama sekali yang komentar di kotak komentar Facebook itu, maka sebaiknya LEPAS saja, alasannya yakni hanya memperlambat loading blog Anda dan ini artinya justru mengurangi SEO Blog --Google suka banget blog yang Fast Loading!
CB sendiri "terpaksa" memasangnya sekadar untuk contoh, namun hanya di halaman posting ini dimunculkannya. Di posting lain tidak ada alasannya yakni memakai Tag Kondisional.
CB sendiri "terpaksa" memasangnya sekadar untuk contoh, namun hanya di halaman posting ini dimunculkannya. Di posting lain tidak ada alasannya yakni memakai Tag Kondisional.
Cara Pasang Kotak Komentar Facebook di Blog Blogspot
Siap pasang komentar facebook di blog Anda? Mari kita mulai!
1. Pasang Meta Facebook. Simpan di bawah aba-aba <head>
Ganti angka-angkanya dengan FB Admin ID dan FB App ID Anda. Baca: Cara Mendapatkan FB Admin ID dan FB App ID.
2. Copas aba-aba berikut ini di bawah aba-aba <body>
3. Copas aba-aba berikut ini di bawah aba-aba <div class='comments' id='comments'>
3. Save!
Beres...! Kini Kotak Komentar Facebook sudah muncul di blog Anda, di bawah posting atau di bawah related post dan di atas kotak komentar blogger.
Gampang 'kan cara memasang kotak komentar di Facebook?
CARA KEDUA
Jika cara di atas gagal, maka lakukan cara berikut ini.
1. Lakukan langkah pertama menyerupai di atas (Pasang Meta Facebook).
2. Pasang KODE JS. Simpan aba-aba berikut inidi atas kode </head>
3. Pasang KODE JS/HTML.
Simpan aba-aba berikut ini di bawah <data:post.body/> (yang kedua atau ketiga) atau di bawah kode <div id='related post'> ... </div> atau di dalam aba-aba <div class='post-footer-line post-footer-line-3'> </div>
4. Save Template!
1. Pasang Meta Facebook. Simpan di bawah aba-aba <head>
<meta content='12345678' property='fb:admins'/>
<meta content='12345678910' property='fb:app_id'/>
<meta content='12345678910' property='fb:app_id'/>
Ganti angka-angkanya dengan FB Admin ID dan FB App ID Anda. Baca: Cara Mendapatkan FB Admin ID dan FB App ID.
2. Copas aba-aba berikut ini di bawah aba-aba <body>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
3. Copas aba-aba berikut ini di bawah aba-aba <div class='comments' id='comments'>
<b:if cond='data:blog.pageType == "item"'>
<div style='margin-top:20px'>
<div class='fb-comments' data-num-posts='5' data-width='600' expr:data-href='data:blog.url'/>
</div>
</b:if>
<div style='margin-top:20px'>
<div class='fb-comments' data-num-posts='5' data-width='600' expr:data-href='data:blog.url'/>
</div>
</b:if>
3. Save!
Beres...! Kini Kotak Komentar Facebook sudah muncul di blog Anda, di bawah posting atau di bawah related post dan di atas kotak komentar blogger.
CARA KEDUA
Jika cara di atas gagal, maka lakukan cara berikut ini.
1. Lakukan langkah pertama menyerupai di atas (Pasang Meta Facebook).
2. Pasang KODE JS. Simpan aba-aba berikut inidi atas kode </head>
<script type="text/javascript">
//<![CDATA[
$(window).bind("load resize", function(){
var url = location.protocol+'//'+location.host+location.pathname;
var containercm_width = $('#container-commentfb').width();
$('#container-commentfb').html('<div class="fb-comments" ' +
'data-href="'+url+'"' +
' width="' + containercm_width + '" data-num-posts="10"></div>');
FB.XFBML.parse( );
});
//]]>
</script>
//<![CDATA[
$(window).bind("load resize", function(){
var url = location.protocol+'//'+location.host+location.pathname;
var containercm_width = $('#container-commentfb').width();
$('#container-commentfb').html('<div class="fb-comments" ' +
'data-href="'+url+'"' +
' width="' + containercm_width + '" data-num-posts="10"></div>');
FB.XFBML.parse( );
});
//]]>
</script>
3. Pasang KODE JS/HTML.
Simpan aba-aba berikut ini di bawah <data:post.body/> (yang kedua atau ketiga) atau di bawah kode <div id='related post'> ... </div> atau di dalam aba-aba <div class='post-footer-line post-footer-line-3'> </div>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div id='container-commentfb' style='width: 100%;'><fb:comments expr:href='data:post.url' num_posts='10' width='650'/></div>
</b:if>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div id='container-commentfb' style='width: 100%;'><fb:comments expr:href='data:post.url' num_posts='10' width='650'/></div>
</b:if>
4. Save Template!
MASIH ADA CARA LAIN !
Jika dua cara menampilkan Kotak Komentar Facebook di atas gagal, lakukan cara lain berikut ini:
1. Login ke akun Facebook Anda
2. Buat dulu ID Aplikasinya di Facebook App.
3. Klik “Create New App”.
4. Ikuti langkah berikutnya dan masukkan alamat blog di “App Domain”.
5. Masukkan juga alamat blog di bab “Select how your app integrates with Facebook”, klik “Website”, masukkan "full url" menyerupai http://Info.MaterialAPK.com
6. Klik “Save Changes”.
Catatan: Simpan ID Aplikasi Facebook Anda yang berupa angka --yang muncul sesudah tahap "Create New App". Untuk moderasi komentar yang masuk nantinya, buka saja FB Tools Comments.
LANGKAH 2
1. Template > Edit HTML
2. Copy & Paste aba-aba berikut ini di bawah kode <head>
3. Ubah YOUR_APPLICATION_ID dengan "kepunyaan" Anda yang sudah didapat di langkah pertama.
4. Copas aba-aba berikut ini di bawah kode <div class='comments' id='comments'>
2. Save Template! Beres.....!
Ganti aba-aba fb_admin warna merah dengan milik Anda. Jika tidak punya Halaman Facebook, biarkan saja aba-aba tersebut. Tidak masalah.
3. Save Template!
Demikian cara memasang kotak komentar Facebook di Blog. Semoga tidak diserbu komentar spam yang "berburu backlink" dan "promosi jualan online" ya, terutama tukang obat dan tukang judi :) Good Luck & Happy Blogging! (http://Info.MaterialAPK.com).*
1. Template > Edit HTML
2. Copy & Paste aba-aba berikut ini di bawah kode <head>
<meta property="fb:app_id" content="YOUR_APPLICATION_ID"/>
3. Ubah YOUR_APPLICATION_ID dengan "kepunyaan" Anda yang sudah didapat di langkah pertama.
4. Copas aba-aba berikut ini di bawah kode <div class='comments' id='comments'>
<b:if cond='data:post.isFirstPost'> <script>(function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; d.getElementsByTagName('head')[0].appendChild(js); }(document));</script> </b:if> <a expr:href='data:post.url + "#fb-root"'><fb:comments-count expr:href='data:post.canonicalUrl'/> comments</a>
<b:if cond='data:blog.pageType == "item"'> <div id='fb-root'/> <script>(function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; d.getElementsByTagName('head')[0].appendChild(js); }(document));</script> <div style='margin: 20px 0 0 0;'><fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='600'/></div> </b:if>
<b:if cond='data:blog.pageType == "item"'> <div id='fb-root'/> <script>(function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; d.getElementsByTagName('head')[0].appendChild(js); }(document));</script> <div style='margin: 20px 0 0 0;'><fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='600'/></div> </b:if>
2. Save Template! Beres.....!
Cara Memasang Tab Komentar Facebook & Blogger
Yang dimaksud tab komentar FB dan Blogger yakni menyerupai gambar berikut ini. CB sudah coba dan berhasil. Ini buktinya:
Gambar di atas mengatakan dua tab komentar: Facebook dan Blogger. Pengunjung sanggup pilih, mau gunakan akun yang mana untuk komentar.
CARA MEMASANG
Cara menciptakan tab komen fb dan blogger gampang banget.
1. Template > Edit HTML
2. Copas aba-aba berikut ini di bawah kode <div class='comments' id='comments'>
CARA MEMASANG
Cara menciptakan tab komen fb dan blogger gampang banget.
1. Template > Edit HTML
2. Copas aba-aba berikut ini 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='2' width='400'/></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='ID Facebook 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><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>
<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) {$(".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>
Ganti aba-aba fb_admin warna merah dengan milik Anda. Jika tidak punya Halaman Facebook, biarkan saja aba-aba tersebut. Tidak masalah.
3. Save Template!
Mau Pasang Kotak Komentar Facebook, Blogger, Disqus Sekaligus?
Jika mau pasang kotak komentar facebook, blogger, dan disqus sekaligus, tiga-tiganya ada, silakan meluncur ke TKP: Cara Pasang Kolom Komentar FB, Blogger, Disqus Sekaligus.Demikian cara memasang kotak komentar Facebook di Blog. Semoga tidak diserbu komentar spam yang "berburu backlink" dan "promosi jualan online" ya, terutama tukang obat dan tukang judi :) Good Luck & Happy Blogging! (http://Info.MaterialAPK.com).*
0 Response to "Cara Pasang Kotak Komentar Facebook Di Blog Blogspot"
Post a Comment