Pages

DonkeyMails.com: No Minimum Payout
Server : Channel :
Use List | DalNet Commands (Open) | Help

Tuesday, March 27, 2012

Cara Membuat Kotak Komentar Blog & Facebook


Salah satu bagian elemen terpenting dari suatu blog adalah kotak komentar blog. Dengan adanya kotak komentar blog kita akan bisa mengetahui tanggapan, kritikan ataupun komentar dari pengunjung tentang konten suatu blog yang sedang di lihat. Selain itu komentar dari pengunjung bisa meningkatkan kredibilitas suatu blog, semakin banyak komentar semakin baik kredibilitas konten dan pengelolaan blog... Nahh untuk menarik minat pengunjung blog supaya mau berkomentar di postingan artikel sobat, silakan di simak tips & triknya....

Terkadang tidak mudah untuk mendapatkan komentar dari pengunjung blog, hal ini bisa disebabkan oleh beberapa faktor yang menurut saya bisa berdampak mengurangi tingkat minat pengunjung untuk mau berkomentar pada postingan artikel yang di bacanya. Berikut analisa dan saran saya mengenai faktor-faktor yang bisa mengurangi minat pengunjung blog untuk mau berkomentar pada postingan artikel sobat...
  • Prosedur kotak komentar yang terlalu rumit, seperti : kode captca yang harus diisi, harus mempunyai akun google untuk bisa berkomentar, harus menjadi member atau follower terlebih dahulu, menggunakan kotak komentar pada jendela baru, dsb. Saran saya hindarkan prosedur tersebut apabila ingin mendapatkan komentar dari pengunjung biasa (bukan follower).
  • Sistim komentar blog yang kurang atraktif. Saran saya tambahkan emoticon pada sistim komentar blog dengan animasi emoticon yang unik dan menarik.
  • Kotak komentar standar bawaan blog. Saran saya gunakan trik pada postingan artikel ini untuk mempercantik dan menambah pilihan kotak komentar untuk pengunjung blog.
Apabila sobat blogger masih menggunakan prosedur sistim komentar seperti pada faktor-faktor yang saya sebutkan di atas silakan sobat rubah dulu prosedurnya supaya trik Membuat Kotak Komentar Blog & Facebook ini bisa maksimal hasilnya.

Trik ini menggunakan cara menggabungkan kotak komentar facebook dan komentar blog untuk di gunakan pada sistim komentar blog. Penggunaan komentar di pisahkan dengan cara membuat tab komentar untuk memudahkan pengunjung untuk memilih kotak komentar yang sesuai dengan apa yang pengunjung inginkan. Tab komentar dilengkapi dengan info banyaknya jumlah komentar. Contoh penggunaan kotak komentar ini seperti yang ada di blog MonozCore. Oke...bro seep-kan infonya, nahhh... sekarang kita lanjutkan ke TKP....

