Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget HTML #1

Cara Memasang Facebook Recommendation Box


Facebook menyajikan banyak plugin yang bisa dimanfaatkan, seperti yang dulu pernah kita pelajari yaitu membuat recommendation bar. Sekarang kita belajar memasang yang hampir mirip, hanya saja bentuknya yang beda. Facebook recommendation box, adalah widget dari facebook yang memberikan rekomendasi atau saran kepada pembaca.

Hampir sama dengan yang ada di bar, bentuk box ini akan menampilkan list post disertai dengan thumbnailnya yang berdasarkan tingkat interaksi facebook, misalnya yang disukai teman. Ini bisa menjadi alternatif untuk memberikan lebih banyak menu ke pengunjung blog. Langsung saja, kita simak cara membuat facebook recommendation box.

Cara Memasang Facebook Recommendation Box
Langkah 1
1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Jangan lupa centang Expand Template Widget
4. Cari kode <html lalu ganti kode berikut ini:

<html xmlns:fb='http://ogp.me/ns/fb#'

4. Cari kode <head> dan taruh kode berikut di bawahnya:

<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'/>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>

5. Cari kode <body> atau jika ketemu tag <body lalu taruh kode berikut di bawah tag tersebut:

<div id="fb-root"></div>
<script>(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/id_ID/all.js#xfbml=1&appId=153370320899";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

6. Simpan Template jika sudah selesai.
7. Lalu ke halaman Tata Letak
8. Tambahkan Gadget, pilih HMTL/Java Script
9. Masukan kode berikut ini

<div class="fb-recommendations" data-site="http://kurniasepta.blogspot.com" data-action="5" data-width="250" data-height="300" data-header="true"></div>

10. Ganti yang berwarna merah dengan URL blogmu. 250 adalah lebarnya, 300 adalah tingginya dan 5 adalah jumlah post yang ditampilkan, kamu bisa mengubahnya.
11. Simpan jika sudah selesai.

Itulah tadi langkah-langkah membuat atau memasang kotak rekomendasi dari facebook. Jika kamu ingin membuatnya sendiri, bisa lihat di halaman resmi facebook plugins yang ada di sini.