Tuesday 30 April 2013

Cara Pasang Rekomendasi Bar Terbaru di Blog

Untuk memasang Rekomendasi Bar Facebook di Blog kita diharuskan untuk membuatkan aplikasi dulu guna mendapatkan appId, untuk mendapatkannya klik dibawah ini 

Pembuatan appId

Untuk pembuatan appId klik link dibawah ini
kemudian klik +Buat Aplikasi Baru letaknya sudut atas.
Pada jendela popup silahkan sobat isikan Nama Aplikasi sesuai keinginan sobat, dan App Namespace bersifat optional boleh diisi boleh tidak. Klik Lanjutkan

anda akan diminta memasukkan kode chapca seperti gambar dibawah

jika chapca yang anda masukkan benar anda akan mendapatkan appId yang akan digunakan pada Pemasangan Rekomendasi Bar, jangan lupa dicatat dulu atau dicopas ke notepad.


Klik Simpan Perubahan di bagian paling bawah.

Pemasangan Recomendation Bar
Cari kode <body> pada edit html blog sobat lalu masukkan kode berikut dibawahnya
<div id="fb-root">
</div>
<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=###############";
  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 ############### dengan appID yang telah dibuat tadi lalu simpan template

Jika belum berhasil kita dianjurkan oleh facebook untuk menambahkan open graph metadata dibawah ini lalu masukkan dibawah kode <head>
<!--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-->