Cara Pemasangan :
  • Login ke blog sobat...

  • Klik "Design" kemudian klik "Edit HTML" setelah itu klik centang pada "Expand Widget Templates", seperti gambar dibawah ini.


  • Copy-paste kode berikut ini di dalam kode <Html>.

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

    Contoh :
    <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://ogp.me/ns/fb#'>

  • Pasang kode meta-tag berikut ini dan taruh di bawah kode <Html>.

    <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 expr:content='data:blog.homepageUrl' property='og:site_name'/>
    <meta content='favicon.ico' property='og:image'/>
    <meta content='App ID Facebook Sobat' property='fb:app_id'/>
    <meta content='ID Facebook Sobat disini' property='fb:admins'/>
    <meta content='article' property='og:type'/>

  • Apabila sobat belum menggunakan kode JQuery silakan copy kode JQuery berikut dan taruh di atas kode </Head> pada template blog. Jika sudah ada kode JQuery di blognya silakan lewati langkah ini.

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'/>

  • Cari kode </Head> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan paste di atas kode </Head> tersebut.

    <style>
    .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;}
    </style>
    <script type='text/javascript'>
    function commentToggle(selectTab) {
    $(".comments-tab").addClass("inactive-select-tab");
    $(selectTab).removeClass("inactive-select-tab");
    $(".comments-page").hide();
    $(selectTab + "-page").show();
    }
    </script>

  • Kunjungi situs Facebook kemudian login ke akun facebook sobat.

  • Masuk ke Facebook Developper untuk mendapatkan kode script facebook comment.

  • Klik "Get Code" untuk menampilkan kode script facebook comment.


    - Langsung klik "Get Code" saja, untuk mendapatkan parameter App ID Facebook.


    - Terlihat pada gambar di atas terdapat dua kotak kode script.

  • Copy kode script pada kotak pertama kemudian simpan sementara menggunakan notepad. Hal ini dilakukan untuk mendapatkan App ID Facebook.

    Contoh :
    <div id="fb-root"></div>
    <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 = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=198573203529943";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

    Perhatikan teks angka yang berwarna merah, teks tersebut merupakan kode untuk App ID Facebook Sobat. Gunakan angka tersebut sebagai App ID Facebook yang akan digunakan pada beberapa kode script.

  • Sekarang kita akan mengambil kode ID Facebook Sobat, caranya masuk ke akun facebook sobat kemudian lihat di kotak address bar browser yang ada di atas.

    Contoh :
    https://www.facebook.com/monozcore

    Pada teks yang berwarna merah terdapat Nama atau Angka dibelakang Alamat Facebook, itulah ID Facebook Sobat. Gunakan ID tersebut untuk digunakan sebagai kode ID Facebook.

  • Copy-paste kode di bawah ini dan taruh di bawah <Body> pada kode HTML template blog sobat.

    <div id='fb-root'/>
    <script>
    window.fbAsyncInit = function() {
    FB.init({
    appId : &#39;App ID Facebook Sobat&#39;,
    channelUrl : &#39;<data:blog.url/>&#39;,
    status : true,
    cookie : true,
    xfbml : true
    });
     // Additional initialization code here

    };
    // Load the SDK Asynchronously
    (function(d){
    var js, id = &#39;facebook-jssdk&#39;, ref = d.getElementsByTagName(&#39;script&#39;)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(&#39;script&#39;); js.id = id; js.async = true;
    js.src = &quot;//connect.facebook.net/en_US/all.js&quot;;
    ref.parentNode.insertBefore(js, ref);
    }(document));
    </script>

    Gunakan App ID Facebook yang tadi sudah sobat dapatkan.

  • Copy-paste kode di bawah ini dan taruh di bawah <div class='comments' id='comments'> atau kode yang mirip dengan kode <div class='comments' id='comments'> pada kode HTML template blog sobat.

    <div style='margin-left:20px;'>
    <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' style='vertical-align:top;'/>
    <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='https://lh4.googleusercontent.com/-hq1JcDFnlFY/T1h53RSuHqI/AAAAAAAABV0/XOyCtVQYLVU/s800/blog-icon.jpg' style='vertical-align:top;'/> <data:post.numComments/> Comments
    </div></div><div class='clear'/>
    </div>
    <div class='comments-page' id='fb-comments-page' style='margin:10px 20px 10px 20px;'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <fb:comments colorscheme='dark' data-num-posts='10' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' notify='true' width='575'/>
    </b:if>
    </div>
    <div class='comments comments-page' id='blogger-comments-page'>

    • Kode margin-left:20px; merupakan pergeseran tab dari kanan sebesar 20px.
    • Kode margin:10px 20px 10px 20px; merupakan pergesaran kotak komentar facebook dari tab komentar sebesar atas 10px, kanan 20px, bawah 10px dan kiri 20px.
    • Kode width='575' merupakan dimensi lebar kotak komentar facebook.

  • Klik "Save" dan lihat hasilnya...
Catatan :

Trik Membuat Kotak Komentar Blog & Facebook pada postingan artikel ini sudah dilengkapi dengan beberapa fitur, antara lain :
  • Banyaknya jumlah komentar yang ada pada komentar facebook dan komentar blog.
  • Menggunakan sistem Tab untuk memisahkan antara komentar facebook dengan komentar blog.
  • Pada komentar facebook dilengkapi dengan notifikasi pesan, jadi apabila ada komentar baru yang diketik melalui kotak komentar facebook bisa langsung diketahui melalui akun facebook sobat atau bisa langsung dicek di http://developers.facebook.com/tools/comments.
Wuiihh postingan artikel kali ini OKE BGT kan ??? cape bro buatnya tapi ga papa ini semua berkat semangat dan cendol sobat blogger, jadi saya akan selalu memberikan postingan artikel terbaik yang unik, menarik dan atraktif..... Jangan lupa cendolnya yaa... dan dilarang meng-copy postingan artikel ini baik sebagian maupun keseluruhan tanpa persetujuan dari pihak MonozCore... oke...sob... wassallam.
.: Semoga Bermanfaat :.
DMCAProtected by CopyscapeMyFreeCopyright.com Registered & Protected
Share :
Comments
Tweets
33 Comments

