Cara Membuat Facebook Comment di Blog - Malam semakin larut, suara jankrik terdengar seperti sedang demo, dan kopi pun mulai dingin namun mata belum redup mengiringi malam yang kelam. hehehe.. judulnya apa... kalimat pembukanya puisi.? jaka sembung naik traktor juga. Sorry om hanya sekedar implementasi bakat yang terpendam, cuabe deehh .
Baiklah, sepertinya Anda sudah tidak sabar lagi menuju TKP, namun ada beberapa poin penting yang ingin saya sampaikan kepada Anda, sebelum kita sampai ke TKP. Ada banyak postingan para blogger yang menjelaskan tentang Cara Membuat Facebook Comment di Blog, namun tidak semuanya tuntas atau falid. Hal ini disebabkan karena yang memposting artikel tentang tutorial blogger tersebut belum mempraktekkannnya. Nah..disini saya ingin menyampaikan bahwa, tutorial yang saya posting di blog ini sudah teruji, lho kok gitu..? ya iya lah.. masak ya iya dunk..
Sebelum saya memposting dan mempublikasikannya, terlebih dahulu telah saya uji, karena jika tidak sama halnya saya menyampaikan berita bohong. Namun, jika Anda gagal dan tidak berhasil, mungkin saja karena template yang Anda miliki berbeda dengan template yang saya miliki atau kegagalan Anda disebabkan oleh kekurang telitian Anda membaca setiap langkah yang saya jelaskan. Tetapi saya harapkan template yang kita miliki tata letaknya sehingga keberhasilan Anda dapat dijamin. Seperti semboyan dalam saya dalam menulis " Keberhasilan Anda adalah keberhasilan saya dan kegagalan Anda bukan menjadi tanggung jawab saya"
Hahaha.. becanda kok om.. jangan dimasukkan kedalam hati..
Ok lah sepertinya untuk kalimat pembuka sudah terlalu panjang, dan Andapun sepertinya sudah muak dengan bualan saya Kembali ke laptop...
Untuk menjaga keselamatan template Anda, sebelum mencoba trik ini saya menyarankan kepada Anda untuk mendownluad template Anda terlebih dahulu, atau bisa juga disave kedalam notepad. Jika sudah, perhatikan serta ikuti langkah langkah yang akan saya terangkan, soalnya cara membuat comment facebook ini bisa dikatakan gampang-gampang susah.
1. Masuk/login ke facebook.com
2. Kunjungi url ini: developers.facebook.com/setup
3. Isi kotak yang tersedia sbb: Lihat gambar dibawah ini
Isikan App Display Name sesuai ke ingginan, kosongkan saja App Namespacenya, dan centang pada Agreement lalu continue.
4. Klik Continue/Lanjutkan. kemudian muncul window verifikasi kata dan isikan kata yang telah diberikan.
5. Setelah itu muncul window baru berupa App ID, Lihat gambar dibawah ini:
"App id" adalah nomor aplikasi id fb Anda. Catat dan simpan nomor App id tersebut di notepad atau ms.word. ini akan diperlukan nantinya.
Alamat blog/situs harus ditambahkan ke aplikasi yang dibuat. Tanpa itu, akan muncul warning di kotak komentar blog seperti "Warning: the url --- is Unreachable". Berikut cara menambah alamat blog:
- Masuk/login ke aplikasi Anda yang tadi dibuat. Atau kunjungi link ini: https://developers.facebook.com/apps/nomor-app-id-anda/ (ganti nomor-app-id-anda dengan nomor aplikasi Anda).
- Klik Edit Settings (kanan atas)
- Pada "Select how your app integrates with Facebook" -> klik Website (paling atas)
- 4. Masukkan alamat url blog anda. Contoh, http://super-bee.blogspot.com/ (jangan lupa diakhiri dengan garis miring).
- Klik Save Changes
Jika muncul popup fb HTML, huraukan saja karena saya sudah mempersiapkannya untuk Anda.
Kembali ke Blog Anda :
1. Masuk/login ke blogger.com -> Template -> Edit HTML -> Lanjutkan -> tanda tik pada Expand Widget Template
2.Cari kode seperti dibawh ini : (tekan ctrl+f) "kode dibawah biasa berada paling atas"
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml'>
dan masukkan kode dibawah ini : (lihat kode diatas)
xmlns:fb='http://www.facebook.com/2008/fbml'
Perhatikan spasi diantara kode harus benar karena kalau tidak benar bisa error dalam dalam proses save templete nantinya.
3. Kemudian cari kode </head> ,dan letakkan kode berikut ini diatasnya
<b:if cond='data:blog.pageType == "item"'><meta expr:content='data:blog.pageTitle' property='og:title'/><meta expr:content='data:blog.url' property='og:url'/><b:else/><meta expr:content='data:blog.title' property='og:title'/><meta expr:content='data:blog.homepageUrl' property='og:url'/></b:if><meta content='NAMA BLOG ANDA' property='og:site_name'/><meta content='App ID' property='fb:app_id'/><meta content='ID Profil Anda' property='fb:admins'/><meta content='article' property='og:type'/>
PENTING: Lihat tulisan yang berwana merah...
a. Ganti tulisan NAMA BLOG ANDA sesuai nama blog/situs anda.
b. Ganti tulisan APP ID ANDA dengan nomor aplikasi id Anda yang di save ke notpad tadi.
c. Ganti ID PROFIL FB dg yang sesuai. Contoh : https://www.facebook.com/profil/100000149724303
4. Cari kode </head> seperti no 3 tadi dan letakkan kode berikut ini tepat dibawah kode </head>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'App ID Anda',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
Ganti tulisan merah dengan App ID Anda yang telah Anda simpan kedalam notepad tadi.
5. Cari kode seperti dibawah ini :
<data:post.body/>
Atau cari kode di bawah ini :
Atau cari kode di bawah ini :<div class='post-footer-line post-footer-line-1'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a></b:if>
</b:if>
6. Tambahkan kode dibawah ini tepat dibawahnya :
<b:if cond='data:blog.pageType == "item"'>
<div class='fb-comments' data-num-posts='2' data-width='450' expr:data-href='data:post.url'/>
</b:if>
Contoh : Lihat dibawah ini..
Bisa juga dengan kode modifikasi di bawah ini :title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div class='fb-comments' data-num-posts='2' data-width='450' expr:data-href='data:post.url'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<style>
.doncaprio-share-buttons
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #BBBBBB;
background-color:#F2F2F2;
-webkit-box-shadow: #B3B3B3 5px 5px 5px;
-moz-box-shadow: #B3B3B3 5px 5px 5px;
box-shadow: #B3B3B3 5px 5px 5px;
padding: 5px;
margin: 10px;
}
</style>
<p align='center'>
<div align='center' class='doncaprio-share-buttons' style='background: #f2f2f2;'><img src='http://www.doncaprio.com/wp-content/uploads/2012/08/comment.png'/><font size='6'><strong><blibk>Apakah Anda punya komentar..?</blibk></strong></font>
<br/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='450'/></div></div></p></b:if>
7. Save Template Anda.
Seperti yang saya sampaikan diatas tadi, seharusnya langkah-langkah diatas berhasil, karena saya sudah mempraktekkannya "lihat facebook comment saya". Jika Anda tidak berhasil mungkin template yang Anda miliki adalah template blogger baru, atau anda kurang teliti membaca langkah-langkah diatas
Nah, untuk fasilitas facebook untuk blog ada juga berupa like box, seperti di sidebar saya, ini juga bisa diandalkan untuk promosi blog lho.. tertarik untuk membuatnya ? Reff : http://super-bee.blogspot.com/
ConversionConversion EmoticonEmoticon