0
Pasang
Diantara sekian banyak pengunjung yang datang dan ingin berkomentar di blog kita sangat mungkin diantara mereka ada yang tidak memiliki Open ID. Tentu saja kita bisa memperbolehkan 'anonymous' akan tetapi cara ini sering mengundang spam. Sebagai alternatif kita bisa memasang kolom komentar untuk akun facebook, selain bisa lebih memfilter spam juga bisa lebih mempercantik tampilan blog kita.
Ada beberapa langkah yang bisa kita lakukan untuk menambahkan plugins komentar menggunakan akun facebook kita di postingan blogger, sebagian dari cara-cara tersebut malah membuat blog kita jadi tidak enak dipandang sebab posisinya tidak proporsional. Misalnya, kolom komentar plugins facebook tersebut berada di bawah kolom komentar blogger, praktis jadi ada 2 kolom komentar kosong yang terlihat di bawah postingan kita. Kasus seperti sebetulnya karena penempatan HTML nya saja yang kurang pas. Contoh yang saya gunakan adalah seperti ini :


Dibawah ini langkah-langkah membuatnya :

A. SETTING DI FACEBOOK :
Ketahui terlebih dahulu FACEBOOK_USER_ID dan APPLICATION_ID sobat di facebook, caranya :
1. FACEBOOK_USER_ID bisa dilihat di URL https://graph.facebook.com/usernameFBSobat
2. Untuk APPLICATION_ID sobat harus buat dulu aplikasinya di facebook, caranya :
    • Masuk ke sini.
    • Register as Developer >> Centang Box "I accept the dst....." Lanjutkan >> Dibawah "Which types of apps do you plan on building?" Centang Box "Aplikasi untuk halaman" klik Lanjutkan >> Done.
    • Buat Aplikasi Baru, isi data kurang lebih seperti ini :
    • Nama Aplikasi : Plugins Komentar Nama Anda
    • App Name Space : namaandadisatukanaja
    • App Category pilih : Aplikasi untuk halaman
    • Lanjutkan >> jika ada capcay isi saja >> lanjutkan.
    • Catat App ID sobat yang diberikan disana terlebih dahulu, lalu klik simpan perubahan :

    Nah, sekarang sobat sudah mengetahui FACEBOOK_USER_ID dan APPLICATION_ID masing-masing.

    B. SETTING DI BLOGGER.
    Langsung saja langkahnya sebagai berikut, masuk ke Blogger >> Template >> Edit HTML dan masukkan kode-kode di bawah ini :
    1. Meta Tag
    Copykan kode ini di atas <b:skin><![CDATA[
    <meta property="fb:admins" content="{FACEBOOK_USER_ID}"/>
    <meta property="fb:app_id" content="{APPLICATION_ID}"/>
    2. CSS
    Tempatkan kode CSS di bawah ini tepat di atas kode ]]></b:skin>
    /* komentar facebook */
    .comments-page {}
    #blogger-comments-page {display: none;}
    .comments-tab {float:left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2; border-radius:4px;}
    .comments-tab-icon { height: 16px; width: auto; margin-right: 3px;}
    .comments-tab:hover { background-color: #eeeeee;}
    .inactive-select-tab { background-color: #d1d1d1;}
     3. Javascript
    Letakkan kode di bawah ini tepat di atas kode </head>
    <!--script komentar facebook start -->
    <script src='http://connect.facebook.net/id_ID/all.js#xfbml=1&amp;appId=APPLICATION_ID'/>
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <meta content='FACEBOOK_USER_ID' property='fb:admins'/>
    <script type='text/javascript'> function commentToggle(selectTab) {
    $(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
    $(selectTab).removeClass(&quot;inactive-select-tab&quot;);
    $(&quot;.comments-page&quot;).hide();
    $(selectTab + &quot;-page&quot;).show();
    }</script>
    <!--script komentar facebook end -->
    4. HTML :
    Cari kode:
    <div class='comments' id='comments'>
    Biasanya terdapat lebih dari satu kode di atas pada template blogger, jika sobat ingin agar plugin itu tampil di setiap halaman silahkan simpan kode HTML di bawah ini tepat di bawah kode-kode tersebut.
    <!-- HMTL komentar facebook start -->
    <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
    <img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
    <fb:comments-count expr:href='data:post.url'/> Comments
    </div>
    <div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
    <img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
    </div>
    <div class='clear'/>
    </div>
    <div class='comments-page' id='fb-comments-page'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='fb-root'/>
    <fb:comments expr:href='data:post.url' num_posts='4' width='500'/>
    </b:if>
    </div>
    <div class='comments comments-page' id='blogger-comments-page'>
    <!--HTML komentar facebook end -->
    Catatan :
    • Nilai 500 di atas adalah lebar kolom komentar yang bisa sobat sesuaikan sendiri berdasarkan kebutuhan.
    • Ganti semua tulisan FACEBOOK_USER_ID dan APPLICATION_ID dengan User & App ID sobat sendiri.
    • Preview terlebih dahulu lalu save.
    Sekarang di bawah postingan blog sobat akan terdapat kolom untuk pengunjung berkomentar menggunakan akun facebook mereka. Sedangkan sobat sendiri akan melihat Link "Pandangan Moderator" dan icon pengaturan komentar seperti pada contoh gambar blog saya di atas. Sebagai Moderator, sobat juga bisa mengatur komentar para facebooker di blog disini.
    Regards.

    Posting Komentar Blogger Disqus

     
    Top