Home » » Mengganti Komentar Blog Dengan Komentar FB

Mengganti Komentar Blog Dengan Komentar FB

Written By Unknown on Senin, 15 April 2013 | 08.41

Belajar Blog - Beberapa hari yang lalu, saya tertarik melihat statistik pada blog saya. Dan saya terkejut ketika melihat ada beberapa trafick yang datang dari salah satu blog entah punya siapa saya lupa. Kemudian, saya mencoba untuk menelusuri asal muasal trafik pada blog tersebut dan terkejut lagi artikel saya di copas oleh blog tersebut. namun, saya sediklit lega karena blog tersebut memberikan link source yang mengerah ke beberapa sumber yang dia kopas dan salah satunya adalah blog saya.

Kemudian saya menyampaikan beberapa unek unek saya dan juga ucapan terimakasih karena beliau ternyata buklan seorang blogger pengecut karena terbukti memberikan data dari mana dia memperoleh artikel tersebut berupa live link sumber data. Saya mulai tertarik dengan salah satu comntar yang blog tersebut pasang yaitu berupa dua buah kolom komentar, satu komentar dari bawaan blogger dan satunhya lagi dari komentar FB.

Sebenarnya hal ini sudah saya ketahui cukup lama, namun saya kurang begitu tertarik karena banyak alasan dalam diri saya sendinri. Salah satu hal yang membuat saya mencoba untuk memasang pada blog saya adalah ketika saya berkomentar pada blog tersebut menggunakan komentar FB, secara otomatis komentar tersebut berada pada prifile FB saya. Dan asiknya, beberapa teman FB saya juga mulai memberikan like pada komentar tersebut. Jadi dalam hal ini, saya mengambil keputusan bahwa, ketika kita menambahkan komentar FB pada blog kita, secara otomatis akan memberikan nilai lebih dan trafick yang lebih tinggi lagi.

Dalam hal ini, saya mencoba untuk memasang komentar FB tersebut pada blog saya dan sudah berhasil saya pasang. Berikut ini cara mengganti atau menambahkan komentar FB pada blogspot.

Oke, mari kita simak satu persatu langkah pemasangannya dahulu sebelum Anda berpikiran untuk mengganti semuanya. Dalam hal ini, Anda tidak perlu menghapus kode script komentar bawaan blogger, namun cukup menonaktifkan beberapa tombol yang akan saya tulis disini. Untuk demonya silahkan Anda lihat disini.

Perhatikan baik baik step by step pemasangannya karena kita akan berurusan dengan kode dimana satu titik bisa mengakibatkan rusaknya template Anda. Jangan lupa untuk membackup terlebih dahulu untuk berjaga-jaga. Satu lagi saran saya, mungkin lebih baik lakukan dahulu pada blog dummy Anda, jika sudah work dan berhasil baru Anda pasang pada blog utama.

A. Langkah pertama seperti biasa. Masuk ke dasbord blogger Anda kemudia - pilih edit template HTML.

B. setelah itu pasang kode CSS nya terlebih dahulu dengan menambahkan kode css dibawah ini. Anda bisa memasangnya langsung tepat di atas kode ]]></b:skin>

CSS:

.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px;
cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

Note: perhatikan kode yang berwarna biru. Anda bisa menggantinya dengan warna kesukaan Anda. Itu adalah warna backgroundnya. Jika Anda bingung dengan kode warna, silahkan Anda klik disini karena kami juga mempunyai tool untuk mencari kode warna.

C. Langkah selanjutnya  adalah memasang scriptnya. Cari kode </head> dan letakkan kode dibaha ini tepat diatas kode tersebut.

Script:

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='ADMIN' property='fb:admins'/>
<meta content='APP ID' property='fb:app_id'/>
<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>
Note: Penting..  perhatikan baik baik yang ini.

1. <meta content='ADMIN' property='fb:admins'/>

ADMIN silahkan ganti dengan admiin FB Anda yang diambil dari url FB Profil Anda, contohnya
http://www.facebook.com/alexa Cukup dengan menggantinya dengan yang disorot warna merah tersebut.


2. <meta content='APP ID' property='fb:app_id'/>

Kode ini berfungsi untuk notifikasi atau pemberitahuan kepada Anda sebagi admin lewat pemberitahuan FB jika ada komentar yang masuk. Kode ini sebenarnya tidak Anda pasang juga tidak masalah karena akan tetap work pada blog Anda. APP ID silahkan diganti dengan APP ID anda sendiri. Untuk cara membuat, silahkan anda coba googling dulu. Atau akan kami ulas nanti selanjutnya.

3.  <meta content='ADMIN' property='fb:admins'/>
     <meta content='APP ID' property='fb:app_id'/>

Untuk kedua kode tersebut, agar lebih rapi, Anda bisa menempatkannya pada baris deretan metta tag pada blog Anda.

D. Selanjutnya karena kita akan menempatkan kedua komentar secara berdampingan, tambahkan kode dibawah ini tepat dibawah kode. <div class='comments' id='comments'> Biasanya ada dua kode, jadi anda harus menempatan di kedua kode tersebut.
HTML:

<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='2' width='620'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Note:
  • Perhatikan untuk kode yang berwarna biru. Angka 2 menunjukkan jumlah komentar yang akan ditampilkan pada blog Anda dan angka 620 adalah untuk lebar komentar FB tersebut. Anda bisa merubahnya sesuai dengan lebar pada postingan Anda.
  • Untuk kode yang berwarna merah, jika tepat dibawah kode tersebut saat pemasangan pada blog Anda sudah ada, silahkan kode tersebut dihapus atau tidak usah dipasang.
E. Sekarang coba Save dan lihat hasilnya.

F. Untuk menghilangkan komentar bawaan blogger, silahkan Anda masuk ke dasbord blogspot Anda pilih Setelan ----> Post komentar----> Tersemat --> Sembunyikan-->> Save.

Lebih jelasnya lihat gambar ini..





Penting untuk diperhatikan bahwa ada beberapa template yang mengalami kendala atau mengakibatkan kerusakan tampilan misalkan template Anda menggunakan "slide", karena ada script yang tabrakan. Jika dalam template Anda sudah ada script jquery nya,  ada yang harus Anda lepas salah satu script yang barusan Anda pasang yaitu script ini.

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

Ada di tutorial bagian C dimana kode tersebut telah kita pasang di atas kode </head>. Silahkan Anda hapus kode tersebut dan save lagi. Namun jika tidak ada masalah sebaiknya abaikan saja langkah ini.

Nah itulah tadi langkah demi langkah mengganti komentar Blog dengan Komentar FB. Jika Ada masalah, silahkan tinggalkan komentar dibawah ini dengan sarat, jangan live link..
Share this article :

0 komentar:

Posting Komentar

Berkomentarlah dengan baik dan relevan. No Spam.!!

Deskripsi Iklan
Deskripsi Iklan
Deskripsi Iklan
Deskripsi Iklan
Advertise Now!
 
Support : About Me | Contact Us | Privacy Policy
Copyright © 2013. Belajar Blog - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger