25 April 2013

Cara menambahkan Rekomendasi Bar Facebook dengan benar versi HTML5 di blog


Beberapa hari yang lalu sobat blogger menanyakan bagaimana cara membuat rekomendasi bar facebook dengan benar di blog. Pada kesempatan kali ini, saya baru bisa posting berkenaan dengan rekomendasi bar facebook. Mohon maaf atas keterlambatan menjawab request dari sobat blogger. 

Facebook memiliki banyak plugin-plugin lain yang ditawarkan untuk para blogger dan pemilik website. Facebook merilis sebuah plugin baru bernama Rekomendasi Bar yang pada dasarnya meningkatkan page view blog anda dengan menampilkan atikel-artikel yang telah diposting dan direkomendasikan untuk pembaca (visitor), setelah pembaca telah mencapai persentase tertentu dari halaman blog.

Plugin ini akan memberikan rekomendasi hanya tulisan postingan yang  disukai atau berbagi di Facebook oleh seseorang. Jumlah judul postingan yang disukai ditampilkan dibawah postingan rekomendasi bar dengan gambar kecil. Plugin Rekomendasi Bar Facebook ini memang memiliki potensi untuk meningkatkan page view blog anda dan tayangan yang mengarah ke peningkatan traffic/lalu lintas blog.

BAGAIMANA CARA MEMASANGNYA DI BLOG?

Penginstalannya mencakup 2 langkah, Pada langkah pertama kita akan mendapatkan App ID dan langkah kedua adalah menginstal plugin di Blog. Mari kita mulai...

Langkah 1 Mendapatkan App ID Facebook. 

Plugin Rekomendasi bar facebook memerlukan APP ID agar supaya bekerja dengan baik.

  • Pada kotak jendela kotak pop-up buat nama aplikasi sesuai dengan yang anda inginkan kemudian klik lanjutkan.

     
  • Masukan kode Captcha kemudian klik lanjutkan


  • Berikut Screenshoot dibawah ini setelah anda memasukan kode Captcha


  • Masukan/kopikan 15 digit nomor APP ID facebook yang ada pada gambar diatas, kemudian simpan nomor tersebut. (Langkah berikutnya nanti)
  • Pada kotak form contact email ganti dengan alamat email anda sesuai dengan alamat email facebook anda
  • Isilah pada kotak formulir Situs Web dengan masuk log facebook dengan alamat URL blog anda

Langkah 2 Memasang plugin di blog.
  • Masuk ke akun blogger -> Klik Template -> Edit HTML
  • Cari kode <body> kemudian pastekan kode berikut tepat dibawah kode  <body>

 

CATATAN:   

Ganti 15 digit nomor APP ID yang telah anda simpan, dan ganti tanda ******* Dengan APP ID anda.  

Bagaimana tentang markup open graph / open graph metadata?
ya, kita ingat hal itu. Facebook mengatakan bahwa Anda harus menyertakan markup Open Graph (open graph metadata atau meta tag) dalam template. Hal ini sebenarnya tidak wajib akan tetapi dianjurkan saja untuk menghindari kesalahan. Silahkan pastekan kode berikut setelah tag / kode <head> dan simpan template...
<!--OPEN GRAPH metadata STARTS-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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='&quot;en_US&quot;' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<!--OPEN GRAPH metadata ENDS-->

Semoga bermanfa'at and Happy Blogging..! 

3 komentar: