Tutorial Membuat Kotak Komentar Facebook dan Twitter Di Blog

Blogger pemula pasti banyak yang pusing gimana caranya bikin kotak komentar facebook. Udah bermacam cara tapi kadang gak kotak komentar tersebut tidak tampil, laman error, atau nyasar ditempat yang gak di inginkan. Iya kaaan...?
Kebanyakan tutorial yang ada pada blog manapun sebetulnya sudah memberikan cara yang benar, dari yang susah minta ampun sampai cara bikin yang praktis abiss.
Tapi kenapa ya? udah dari subuh ampe subuh lagi, teteep aja kotak komentarnya kagak keluar-keluar?
Nah, masalahnya sebenernya adalah pada penempatan kode-kode yang dikasih.Banyak diantara newbie-newbie blogger yang belum paham bahasa pemograman. Pas udah dapet kodenya, pusing mau di tempelin dimana. Sekarang saya bakal ngasih ndan-ndan semua cara yang susah tapi mudah, nah loh?
jangan banyakan mikir dah, langsung olah KTP aja, eh TKP.. hahaha..

(ini tutorial khusus newbie)

Tahap pertama
~Login dulu diblogger, biar ntar gak susah lagi.

~Buka Blognya terus pilih Template, ampe sono klik edit html
jangan lupa centang Expand Template Widgetnya ya, ntar brabe lho urusannya.

~Ampe situ biarin aja dulu, buka tab baru.

Tahap Kedua
Ndan semua pasti punya facebook bukan?
~Login dulu facebooknya, Klik Profilnya ndand(PENTING!)
~Terus bikin lagi tab baru lalu masukkan url developers.facebook.com/setup/
~ Isi kotak yang tersedia

1. App Display Name: Contoh
2. App Namespace: contohcontoh (minimal 7 karakter tanpa spasi)
3. Tanda tik pada "I Agree.."
4. Klik Continue
5. Isi verifikasi kata
6. Klik Submit.
Selesai.

~ Setelah itu ndan bakal dapet APP ID dari facebook, salin ke notepad dulu app idnya itu ya

~ Kita lanjut dengan klik tombol continue, dan ndan bakal menjumpai laman beranda aplikasi.
klik "sunting pengaturan" entar ndan dituntun ke halaman tempat memasukkan url blognya ndan.
ni saya kaih gambarnya

*centang aja yang websitenya dan copas url blog ndan disitu, yang laen jangan digubris.

~Terus klik simpan perubahan

Nah kita terus ke tahap selanjutnya

Tahap Ketiga

Ini kalo mau bikin kolom tweet pada blog (mendapatkan ID app twitter)
~ login dulu twetter nya ndan, (kalo belum punya akun, silahkan daftar dulu)
~ masuk kehalaman developer twitter ato klik aja http://dev.twitter.com/apps/new
~ isi data nama aplikasi nya

gambar

*centang saya setuju
*masukkan kode Captcha nya
*lalu tekan tombol create

~ Sekarang, kamu bakal ada halaman app kamu..
*Salin ke notepad Consumer Key nya, karena itu adalah APP ID Twitter kamu

*Oya, jangan lupa singgah ke Setting untuk ganti Acces levelnya menjadi Read and Write, karena kalau tidak dicentang, biasanya komentar tweetnya jadi error.

~ Terakhir, klik Update this system application setting
Selesai deh..

Tahap Keempat

~ Sekarang balik ke halamat blognya ndan yang ditahap pertama tadi.

Liat di yang paling atas, Masukkan kode ini diatas <head> (sisipkan diantara ....>)

xmlns:fb='http://www.facebook.com/2008/fbml'

contoh :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml'>
<head>

~ Masukan kode berikut tepat diatas kode <b:skin><![CDATA[/* (tekan CTRL+F untuk mencari)

<meta content='NAMA BLOG/FANPAGE' property='og:site_name'/>
<meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/>
<meta content='APP ID' property='fb:app_id'/>
<meta content='PROFIL ID' property='fb:admins'/>
<meta content='article' property='og:type'/>

<script src='http://code.jquery.com/jquery-latest.pack.js'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://jsblogstop.googlecode.com/svn/commentpages/jsCommentPages.js'/>
<script src='http://jsblogstop.googlecode.com/svn/jstweetbox/v1/jsTweetBox.js'/>
<script src='http://platform.twitter.com/anywhere.js?id=ID APP TWITTERw&v=1'/>

Ket :
Merah = Ganti disitu nama blog ato fanpagenya ndan

Biru = Ganti dengan app id facebook yang ndan bikin tadi

Hijau = Isi ama id facebook ndan sendiri
-Cara dapatin idnya = buka profil fbnya, trus ganti link www.facebook.com/nama profil dengan graph.facebook.com/nama profil *cuman ganti www nya ama graph.

Pink = Ganti ama App Id Twitter yang ndan bikin tadi

~ Lanjuut
Masukkan Kode Rooting Facebook ini TEPAT dibawah <body>

<div id='fb-root'/>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId : 'APP ID',
      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('script');
      e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
    e.async = true;
      document.getElementById('fb-root').appendChild(e);
    }());
<fb:comments/>
</script>

Ket : Biru = isi dengan APP ID facebook

~ Langkah Terakir Masukkan kode ini dibawah
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
*Hapus aja isi awalnya sampai diatas <b:if cond='data:post.commentPagingRequired'> ganti baru dengan ini :

<div class='js-default-tab comments-tab' id='fb-comments' title='Comments made on Facebook'>
<fb:comments-count expr:href='data:post.url'/> Komentar
</div>

<div class='comments-tab' id='twitter-comments' title='Comments with Twitter'>
<span class='js-page-tweet-count' expr:href='data:post.url'/> Tweets
</div>

<div class='comments-tab' id='blogger-comments' title='Comments from Blogger'>
<data:post.numComments/> Comments
</div><div class='clear'/>
</div>

<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='5' width='600'/>
</b:if>
</div>

<div class='comments-page' id='twitter-comments-page'>
<div id='js-tweet-box'/>
</div>

<div class='comments comments-page' id='blogger-comments-page'>

    <a name='comments'/>
    <b:if cond='data:post.allowComments'>
      <h4>
        <b:if cond='data:post.numComments == 1'>
          1 <data:commentLabel/>:
        <b:else/>
          <data:post.numComments/> <data:commentLabelPlural/>:
        </b:if>
      </h4>

Ket :
Ungu = terserah mo bikin judul gimana
Biru = berapa kolom komentar yang mau ditampilin
Merah = Panjang kotak komentar fb (terserah anda)

contoh peletakkan

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>

<div class='js-default-tab comments-tab' id='fb-comments' title='Comments made on Facebook'>
<fb:comments-count expr:href='data:post.url'/> Komentar
</div>

<div class='comments-tab' id='twitter-comments' title='Comments with Twitter'>
<span class='js-page-tweet-count' expr:href='data:post.url'/> Tweets
</div>

<div class='comments-tab' id='blogger-comments' title='Comments from Blogger'>
<data:post.numComments/> Comments
</div><div class='clear'/>
</div>

<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='5' width='600'/>
</b:if>
</div>

<div class='comments-page' id='twitter-comments-page'>
<div id='js-tweet-box'/>
</div>

<div class='comments comments-page' id='blogger-comments-page'>

    <a name='comments'/>
    <b:if cond='data:post.allowComments'>
      <h4>
        <b:if cond='data:post.numComments == 1'>
          1 <data:commentLabel/>:
        <b:else/>
          <data:post.numComments/> <data:commentLabelPlural/>:
        </b:if>
      </h4>

      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <a expr:class

Dan sekarang liat perubahan pada blog anda.
Kalo masih belom mengerti, silahkan tuliskan komentar.

PENTING!!
@kasih jarak diatas dan dibawah kode asli untuk memasukkan kode, kasih enter 2x baru paste kodenya ya.. penting soalnya ntar kalo udah gak pake lebih mudah buat menghapus kode tersebut.

@apabila sudah pernah mencoba sebelumnya, hapus dulu semua kode yang udah dimasukin sebelumnya tersebut, ini sangat sangat sangat penting, karena hal inilah yang membuat pagenya error ato gak keliatan hasilnya, ini disebabkan oleh adanya kode yang sama.

@sering liat pratinjau, kalau tidak ada peringatan page error, simpan dan liat hasilnya sebelum memasukkan kode html yang selanjutnya..

@gunakan Cntrl+F untuk mencari kode kode peletakan nya

Dah itu aja, SEKIAN
Selamat menikmati

Ikuti @CeritaCiiJail

Tutorial Membuat Kotak Komentar Facebook dan Twitter Di Blog

03 March 2013

1 komentar:

Top 5 Minggu Ini

Artikel Terbaru

Labels

Partnership

Cerita Cii Jail Untuk Smartphone