:.
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>
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.<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>
- 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-->
- Simpan Template.
