Komentar Facebook Berdampingan di Blog

Membuat Komentar Facebook Berdampingan di Blogspot

Cara Membuat Komentar Facebook berdampingan dengan Komentar default bawaan dari Blogspot. Memang pada kesempatan kali ini kita tidak akan membahas pemrograman Visualbasic .Net, biar ada selingan tentunya, agar otak kita juga tidak merasa bosan.

Tentunya anda sudah mengetahui kalau selain Google+, Facebook juga merupakan salah satu Sosial Media ataupun Situs jejaring sosial yang banyak sekali user maupun penggunanya. Karena itulah memasang komentar facebook juga tidak ada salahnya jika memang Anda ingin agar Blogspot Anda lebih interaktif dengan pengunjung.

Artikel Lain: Combobox Tidak Bisa di Edit Visual Basic

Untuk memasang Kolom komentar Facebook berdampingan dengan Kolom komentar blogspot ini mudah sekali caranya, bagi yang berminat silakan ikuti langkah-langkah dibawah:

1. Sebelum Anda memulai, dapatkan “ID” (dalam bentuk angka) dari Facebook Anda.

2. Ketikkan saja url “http://graph.facebook.com/soni.root”, nah ganti soni.root dengan username Anda, username dapat Anda ketahui jika membuka profil Anda, setelah url utama facebook.com/username.

3. Setelah Anda dapatkan “ID” Anda, sekarang login ke akun Blogger.

4. Masuk ke Template dan Edit HTML.

5. Sekarang cari kode berikut pada template bawaan Anda “<div class=’comments’ id=’comments’>“, ingat tanpa tanda petik!, gunakan CTRL+F agar lebih cepat.

6. Setelah ketemu, pastekan kode dibawah ini dibawah kode “<div class=’comments’ id=’comments’>” tersebut.

<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=’638’/></b:if></div><div class=’comments comments-page’ id=’blogger-comments-page’><script src=’http://connect.facebook.net/en_US/all.js#xfbml=1’/><script src=’http://code.jquery.com/jquery-latest.js’/><meta content=’100000527382159′ 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><style>.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;}</style>

7. Setelah itu ganti “content=’100000527382159‘” kode yang berwarna merah dengan “ID” Facebook Anda. Save atau Simpan template dan Lihat hasilnya.

8. Anda dapat mengganti panjang kolom komentar dengan merubah ukuran pada bagian script ini [width=’638‘], sesuaikan panjangnya dengan keinginan Anda.

Mudah bukan sobat iNaVBers?. Kali ini blog Anda juga akan lebih interaktif. Tutorial berikutnya kita pasti akan kembali ke Visualbasic .Net.

Jangan lupa untuk melihat Video tutorial Cara Membuat Komentar Facebook di Blogspot yang sudah Saya praktekkan dibawah, Semoga bermanfaat.

Baca artikel sebelumnya tentang Cara Menampilkan Item di Combobox Secara Statis dan Dinamis di Visualbasic .Net.

Download Video
Download Code

 

Tags:

One Comment

  1. Pingback: Membuka aplikasi lain menggunakan excel macro

Leave a Reply

Your email address will not be published. Required fields are marked *