Beberapa waktu yang lalu, Facebook telah merilis sebuah Plugin yang bernama Bar Recommendation untuk blogger/website yang pada dasarnya bertujuan untuk meningkatkan jumlah pageviews halaman blog/web
dengan cara merekomendasikan artikel-artikel kepada pengunjung. Artikel
dimaksudkan disini adalah artikel yang mempunyai persentase tertentu
beserta jumlah like / suka minimal 1 (satu).
Plugin bar rekomendasi ini menampilkan image thumbnail berukuran kecil
dan diikuti oleh judul postingan dan akan muncul setiap saat pada saat
pengunjung membuka salah satu artikel yang ada pada blog/web. Selain
itu, fitur ini juga dilengkapi dengan tombol expanded/collapsed sehingga
tidak akan mengganggu kenyamanan visitors dan juga dilengkapi dengan
tombol like yang berada pada sudut kiri bar recommendation tersebut.
Nah, sekarang, pada kesempatan yang berbahagia ini, saya akan
menjelaskan tentang bagaimana cara membuat dan memasang plugin Bar
Recommended Facebook Versi
HTML5 dan bukan versi XFBML dan pada versi ini juga tidak didukung oleh Iframe.
Cara Membuat dan Memasang...!!!
Terdapat 2 (dua) tahap yang akan dilakukan dalam pembuatan dan
pemasangan plugin ini, yang pertama proses untuk mendapatkan Facebook
App ID dan yang kedua adalah langkah penginstallan pada blogger.
Perhatikan dengan seksama langkah-langkah di bawah ini :
1. Cara Mendapatkan Facebook App ID
- Biasanya, jika sesuatu hal berhubungan dengan Facebook, pasti anda harus dalam keadaan Login.
- Setelah Proses Login Facebook selesai, buka Apps Facebook
- Pada sudut kanan atas, klik "+Create New App"
- Pada box popup, isi nama aplikasi yang anda inginkan (lihat gambar di bawah) kemudian lanjutkan dengan mengklik tombol "Continue"
- Selanjutnya, masukkan kode captcha dan klik "Submit"
- Pada tahap selanjutnya, anda akan diarahkan halaman basic. Lihat gambar di bawah ini untuk lebih jelasnya.
[Klik gambar untuk memperbesar]
Keterangan :
- Copy app id tersebut ke notepad atau dimana saja karena app id
tersebut yang nantinya akan digunakan pada tahap menginstall plugin ke
blogger
- Masukkan email anda
- Masukkan URL alamat blog/website anda
- Lanjutkan dengan mengklik tombol "Simpan / Save"
2. Menginstall Plugin ke Blogger
- Login ke Blogger
- Pada menu Dashboard, pilih Template › Edit HTML › Proceed
- Copy kode di bawah ini dan letakkan tepat di bawah tag <body>
<div id="fb-root"/><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/en_US/all.js#xfbml=1&appId=Facebook_App_ID"; 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;'>
<div class="fb-recommendations-bar" data-trigger="40%"
data-read_time="10" data-action="like" data-side="right"
expr:data-site="data:blog.homepageUrl"
data-num_recommendations="3"></div>
</div>
</b:if>
</b:if>
NB : Jika di dalam template anda
sudah terdapat script yang saya tandai dengan warna biru, maka ganti
dengan script tersebut dengan script yang ada di atas.
- Ganti Facebook_App_ID dengan App ID yang sebelumnya sudah anda copy
- Jangan klik simpan dulu, tetapi lanjutkan dengan mengcopy "Open Graph" facebook di bawah ini tepat di bawah tag <head>
<!--OPEN GRAPH metadata STARTS-->
<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content='"en_US"' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<!--OPEN GRAPH metadata ENDS-->
