Senin, 06 Agustus 2012

You are here : Home » KOTAK KOMENTAR » Pasang Kotak Komentar Facebook di Blog

Pasang Kotak Komentar Facebook di Blog

Memiliki tampilan komentar ala Facebook di blog memang menjadi daya tarik tersendiri, jika Agan berminat mencobanya, berikut ini prosedurnya. Cukup memakan waktu sekitar 15 menitan.

1. Pada halaman Ikhtisar, pilih "Setelan".
__Pada submenu "Komentar" pilih "Sembunyikan". Lalu "Simpan Setelan".

2. Sekarang, buka akun Facebook Agan. Jangan Facebook pacarnya
__Jika sudah, masuk ke sini.
__Klik bacaan "Create new app"

3. Isilah kolom yang di sediakan.

* App name : Isi dengan nama blog Agan
* App name space : Kosongkan saja
* Web Hosting : Beri centang.

Klik Lanjutkan. Isi kode verifikasi.

4. Sampai sini, coba lihat App ID milik Agan. Yang isinya sederetan angka-angka.

Contoh : App ID: 426000424119317

5.  Sekarang masuk ke blog Agan.
__Masuk ke Template. Klik "Edit HTML"
__Pilih Lanjutkan. Beri centang EXPAND TEMPLATE WIDGET.

6. Carilah kode ini. <body>
__Gunakan CTRL F untuk memudahkan pencarian.

Jika kode di atas tidak ada, carilah kode seperti ini. Tidak harus sama persis.

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Nah, jika adanya kode itu, hapus bagian yang berwarna merah hingga menjadi <body> saja.

7. Tambahkan kode berikut ini di bawah kode <body> tadi.

<div id='fb-root'/>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId  : &#39;426000424119317&#39;,
      status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the   session
      xfbml  : true  // parse XFBML
    });
  };

    (function() {
    var e = document.createElement(&#39;script&#39;);
      e.src = document.location.protocol +   &#39;//connect.facebook.net/en_US/all.js&#39;;
    e.async = true;
      document.getElementById(&#39;fb-root&#39;).appendChild(e);
    }());
</script>

8. Ganti angka-angka yang berwarna kuning dengan No.App Id milik Agan tadi. Coba baca ulang langkah no. 4.

9. Lalu, cari lagi kode berikut ini </head>.
__Gunakan CTRL F untuk memudahkan pencarian.

10. Tambahkan kode berikut ini di atas kode </head> tadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta content='nama blog Agan' property='og:site_name'/>
<meta content='426000424119317' property='fb:app_id'/>
<meta content='id facebook Agan' property='fb:admins'/>
<meta content='article' property='og:type'/>

Masukkan di situ nama blog Agan, app id Agan, serta id Facebook Agan.

Untuk mengetahui id Facebook Agan, coba buka profil Facebook Agan, perhatikan URLnya. Contoh nya seperti ini : https://www.facebook.com/michael.jackson

Nah, ambil michael.jackson nya saja. Pasang di kode tadi.

11. Terakhir, cari kode ini <data:post.body/>.
__Jika kode tersebut ada 2, maka sorot yang kedua saja.

12. Masukkan kode berikut ini di bawah kode <data:post.body/> tadi.

<b:if cond='data:blog.pageType == "item"'> <fb:comments expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id' width='400'/> </b:if>

Jika blog Agan memiiki background hitam, pakainya kode yang ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div><fb:comments css='http://www.fileden.com/files/2006/10/3/258652/dark_comments.css?2' expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id' simple='1' width='400'/></div><div style='background-color: #000000;border: solid 0px; font-size:14px; font-color:#000000; padding:0px;width:100%;'> </div></b:if>

13. Ganti angka 400 dengan nilai ukuran yang sesuai dengan blog Agan.

14. SIMPAN SETELAN.Buka salah satu artikel Agan untuk melihat hasilnya.

Jika ada yang tidak di mengerti, Agan bisa tanyakan lewat komentar.

1 komentar: