Langkah Membuat Bar Like Rekomendasi Facebook Di Blog

Diposkan oleh Keiruchan Agatha on Senin, 19 November 2012

Markup Validation Service

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.
Markup Validation Service

3. Keluar pop up dan masukkan app name dan lainnya bisa untuk tambahan, atau bisa lihat gambar di bawah ini
Markup Validation Service

4. Setelah continue maka ada muncul kode captha, masukkan kode sama dan submite
Markup Validation Service

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.
Markup Validation Service

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.
Markup Validation Service

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 == &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><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

<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...
Share Please :

Posted by : Keiruchan Agatha ~ / Portal Media Informasi Pilihan

Markup Validation Service
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.

Baca Yang Ini Juga Boz :

{ 11 komentar... read them below or add one }

celana dalam selebriti disini ! mengatakan...

mantab langsung pasang gan...

jalupangna mengatakan...

Akhirnya ketemu juga artikel yang saya cari, trim's. :-d

Keiruchan Agatha mengatakan...

:-d

jalupangna mengatakan...

gan, ko jadi error. yang tampil cuma judul blog saya aja. gimana solusinya? http://sijalupangna.blogspot.com silahkan di cek. trim's.. 7:(

Keiruchan Agatha mengatakan...

@jalupangna:error gmn maksudnya?
tadi sudah saya kunjungi normal ko ada gambar dan judul postingannya

jalupangna mengatakan...

ko bisa gitu ya? di saya cuma hanya tampil satu postingan aja. hehe..maklum gan ya lagi belajar.

Keiruchan Agatha mengatakan...

mungkin pengaruh dari koneksi bapa atau cookiesnya
coba di hapus dulu cookies browsernya...

jalupangna mengatakan...

udah beres gan, dan 100% it works. :-d

central-lyrics mengatakan...

Berhasil mas... makasih ya...

Achmad Safii mengatakan...

gan kok gak muncul gambar ma judul postingan di blog aku .....
coba cek http://kreativitas-mu.blogspot.com
maklum masih newbie :D

citra-software mengatakan...

Makasih gan, mau dicoba nih.
mampir yah. http://citra-software.blogspot.com/

Poskan 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...

 
Markup Validation Service Markup Validation Service Markup Validation Service Markup Validation Service Markup Validation Service