MEMBUAT KOTAK KOMENTAR FACEBOOK, TWITTER Dan BLOGGER

Sebelumnya saya ucapkan Assalamu'alaikum Wr Wb, semoga Moz's Blogger selalu dalam keadaan sehat dan sejahtera. Oke... Moz's Blogger (sobat blogger monozcore) dari yang baru bikin blog maupun yang sudah kawakan info unik kali ini tentang Cara Membuat Komentar Facebook di Blog. Oke...dech sekarang kita lanjutkan pembahasannya, manfaat memasang kotak komentar facebook selain memudahkan pengunjung untuk bisa langsung berkomentar karena biasanya kebanyakan dari pengunjung blog sudah login pada akun facebooknya, kotak komentar facebook menjadi daya tarik untuk membuat pengunjung blog semakin betah untuk berkunjung kembali ke blog sobat... Buat yang tertarik untuk memasang kotak komentar facebook silakan langsung aja ke TKP...

Penting !!! ada baiknya sobat blogger mem-backup terlebih dahulu template blog sobat untuk menghindari hal-hal yang tidak diinginkan dalam menerapkan widget ini.

Cara Pemasangan :

Buka situs Facebook Developers.

Pilih Embedded Comments yang ada pada daftar social plugins facebook pada situs Facebook Developers.

Sekarang caranya cukup mudah tinggal copy paste kode snippet facebook untuk digunakan di blog atau website. Parameter kode snippet tersebut akan dibahas nanti sekarang kita lanjut dahulu.

Buka "Tab Browser Window" baru kemudian buka situs blogger dan login ke blog sobat.

Klik "Design" kemudian klik "Edit HTML" untuk mengedit HTML template blog sobat.

Cari kode </head>, bila kamu sulit mencarinya tekan tombol Ctrl + F pada keyboard untuk membuka kotak pencarian. Pada kotak pencarian ketik </head> pada kolom pencarian yang muncul, bila sudah ketemu kamu letakkan kode berikut ini di atas kode </head>.

