Fitur ini saya dapatkan dan saya lihat dari beberapa blog yang pernah
saya kunjungi, maka dari itu saya ingin tahu dan ingin menerapkannya
juga, dengan begitu tutorial ini saya saya buat untuk blogger sekalian.
Dalam pembuatan bar rekomendasi yang di butuhkan adalah kalian harus
membuat seuah aplikasi di Facebook, Untuk tampilan barnya seperti pada
gambar di atas, bar akan muncul hanya di setiap posting dan berada di
kanan bawah.
Untuk membuat Bar rekomendasi facebook tidak begitu sulit, ikuti langkah-langkahnya
di bawah ini :
1. Sebelumnya kalian terlebih dahulu membuat aplikasi di developer facebook, masuk di sini
2. Pilih Create new app biasanya berada di atas kanan.Lihat gambar diatas.
3. Keluar pop up dan masukkan app name dan lainnya bisa untuk tambahan, atau bisa lihat gambar di bawah ini :
4. Setelah Lanjutkan maka ada muncul kode captha, masukkan kode sama dan submite
5. Setelah itu kalian akan masuk di ruang edit aplikasi, dan seperti
contoh di bawah ini, masukkan alamat blog kalian,
6. Setelah selesai dan menyimpan perubahan, lihatlah App ID, seperti
contoh di bawah ini, nanti App ID itu akan di gunakan untuk membuat bar
rekomendasi facebook.
Selanjutnya yang akan di lakukan
adalah membuat bar rekomendasi facebook di blog, maka kalian harus login
terlebih dahulu di blogger. Saya pastikan kalian sudah masuk/login di
blogger, maka selanjutnya ikuti langkah di bawah ini :
1. Masuk rancangan
2. Pilih Edit HTML, sebelum melakukan editing saya harap kalian untuk backup templatenya
3. Cari kode <html masukkan kode di bawah ini setelah kode <html, maka hasilnya seperti pada kode di bawah ini
<html xmlns:fb='http://ogp.me/ns/fb#'
4. Setelah itu cari kode <body>, dan masukkan kode di bawah ini tempat di bawah kode yang telah kalian cari
<div id='fb-root'/>
<script>
//Facebook Recommendation bar
//<![CDATA[
(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=1234567890";
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;'>
<fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='10' side='right' site='http://facebookomputer.blogspot.com/' trigger='40%'/></div>
</b:if></b:if>
<script>
//Facebook Recommendation bar
//<![CDATA[
(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=1234567890";
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;'>
<fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='10' side='right' site='http://facebookomputer.blogspot.com/' trigger='40%'/></div>
</b:if></b:if>
untuk yang berwarna merah adalah App ID kalian, untuk berwarna hijau adalah alamat blog kalian.
5. Simpan Template
Lihat hasilnya,
Tidak ada komentar:
Posting Komentar
Jika anda ingin bertanya atau minta coding atau kode html,kirim alamt blog anda kesini ntar kami paste di kotak komentar anda....