Saturday, June 30, 2012

Menambahkan Facebook Recommendations Bar kedalam Blogger

11:09 PM Hzndi 3 comments


Facebook saat ini merilis sebuah aplikasi untuk blogger yang mana bisa menambahkan pageviews halaman blog. Jika kamu menggunakan aplikasi ini tentunya bisa juga meningkatkan trafik dari blog kamu karena akan memunculkan beberapa artikel kamu yang sebelumnya di posting. Jika dilihat tampilannya seperti gambar diatas, atau kamu bisa ke mybloggertricks.com untuk demo livenya. Langsung saja yah tutorialnya, kamu perhatikan baik-baik.

Langkah 1, Buat Aplikasi Facebooknya

1. Login ke Facebook Apps menggunakan akun Facebook kamu.

2. Klik tombol "create new app" dibagian atas, kira2 tombolnya seperti gambar ini create new app 

3. Kemudian akan muncul kotak pop up, Untuk penamaan aplikasinya terserah kamu, di contoh ini namanya adalah "my recommendation bar". Contohnya seperti gambar dibawah ini 

app name
Jika tidak kelihatan, buka di halaman baru browser kamu

 
4. Masukkan kode keamanan Captchan kemudian kamu klik submit.

5. Hampir selesai nih, kamu klik saja kotak Website with Facebook Login, lalu masukkan URL alamat blog/web kamu di dalamnya. Pada contoh di bawah saya mengambil gambar dari mybloggertricks.com

Site URL
Jika tidak kelihatan, buka di halaman baru browser kamu

6. Setelah itu kamu akan melihat 2 karakter alpha-numerik, yang satu berisi App ID dan satu lagi adalah App Secret. Salin kode App ID dan simpan kode tersebut di notepad atau ms.word karena kita akan membutuhkannya nanti.

App ID
Jika tidak kelihatan, buka di halaman baru browser kamu
Langkah 2, Menambahkan Bar Rekomendasi di Blog Kamu

1. Login ke Blogger.com --> Klik Template.

2. Backup dahulu template kamu untuk mencegah hal-hal yang tidak diinginkan.

3. Di bagian template, klik Edit HTML --> Lanjutkan --> Dan kamu cari kode  

<html  

dan kamu ganti dengan kode  

<html xmlns:fb='http://ogp.me/ns/fb#'

hal ini berguna untuk menyesuaikan dengan browser Internet Explorer juga.

4. Sekarang kamu cari kode <body> selanjutnya kamu salin kode dibawah ini dan letakkan di bawah kode <body>.
    
   <div id='fb-root'/>
    <script>
    //Facebook Recommendation bar by www.mybloggertricks.com
    //Translate by www.hzndi.blogspot.com
//<![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=***************";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    //]]>
    </script>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><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://www.hzndi.blogspot.com' trigger='40%'/></div>
    </b:if></b:if>
NOTE :

- Ganti 15 digit bintang *************** berwarna biru dengan App ID yang tadi kamu simpan di notepad.
-  Ganti http://www.hzndi.blogspot.com dengan naman URL Website kamu.

5. Simpan template dan kamu tunggu beberapa detik, untuk menyesuaikan plugin yan baru saja kamu taruh. Thanks to mybloggertricks.com :))

Postingan Terkait:

Blogger
Social Bookmarking
Social Sharing

Posted in: ,,,

3 comments:

Komentarmu menunjukan kecerdasanmu, Kalau komentar cuma buat cari link buat apa ? :)

Twitter Delicious Facebook Digg Stumbleupon Favorites More