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.
Posted by , Published at 19.19 and have
0
komentar
Tidak ada komentar:
Posting Komentar