Kamis, 25 Oktober 2012

cara memasang kotak komentar facebook di blog terbaru 2012



hallo, kali ini saya akan membahas tentang bagaimana cara membuat kotak komentar pada blog,
nah, kita langsung saja ya.

1. Pertama anda masuk ke facebook developers langsung aja KLIK DISINI.
*pastikan anda sudah login ke facebook, tapi sebetulnya bagi anda yang tidak mempunyai akun facebook atau tidak login ke facebook pun bisa mendapatkan kode nya dan disini anda tidak perlu mendaftar aplikasi facebook seperti biasanya.



  • Isilah kolom URL to commnet on dengan blog/website anda.
  • Pada kolom Number of posts ganti angka sesuai keinginan anda, angka tersebut merupan jumlah komentar yang muncul di blog, apabila komentar lebih dari nominal yang di pilih maka komentar otomatis tersembunyi di bawah komentar ke terakhil, jika ingin menampilkannya anda tinggal mengklik tombol "tampilkan yang lain".
  •  Di kolom Width gantilah sesuai dengan lebar template template blog ada.
  • Color scheme ada dua pilihan: light an dark, pilih sesuai selera.
  • Terakhir tekan tombol Get Code.
maka munculah jendela seperti ini


2. Pada tab HTML 5 yang kita gunakan hanya kode yang paling bawah, sedangkan kode yang diatasnya itu diabaika sajah, kopi terlebih dahulu kode di bawah tersebut dan pastekan dahulu ke notepad.

3. selanjutnya Log in ke Blogger pilih Template lalu pilih Edit HTML lalu Pilih Lanjutkan kemudian centang Expand Template Widget (posisi di pojok kiri atas).


*ingat! backup terlebih dahulu template sebelum melanjutkan tutorial ini

4. Cari tag <body> ( gunakan ctrl + f )
5. Kemudian Kopi lalu pastekan kode di bawah ini tepat dibawah kode <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 = &quot;//connect.facebook.net/en_GB/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

maka hasilnya akan seperti ini


<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 = &quot;//connect.facebook.net/en_GB/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

6. Tahap pertama selesai lanjut ke tahap berikutnya, masih ingat langkah ke 2 yap buka notepad yang berisi kode tadi kemudian kopi lalu letakan kode tadi setelah kode

<p class='comment-footer'>
        <b:if cond='data:post.embedCommentForm'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='comment-form'/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        <b:else/>
          <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
          </b:if>
        </b:if>
      </p>
    </b:if>

atau yang mirip dengan kode diatas karena posisi komentar facebook nya berada dibawah komentar bawaan blogspot, atau anda bisa menonaktifkan komentar bawaannya dengan pilih Setelan-Pos dan komentar-lokasi komentar, lau pilih Sembunyikan.

Maka hasilnya akan seperti ini



<p class='comment-footer'>
        <b:if cond='data:post.embedCommentForm'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='comment-form'/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        <b:else/>
          <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
          </b:if>
        </b:if>
      </p>
    </b:if>

<div class="fb-comments" data-href="http://bloganda.blogspot.com" data-num-posts="5" data-width="470"></div>

PERHATIAN!!

*Yang diwarnai merah adalah kode yang di dapat dari langkah 1 dan 2
*Yang diwarnai hijau bisa anda sesuaikan lagi jika merasa perlu dirubah kembali.

7. Selasai simpan template dan lihat hasilnya.

Tidak ada komentar:

Posting Komentar