33 comments:

  1. . . kok kayaknya ruwet banget. aq dulu pake gak seruwet ini mas. tapi kalo pake ini gak bisa pake reply ya?!? mkx sekarang gak aq pake. huhh . .

    ReplyDelete
  2. maaf gan punya saya kok gak ada app id Facebook nya ya ... udah saya coba berkali kali tetep gak ada ...mohon pencerahan nya!!!

    ReplyDelete
  3. @shahrul amir: wahh... mungkin sobat belum punya aplikasi facebook. Ya udah langsung aja copy kode no.1 yang sobat dapatkan dari developer facebook di bawah <body> dan untuk kode no.2 taruh di tempat yang sobat inginkan untuk keterangan lebih lanjut pemasangan kode FB coba baca artikel http://monozcore.blogspot.com/2012/01/cara-membuat-komentar-facebook-di-blog.html

    ReplyDelete
  4. Mantap gan ..
    kunjung balik ya gan ...

    ReplyDelete
  5. Makasih atas Tutorial nya Sobat..
    Saya berhasil menggunakan nya...Boleh kah Saya MengCopy paste Tutorial Sobat ini sebagai pelengkap Tutorial yang Saya punya dengan memberikan Link ke Lapak Sobat..Klo Boleh, Saya tunggu kabar nya di lapak Saya..Salam Sukses..

    ReplyDelete
  6. @DRoni: Silakan sob, saya ijinkan.

    ReplyDelete
  7. Terima kasih Sobat...
    Artikel sobat yang ini telah saya ulas ulang di lapak Saya, ditunggu masukan sobat tentang artikel yang Saya ulas Tersebut..Sekali lagi Terima kasih..

    ReplyDelete
  8. om, punya ku kog well-formed ya
    pada edit xml, baris ke 4 kolom 2
    tolong pencerahannya ya.
    makasih :)

    ReplyDelete
  9. @faida yoyoy: sabar ya mba... nanti saya buatkan artikel terbarunya tentang komentar facebook ini supaya pemasangannya lebih mudah...

    ReplyDelete
  10. Agak ribet ya? tapi saya coba ah biar ga klasik banget komentarnya
    visit juga http://harmonikampus.blogspot.com ya
    sekalian tinggalin komentarnya
    thanks :)

    ReplyDelete
  11. Script Body punya saya gak ada gmana ne gan...

    ReplyDelete
  12. Saya mau coba mas,, join yah teman teman msh baru http://azys99.blogspot.com mkasih gan monoz

    ReplyDelete
  13. MANTAPPP gan!!http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif

    ReplyDelete
  14. bg koq masih keluar pesan ini Plugin komentar memerlukan parameter href.

    ReplyDelete
  15. @Vicahya: coba gunakan cara pemasangan versi mudah di http://monozcore.blogspot.com/2012/04/memasang-komentar-facebook-versi-mudah.html

    ReplyDelete
  16. Ribet dan mungkin saya urungkan saja dulu pemasangan widget ini...

    Haha salam BLOGGER Indonesia aja sob :)]

    ReplyDelete
  17. gak ada bagiannya di template ane Gan,wkwkwk..nice share.ane tambah gan.ciri ciri homo lengkap selengkapnya>>>

    ReplyDelete
  18. ijin copas ya sob, soalnya saya mau pasang juga di blog

    ReplyDelete
  19. @Rudy Hartono: Silakan sob... saya ijinkan jangan lupa sumbernya yaa... trims

    ReplyDelete
  20. mantap banget mas bro.. praktek langsung berhasil.. makasih..

    ReplyDelete
  21. eh kok aku gak dapat app ID pesbukku yah?

    ReplyDelete
  22. Berhasil Kk
    www.fhandikablog.com :D

    :kc:

    ReplyDelete
  23. sukses bos, tapi comment bloggernya g nongol t... napa y?

    ReplyDelete
  24. Thank's gan ats infoNya ...

    Kunjungi blog saya juga yah di sini

    ReplyDelete
  25. blog nya keren, artikelnya bagus, sayang loading nya luama...bgt..
    salam kenal aja..

    ReplyDelete
  26. info ya sudah sukses saya laksanakan terimakasih Monozcore
    blogs saya makin tambah mantap


    ReplyDelete
  27. mantap gan...tapi agak ribet..maklum masih oon nih...hihihi

    ReplyDelete
  28. Produk dijamin asli
    DINA SHOP : Barang yang Kami Tawarkan Semuanya Barang Asli Original Garansi Resmi Distributor dan Garansi TAM .
    Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
    BERMINAT HUB-SMS:0896-9198-6257 ATAU KLIK WEBSET RESMI KAMI DI http://dina-shop7.blogspot.com
    BlackBerry>Samsung>Nokia>Apple>Acer>Dell>Nikon>DLL

    SAMSUNG
    Asli Buatan Korea.
    HARGA PROMO

    Samsung Galaxy Note II N7100 Rp 2.499.000.
    Samsung Galaxy Chat B5330 Rp 1.220.000.
    Samsung GT-E1205M Rp 145.000.
    Samsung Galaxy Ace Duos S6802 Rp 1.525.000.
    Samsung I8530 Galaxy Beam Rp 4.825.000.
    Samsung Galaxy Ace 2 I8160 Rp 2.250.000.
    Samsung I9300 Galaxy S III Rp 2.800.000.
    Samsung I9070 Galaxy S Advance Rp 2.850.000.
    Samsung Galaxy mini 2 S6500 Rp 1.400.000.
    Samsung E1390 Rp 200.000.
    Samsung Galaxy Ace Plus S7500 Rp 1.850.000.
    Samsung S 5300 Galaxy Pocket Rp 850.000.
    Samsung Galaxy Y Duos S6102 Rp 1.150.000.
    Samsung C3312 Deluxe Duos Rp 500.000.
    Samsung C3520 Rp 425.000.
    Samsung E1232B Rp 200.000.
    Samsung i9250 Galaxy Nexus Rp 2.250.000.
    Samsung C3350 X Cover II Rp 750.000.
    Samsung S5610 Rp 725.000.
    Samsung C3330 Champ 2 Rp 525.000.
    Samsung I8150 Galaxy W Rp 1.950.000.
    Samsung GT-N7000 Galaxy Note Rp 1,700.000.
    Samsung E1195 Rp 225.000.
    Samsung Galaxy Y S5360 Rp 875.000.
    Samsung i509 Galaxy Y CDMA Rp 875.000.
    Samsung W139 Rp 350.000.
    Samsung E2232 Rp 350.000.
    Samsung I9100 Galaxy S II Rp 2.250.000.
    Samsung C3322 Rp 400.000.
    Samsung E1182 Rp 175.000.
    Samsung E2152 Rp 425.000.
    Samsung E2652 Champ Duos Rp 615.000.
    Samsung S3850L Corby II Rp 550.000.
    Samsung B7510 Galaxy Pro Rp 1.550.000.
    Samsung Ch@t 322 Wi-Fi Rp 500.000.
    Samsung GT-E1055T Rp 175.000.
    Samsung GT-E3210 Rp 495.000.
    Samsung I9003 Galaxy SL 4 GB Rp 1.850.000.
    Samsung Nexus S i9023 Rp 1.350.000.
    Samsung I9003 Galaxy SL 16 GB Rp 3.000.000.
    Samsung Gio S5660 Rp 1.450.000.
    Samsung Galaxy FIT S5670 Rp 1.200.000.
    Samsung Samsung F480 - Rp 550.000.
    Samsung Galaxy Mini S5570 Rp 900.000.
    Samsung B6520 Omnia PRO 5 Rp 725.000.
    Samsung S5253 Wave525 Rp 900.000.
    Samsung i8510 innov8 Rp 875.000.
    Samsung S5830 Galaxy ACE Rp 1.750.000.
    Samsung S5333 Wave533 Rp 900.000.
    Samsung C3510 Genoa - Rp 550.000.
    Samsung i900 Omnia - Rp 1.100.000.
    Samsung S5753 Wave575 Rp 1.000.000.
    Samsung I5503 Galaxy 5 Rp 825.000.
    Samsung i5510 Galaxy 551 Rp 1.250.000.
    Samsung S8530 Wave II Rp 1.750.000.
    Samsung C3303 Champ Rp 175.000.
    Samsung I9000 Galaxy S Rp 1.650.000.

    ReplyDelete