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 :
- Sebelumnya kalian terlebih dahulu membuat aplikasi di developer facebook, masuk di sini
- Pilih Create new app biasanya berada di atas kanan.
- Keluar pop up dan masukkan app name dan lainnya bisa untuk tambahan, atau bisa lihat gambar di bawah ini
- Setelah continue maka ada muncul kode captha, masukkan kode sama dan submite
- Setelah itu kalian akan masuk di ruang edit aplikasi, dan seperti contoh di bawah ini, masukkan alamat blog kalian, untuk alamat http://www.itsasak.blogspot.com hanyalah sebagai contoh.
- 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
<html xmlns:fb='http://ogp.me/ns/fb#'
4. Setelah itu cari kode <body>, dan masukkan kode di bawah ini tempat di bawah kode yang telah kalian cari
<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.itsasak.blogspot.com' trigger='40%'/></div>
</b:if></b:if>
keterangan : untuk yang berwarna merah adalah App ID kalian, untuk berwarna biru adalah alamat blog kalian.
5. Simpan Template
Lihat hasilnya, kadang harus menunggu beberapa jam untuk jadi jika masih belum terlihat tampilannya,
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'/>
Thanks to http://republicofnote.blogspot.com
Tidak ada komentar:
Posting Komentar