blog yang berisi berbagai macam cara ampuh

Cara Membuat Komentar Facebook Yang Keren Pada Blogspot


Kali ini saya akan memberikan tutorial cara membuat komentar facebook yang berdampingan dengan komentar bawaan bloggernya. Caranya gampang-gampang susah. Ikuti saja langkah demi langkahnya.

Catatan : Backup / download template Anda terlebih dahulu untuk mengantisipasi terjadi sesuatu yang tidak diinginkan (gagal).

Berikut cara membuatnya :

    • Pertama-tama Anda harus punya ID Aplikasi di Facebook. Kalau belum punya silahkan daftar dan buat dulu di Facebook Developers.
      • Dari halaman facebook developers, log in dahulu kemudian klik tab Apps di bagian atas. Selanjutnya klik tombol Register as a Developers di kanan atas, lalu ikuti saja petunjuknya dan isi data lengkap Anda.
      • Jika Anda sudah berhasil daftar, selanjitnya sekarang buat aplikasinya biar dapet App ID nya. Pilih Menu Apps, kemudian Create a New App. Isi form Create a New App, di situ ada Display Name, Namespace, Category, isi kan sesuai keinginan Anda. Jika sudah tinggal klik Create App.



      • Sekarang Anda sudah memiliki App ID Facebook. 


      • Lanjut ke langkah pemasangan komentar facebooknya di blog. Pertama masuk ke Blogger kemudian pilih Template kemudian Edit HTML. Jangan Lupa dibackup/download template Anda untuk mengantisipasi terjadi sesuatu yang tidak diinginkan
      • Copy kode di bawah ini lalu pastekan di bawah kode <head> atau selipkan di antara meta tag yang sudah ada di template Anda.
      <meta content='Facebook Profile ID' property='fb:admins'/>
      <meta content='App ID' property='fb:app_id'/>
      • Kemudian tinggal diganti saja Facebook Profile ID dan App ID dengan ID punya Anda. Jika ingin tahu facebook profile ID Anda, bisa di cek di findmyfacebookid.com dengan memasukkan url profile facebook Anda.
      • Selanjutnya copy kode CSS di bawah ini lalu cari kode ]]></b:skin> dan paste di atas kode ]]></b:skin>.
      .comments-page{ background:#fff;}

      #blogger-comments-page { padding: 20px; display: none;border:1px solid orange;border-radius:5px;}

      #fb-comments-page{border:1px solid blue;border-radius:5px;padding:20px;margin-top:10px;}

      .facebook-tab { float: left;cursor: pointer;margin-right:2px;border:1px
      solid #25729a; -webkit-border-radius: 3px; -moz-border-radius:
      3px;border-radius: 3px;font-family:arial, helvetica, sans-serif;
      padding: 10px 10px 10px 10px; text-shadow: -1px -1px 0
      rgba(0,0,0,0.3);font-weight:bold; text-align: center; color: #FFFFFF;
      background-color: #3093c7;

      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3093c7), color-stop(100%, #1c5a85));

      background-image: -webkit-linear-gradient(top, #3093c7, #1c5a85);

      background-image: -moz-linear-gradient(top, #3093c7, #1c5a85);

      background-image: -ms-linear-gradient(top, #3093c7, #1c5a85);

      background-image: -o-linear-gradient(top, #3093c7, #1c5a85);

      background-image: linear-gradient(top, #3093c7, #1c5a85);
      filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#3093c7, endColorstr=#1c5a85);

      }

      .facebook-tab:hover {border:1px solid #1c5675; background-color: #26759e;

      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#26759e), color-stop(100%, #133d5b));

      background-image: -webkit-linear-gradient(top, #26759e, #133d5b);

      background-image: -moz-linear-gradient(top, #26759e, #133d5b);

      background-image: -ms-linear-gradient(top, #26759e, #133d5b);

      background-image: -o-linear-gradient(top, #26759e, #133d5b);

      background-image: linear-gradient(top, #26759e, #133d5b);
      filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#26759e, endColorstr=#133d5b);

      }

      .blogger-tab {float: left;cursor: pointer;border:1px solid #ffc826;
      -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius:
      3px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px
      10px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold;
      text-align: center; color: #FFFFFF; background-color: #ffd65e;

      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffd65e), color-stop(100%, #febf04));

      background-image: -webkit-linear-gradient(top, #ffd65e, #febf04);

      background-image: -moz-linear-gradient(top, #ffd65e, #febf04);

      background-image: -ms-linear-gradient(top, #ffd65e, #febf04);

      background-image: -o-linear-gradient(top, #ffd65e, #febf04);

      background-image: linear-gradient(top, #ffd65e, #febf04);
      filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ffd65e, endColorstr=#febf04);

      }

      .blogger-tab:hover{ border:1px solid #f7b800; background-color: #ffc92b;

      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc92b), color-stop(100%, #ce9a01));

      background-image: -webkit-linear-gradient(top, #ffc92b, #ce9a01);

      background-image: -moz-linear-gradient(top, #ffc92b, #ce9a01);

      background-image: -ms-linear-gradient(top, #ffc92b, #ce9a01);

      background-image: -o-linear-gradient(top, #ffc92b, #ce9a01);

      background-image: linear-gradient(top, #ffc92b, #ce9a01);
      filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ffc92b, endColorstr=#ce9a01);

      }

      • Langkah selanjutnya copy kode Java Script di bawah ini lalu cari kode </head>  dan paste di atas kode </head>.
      <script src='https://connect.facebook.net/en_US/all.js#xfbml=1'></script>

      <script src='http://code.jquery.com/jquery-latest.js'></script>

      <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>

      • Langkah berikutnya cari kode <div class='comments' id='comments'> lalu copy kode HTML di bawah ini dan paste tepat di bawah kode <div class='comments' id='comments'>. Kode <div class='comments' id='comments'> bisa ada 2 atau 1 tergantung templatenya, jika ada 2 paste kan di bawah kedua kode tersebut. Sekedar info jika template Anda tidak menggunakan threaded comment maka tidak akan bisa.
      <div class='facebook-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Facebook Comment'>

      <fb:comments-count expr:href='data:post.url'/> Facebook Comment

      </div>

      <div class='blogger-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Blogger Comment'>

      <data:post.numComments/> Blogger Comment

      </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'/><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPY6lF5PVi0OJruaN8Dge8XgqTh7BBpe8uhNjG7ASwWoPKH82B58u-OOM3BtineDkn5hVga5Qt0QBhmQ9t7hrcQ7xAY8H0PviIUvfZapfzV-PXIevpub0MBknlh2gnLdfTkyhBevMZSPsO/s1600/facebook-icon.png'/><div align='right'><a href='http://caramantabh.blogspot.com/2014/01/cara-membuat-komentar-facebook-yang.html' target='blank'><small>Get This Facebook And Blogger
      Comment</small></a></div>

      <fb:comments expr:href='data:post.url' num_posts='5' width='500'/>

      </b:if>

      </div>

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

      <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIMGeffqk8qwNgWl-jTaKb8Rmx1ZIg1OHtIgaF3BnHIHnAJZNWba5a2M25r8_TiENqJEbJrUVLAhVR7el5RRCdAkmnfxWXJ5tNYWlSt2hUXW0EOWvAiAZxMXkrKpPxx9zapaR4HiUaBHN5/s1600/Blogger-icon.png'/>

      • Buat jumlah komentar facebook yang ingin ditampilkan, ganti angka 5 sesuai keinginan Anda dan ganti angka 500 untuk ukuran lebar komentar facebooknya sesuai dengan template Anda. 
      • Langkah terakhir, cari di bawah kode tadi kode <h4><data:post.commentLabelFull/>:</h4> kemudian hapus, jika ada 2 hapus keduanya. Jika tidak ada, tidak apa-apa. Selanjutnya jika sudah kemudian Preview template untuk memastikan tidak ada masalah, jika tidak ada masalah, Save template Anda.


      Sekarang coba di buka blog Anda dan buka salah satu postingan Anda, apa sudah ada komentar facebooknya atau belum?.. Jika suda ada, selamat berarti Anda berhasil membuat komentar facebook yang keren berdampingan dengan komentar bloggernya. Jika belum Anda, berarti Anda belum berhasil, coba ulangi lagi ikuti langkah-langkahnya.