<!-- Facebook Comment -->
<style>
/* Comments Tab Styles*/
.comments-page {
display: none;
padding-top:0px;
}
.comments-tab {
color: #000;
float: left;
padding: 5px;
margin-right: 1px;
cursor: pointer;
font-weight: bold;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-color: #848484;
border-width: 1px;
position: relative;
z-index: 10;
}
.comments-tab img { height: 20px;  width: auto;  margin: 0px 3px;}
#blogger-comments,
#blogger-comments.js-inactive-tab:hover {
rgba(252,234,187,1)), color-stop(50%, rgba(252,205,77,1)), color-stop(51%, rgba(248,181,0,1)), color-stop(100%, rgba(251,223,147,1)));
background: -webkit-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%);
background: -o-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%);
background: -ms-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%);
background: linear-gradient(to bottom, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93', GradientType=0 );
}
#blogger-comments.js-inactive-tab {
background: rgba(204,102,0,1);
background: -moz-linear-gradient(top, rgba(204,102,0,1) 0%, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(204,102,0,1)), color-stop(50%, rgba(252,205,77,1)), color-stop(51%, rgba(248,181,0,1)), color-stop(100%, rgba(251,223,147,1)));
background: -webkit-linear-gradient(top, rgba(204,102,0,1) 0%, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%);
background: -o-linear-gradient(top, rgba(204,102,0,1) 0%, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%);
background: -ms-linear-gradient(top, rgba(204,102,0,1) 0%, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%);
background: linear-gradient(to bottom, rgba(204,102,0,1) 0%, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc6600', endColorstr='#fbdf93', GradientType=0 );
}
#twitter-comments,
#twitter-comments.js-inactive-tab:hover {
 background-color: #00A4F4;
 background-image: linear-gradient(#00A4F4, #0094D4);
 background-image: -moz-linear-gradient(#00A4F4, #0094D4);
 background-image: -webkit-linear-gradient(#00A4F4, #0094D4);
}
#twitter-comments.js-inactive-tab {
 background-color: #0094D4;
 background-image: linear-gradient(#0094D4, #0070B7);
 background-image: -moz-linear-gradient(#0094D4, #0070B7);
 background-image: -webkit-linear-gradient(#0094D4, #0070B7);
}
#fb-comments,
#fb-comments.js-inactive-tab:hover {
background: rgba(183,222,237,1);
background: -moz-linear-gradient(top, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 50%, rgba(33,180,226,1) 51%, rgba(183,222,237,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(183,222,237,1)), color-stop(50%, rgba(113,206,239,1)), color-stop(51%, rgba(33,180,226,1)), color-stop(100%, rgba(183,222,237,1)));
background: -webkit-linear-gradient(top, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 50%, rgba(33,180,226,1) 51%, rgba(183,222,237,1) 100%);
background: -o-linear-gradient(top, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 50%, rgba(33,180,226,1) 51%, rgba(183,222,237,1) 100%);
background: -ms-linear-gradient(top, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 50%, rgba(33,180,226,1) 51%, rgba(183,222,237,1) 100%);
background: linear-gradient(to bottom, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 50%, rgba(33,180,226,1) 51%, rgba(183,222,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7deed', endColorstr='#b7deed', GradientType=0 );
}
#fb-comments.js-inactive-tab {
background: rgba(59,89,152,1);
background: -moz-linear-gradient(top, rgba(59,89,152,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(59,89,152,1)), color-stop(50%, rgba(41,184,229,1)), color-stop(100%, rgba(188,224,238,1)));
background: -webkit-linear-gradient(top, rgba(59,89,152,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
background: -o-linear-gradient(top, rgba(59,89,152,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
background: -ms-linear-gradient(top, rgba(59,89,152,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
background: linear-gradient(to bottom, rgba(59,89,152,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b5998', endColorstr='#bce0ee', GradientType=0 );
}
.js-inactive-tab {
border-width: 0px;
}
</style>
<script>
var jsCommentPages = function(){
 var $activePage,
  $activeTab,
  init = function(){ 
   $(".comments-tab").each(function(){
    var $tab = $(this);
    $tab.click(selectPage)
     .addClass("js-inactive-tab");
    switch ($tab.attr("id")){
     case "blogger-comments": 
                    $tab.prepend("<img src='http://icons.iconarchive.com/icons/designbolts/seo/32/Blog-Commenting-icon.png' style='vertical-align:middle;'/>");
      break;
     case "fb-comments":
                    $tab.prepend("<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ0OEYViotG6MwH850Fuv9rUZgfMRwT2T9i-fi6xs4xpsZdU4LePx2gq76TEjoGDyaXCy26fsrZxJ3SEgJI23xVmU4l3FFhWCjExmFKqRW8qIZvC5DaWk9NN4PRPcwxYED4T8AyiFCiH8/s1600/facebook.png' style='vertical-align:middle;'/>");
      break;
     case "twitter-comments":
                    $tab.prepend("<img src='http://icons.iconarchive.com/icons/uiconstock/socialmedia/32/Twitter-icon.png' style='vertical-align:middle;'/>");
      break;
    }
    $tab = null;
   });
      
   getTweetCounts();
   
   var $default = $(".js-default-tab:first"),
    strDefault = "#blogger-comments";
   if($default.length > 0){
    strDefault = "#" + $default.attr("id");
   }
   //Set default tab and page Active
   $activeTab = $(strDefault);
   $activeTab.removeClass("js-inactive-tab");
   
   $activePage = $(strDefault + "-page");   
   $activePage.show();
  },
  getTweetCounts = function(){
     $(".js-page-tweet-count").each(
    function(){
     var $count = $(this);
     $.getJSON("http://urls.api.twitter.com/1/urls/count.json?callback=?",
         {url: $count.attr("href")},
           function(json){$count.text(json.count);$count = null;});         
    }
   );     
    },
  selectPage = function() {
   //Set old tab inactive, then set clicked tab active
     $activeTab.addClass("js-inactive-tab");
   $activeTab = $(this);
     $activeTab.removeClass("js-inactive-tab");
   
   //hide active page, then switch to page associated to clicked tab
     $activePage.hide();
     $activePage = $("#" + $activeTab.attr("id") + "-page");
     $activePage.show();
  };
   $("document").ready(init);
}();
</script>
<!-- End Facebook Comment -->

Cari kode <body>, bila kamu sulit mencarinya tekan tombol Ctrl + F pada keyboard untuk membuka kotak pencarian. Pada kotak pencarian ketik <body> pada kolom pencarian yang muncul, bila sudah ketemu kamu letakkan kode berikut ini di bawah kode <body>. Ingat apabila pada kode template blog sobat sudah ada maka kode yang di bawah ini tidak usah dipasang....
```
<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&amp;appId=198573203529943";
fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));
</script>
```

Cari kode <b:includable id='comments' var='post'>, bila kamu sulit mencarinya tekan tombol Ctrl + F pada keyboard untuk membuka kotak pencarian. Pada kotak pencarian ketik <b:includable id='comments' var='post'> pada kolom pencarian yang muncul, bila sudah ketemu kamu letakkan kode berikut ini di bawah kode <b:includable id='comments' var='post'>.

<!-- Facebook Comment -->
<div class='clear'/>
<b:if cond='data:post.allowComments'>
<div style='width:100%;margin:10px 0px 0px 0px;'>
<div class='comments-tab' id='fb-comments' title='Comments made on Facebook'>
<fb:comments-count expr:href='data:post.url'/> Comments
</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='js-default-tab comments-tab' id='blogger-comments' title='Comments from Blogger'>
<data:post.numComments/> Comments
</div>
</div>
</b:if>
<div class='clear'/>
<div class='comments' id='comments'>
<b:if cond='data:post.allowComments'>
<div class='comments comments-page' id='fb-comments-page' style='margin:0px 20px 10px 20px;'>
<fb:comments colorscheme='light' data-num-posts='10' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' notify='true' width='100%'/>
</div>
<div class='comments-page' id='twitter-comments-page' style='margin:0px 20px 10px 20px;'>
<a class='twitter-timeline' data-widget-id='735779479444815874' href='https://twitter.com/monozcore'>Loading...</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&quot;://platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
</div>
</b:if>
<div class='comments comments-page' id='blogger-comments-page' width='100%'>
<!-- End Facebook Comment -->

Catatan : Ganti data-href="http://monozcore.blogspot.com" dengan expr:data-href='data:post.url' supaya komentar facebook secara otomatis disesuaikan dengan lokasi URL postingan artikel.

Silakan sobat save template sobat dan lihat hasilnya.

Oke sobat monozcore jangan lupa meninggalkan jejak komentarnya yaa... biar postingan berikutnya semakin unik dan menarik.. happy blogging...

.: Semoga Bermanfaat :.

Header Ads Widget

MEMBUAT KOTAK KOMENTAR FACEBOOK, TWITTER Dan BLOGGER

Posted by: Monoz

Post a Comment

0 Comments

Ad Space

Most Popular

Foto HOT Virly Virginia

Foto Baby Margaretha Di Villa Margasatwa Jakarta

Chef Vindy Lee Part 1

Labels

Menu Footer Widget

Contact form

Header Ads Widget

MEMBUAT KOTAK KOMENTAR FACEBOOK, TWITTER Dan BLOGGER

Posted by: Monoz

You may like these posts

Post a Comment

0 Comments

Ad Space

Most Popular

Foto HOT Virly Virginia

Foto Baby Margaretha Di Villa Margasatwa Jakarta

Chef Vindy Lee Part 1

Labels

Menu Footer Widget

Contact form