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 scroll mencapai 40% dari total keseluruhan scroll. Selain itu, fitur ini juga dilengkapi dengan tombol expanded/collapsed sehingga tidak akan mengganggu kenyamanan pengunjung serta dilengkapi dengan tombol like yang berada pada sudut kiri bar recommendation.
Sekarang, pada postingan ini, saya akan membahas 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.
Langkah-Langkah Penginstalan Ke Blogger
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.1. Mendapatkan Facebook App ID
- Login Facebook dan 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 lama, maka ganti dengan script tersebut dengan script yang ada di atas.
- Ganti Facebook_App_ID dengan App ID yang sebelumnya sudah anda copy
- Jangan 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.
Nice Tutorial Sob wajjib di coba nih apalagi itu valid HTMl5 ijin bookjmark dulu bro
BalasHapusHai Bro ini Kok Ada Banner di samping kiri kanan..
BalasHapusnanti blognya kena hapus google loh..
artikel nya menarik tapi penampilannya menyulitkan untuk membaca..
Makasih masukannya gan,
Hapusinfonya menarik dan sangat keren abis sob. kunjungi balik ke blog saya www.ankurniawan.blogspot.com
BalasHapusOke gan
Hapus