Langkah Membuat Bar Like Rekomendasi Facebook di Blog - Di kesempatan hari ini saya membuat posting mengenai topik facebook.
Fitur ini saya dapatkan dan saya lihat dari beberapa blog yang pernah saya kunjungi, maka dari itu saya ingin tahu dan ingin menerapkannya juga, dengan begitu tutorial ini saya saya buat untuk blogger sekalian.
Dalam pembuatan bar rekomendasi yang di butuhkan adalah kalian harus membuat seuah aplikasi di Facebook, Untuk tampilan barnya seperti pada gambar di atas, bar akan muncul hanya di setiap posting dan berada di kanan bawah.
Untuk membuat Bar rekomendasi facebook tidak begitu sulit, ikuti langkah-langkahnya di bawah ini :
1. Sebelumnya kalian terlebih dahulu membuat aplikasi di developer facebook, masuk di sini
2. Pilih Create new app biasanya berada di atas kanan.
3. Keluar pop up dan masukkan app name dan lainnya bisa untuk tambahan, atau bisa lihat gambar di bawah ini
4. Setelah continue maka ada muncul kode captha, masukkan kode sama dan submite
5. Setelah itu kalian akan masuk di ruang edit aplikasi, dan seperti contoh di bawah ini, masukkan alamat blog kalian, untuk alamat http://www.republicofnote.blogspot.com hanyalah sebagai contoh.
6. Setelah selesai dan menyimpan perubahan, lihatlah App ID, seperti contoh di bawah ini, nanti App ID itu akan di gunakan untuk membuat bar rekomendasi facebook.
Maka kalian sudah selesai membuat aplikasi di facebook, selanjutnya yang akan di lakukan adalah membuat bar rekomendasi facebook di blog, maka kalian harus login terlebih dahulu di blogger. Saya pastikan kalian sudah masuk/login di blogger, maka selanjutnya ikuti langkah di bawah ini :
1. Masuk rancangan
2. Pilih Edit HTML, sebelum melakukan editing saya harap kalian untuk backup templatenya
3. Cari kode <html masukkan kode di bawah ini setelah kode <html, maka hasilnya seperti pada kode di bawah ini
4. Setelah itu cari kode <body>, dan masukkan kode di bawah ini tempat di bawah kode yang telah kalian cari
<div id='fb-root'/>
<script>
//Facebook Recommendation bar
//<![CDATA[
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=1234567890";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<b:if cond='data:blog.pageType == "item"'><b:if cond='data:blog.pageType != "static_page"'><div style='z-index:999999; position:absolute;'>
<fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='10' side='right' site='http://www.republicofnote.blogspot.com' trigger='40%'/></div>
</b:if></b:if>
<script>
//Facebook Recommendation bar
//<![CDATA[
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=1234567890";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<b:if cond='data:blog.pageType == "item"'><b:if cond='data:blog.pageType != "static_page"'><div style='z-index:999999; position:absolute;'>
<fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='10' side='right' site='http://www.republicofnote.blogspot.com' trigger='40%'/></div>
</b:if></b:if>
keterangan : untuk yang berwarna merah adalah App ID kalian, untuk berwarna hijau adalah alamat blog kalian.
5. Simpan Template
Lihat hasilnya, kadang harus menunggu beberapa jam untuk jadi jika masih belum terlihat tampilannya,
Masalah
Sejak Kebanyakan template tidak terstruktur dengan baik dan memerlukan pemasangan meta tag untuk memberitahu Facebook untuk mengambil judul halaman yang benar, thumbnail dan judul blog. Untuk melakukan hal ini cukup sisipkan kode berikut tepat di bawah tag <head> di dalam template kalian di dalam template anda
Demikian langkah membuat bar like rekomendasi facebook di blog semoga bermanfaat...
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
Demikian langkah membuat bar like rekomendasi facebook di blog semoga bermanfaat...
Posted by : Keiruchan Agatha ~ / Portal Media Informasi Pilihan
Anda telah membaca artikel Langkah Membuat Bar Like Rekomendasi Facebook Di Blog Ditulis oleh Keiruchan Agatha pada Senin, 19 November 2012. Kritik dan saran dapat disampaikan via kotak komentar. Anda diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link yang ada di bawah sebagai sumbernya. Atas perhatiannya saya ucapkan terimakasih. Salam blogger and Happy blogging.
{ 11 komentar... read them below or add one }
mantab langsung pasang gan...
Akhirnya ketemu juga artikel yang saya cari, trim's. :-d
:-d
gan, ko jadi error. yang tampil cuma judul blog saya aja. gimana solusinya? http://sijalupangna.blogspot.com silahkan di cek. trim's.. 7:(
@jalupangna:error gmn maksudnya?
tadi sudah saya kunjungi normal ko ada gambar dan judul postingannya
ko bisa gitu ya? di saya cuma hanya tampil satu postingan aja. hehe..maklum gan ya lagi belajar.
mungkin pengaruh dari koneksi bapa atau cookiesnya
coba di hapus dulu cookies browsernya...
udah beres gan, dan 100% it works. :-d
Berhasil mas... makasih ya...
gan kok gak muncul gambar ma judul postingan di blog aku .....
coba cek http://kreativitas-mu.blogspot.com
maklum masih newbie :D
Makasih gan, mau dicoba nih.
mampir yah. http://citra-software.blogspot.com/
Posting Komentar
Silahkan tinggalkan komentar anda dengan tidak meninggalkan link. Jika ada kesalahan dalam artikel ini dan jika ada saran dan kritik silahkan tulis komentar anda dibawah dengan baik dan sopan... ;)
Dan jika kedapatan link yang mati dalam penempatan software atau game harap beritahukan agar segera diperbaiki...