Cara II Membuat Komentar Facebook di Blog di Setiap Bawah Posting

Memasang Komentar Facebook di Setiap Postingan

Jika baru saja kita ngbahas Membuat Widget Diskusi berupa Komentar Facebook di Blog,kini kita penuhi janji buat ngpost Cara II Membuat Komentar Facebook di Setiap Bagian Bawah Posting Blog.

Berhubung waktu yang semakin sore,kita langsung aja ya.
Dan widget ini tidak seperti widget yang kami share di 'Membuat Widget Diskusi berupa Komentar Facebook di Blog' postingan yang lalu.

Setiap posting akan dapat memiliki komentar yang berbeda,sesuai dengan komentar yang akan diterbitkan,beda dengan widget yang kita bahas sebelum ini yang mana widget komentar facebook yang lalu akan memiliki komentar yang sama meski dalam posting yang berbeda.

Langkah dan Cara Memasang Kotak Komentar Facebook di Setiap Posting Blogger

1.Masuk ke akun blogger sobat lalu pilih Dashboard (gb.1),lalu Tata Letak (gb.2) kemudian contreng tulisan Expands Widget Templates (gb.3)


(1)


(2)


(3)

2.Setelah itu cari kode:

<div class='comments' id='comments'>

untuk mempermudah pencarian tekan Ctlr + F pada keyboard kemudian sobat letakkan kode berikut tepat diBAWAHnya:

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

3.Cari kode /* Comment atau #comments dan letakkan barisan kode css berikut ini tepat dibawahnya:

.comments-page { background-color: #f2f2f2;}
.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;}
}

4.Cari lagi kode </head> dan letakkan kode script berikut tepat diATASnya:

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='cahdonorejo' 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>

5.Simpan dan selesai :D

Ket:
Untuk cahdonorejo ganti dengan id facebook sobat,bisa angka maupun nama.Cahdonorejo ini saya ambil dari nama id dari akun facebook seperti gambar berikut:



6.Semoga berhasil ya :D

Membuat Widget Diskusi berupa Komentar Facebook di Blog

Mengganti Komentar di Blogger dengan Komentar Facebook

Mungkin minggu ini bisa dikatakan hari 'liburan terpanjang' bagi gue pribadi,secara gitu gan,gue libur hampir satu minggu penuh.

Kesempatan ini gue manfaatin buat nambah bahan posting di blog sederhana milik gue ini.
Yup! disini kita akan coba mengulas bagaimana membuat komentar di blogger seperti komentar facebook,kendati komentar facebook yang akan kita bahas ini bukanlah 'pengganti' dari komentar blogger aslinya.

Dengan kata lain,sobat masih bisa menggunakan komentar bogger yang lama jika diperlukan bahkan dari keduanya antara komentar facebook maupun kotak komentar yang disediakan oleh blogger.com sendiri dapat digunakan secara bersamaan.

Tapi gue kira hanya orang-orang tertentu yang menggunakan dari kedua widget ini secara bersamaan,mubazir bang get,hehehe

Oke,kotak komentar facebook ini bukannlah pengganti kotak komentar blogger yang asli,ini hanya merupakan widget yang sengaja facebook ciptakan dalam pengembangan dan promosi mereka.

Kelemahannya widget ini adalah,isi komentar akan sama pada setiap posting.menyebalkan.Tapi setelah posting ini nanti,akan dipublikasikan Cara II untuk membuat komentar facebook di blog dalam setiap posting.

Ingin menerapkan / memasang widget komentar facebook di blog kamu sekarang? yuk ikuti langkah yang Pelajaran Blog akan ulas berikut ini ya gan!

Langkah dan Cara Memasang Komentar Facebook di Blog

1.Sobat kunjungi:
developers.facebook.com/docs/plugins/

2.Selanjutnya pilih 'Comments' pada pilihan widget,lihat gambar:



3.Nanti akan keluar konfirmasi seperti ini,tentukan pilihan sobat sendiri dan klik 'Get Code':



4.Akan tampil dua kode script yang facebook berikan,seperti gambar dibawah ini (tanda 1 untuk kode pertama,tanda 2 untuk kode yang kedua):



5.Tugas sobat,sekarang copy kode yang pertama,seperti gambar ini:



6.Setelah itu,masuk ke akun blogger sobat lalu pilih Dashboard (gb.1),lalu Tata Letak (gb.2) kemudian contreng tulisan Expands Widget Templates (gb.3)


(1)


(2)


(3)

Setelah itu cari kode <body> gunakan Ctrl+F pada keyboard untuk mempermudah pencarian,setelah sobat menemukan kode <body> paste-kan atau letakkan persis diBAWAHnya kode pertama yang berhasil kita copy dari facebook tadi,seperti ini:

7.Jika kita sudah menerapkan kode pertama,sekarang kita copy kode kedua,lihat gambar ini:



8.Setelah sobat berhasil copy kode kedua ini,pilih Tata Letak / Rancangan,dan klik tulisan Add New Widget atau Tambah Gadget,





Selanjutnya pilih HTML/Javascript kemudian letakkan kode kedua yang tersebut diatas tadi.

10.Setelah sobat melakukan atau memberikan komentar di widget facebook comments for blogger ini akan tampil di profil facebook sobat seperti ini:

Cara Pasang Tombol Like Setiap Posting-an (Google Plus,Facebook,Twitter,Addthis)

Cara Memasang Like / Share Button di Setiap Postingan Blogger

Hi Hallo guys,ketemu lagi ya,dah lama banget kayanya ga sharing seputar blogging ya,hihihi.

Ada info baru sob,kenapa baru? ya,karena sebagian blogger ada yang belum mengetahui 'bagaimana memasang tombol like atau share di setiap posting blog'.Karena beberapa hari kemarin ada yang mengirim via email sebagian tutorial hanya memaparkan tombol like untuk halaman blog utama saja.
Sedangkan untuk setiap posting tidak dapat dishare terutama untuk Google Plus dan Facebook.

Seperti yang sobat dapat lihat pada gambar diatas,yup! tombol share / icon like facebook,twitter,google plus bahkan addthis dapat kita pasang pada setiap posting blog secara otomatis.Kelebihannya tentu sobat tidak perlu repot mengcopy url setiap postingan untuk dibagikan di facebook,twitter,google+ dan yang lain.

Ok! langsung saja ya,silakan sobat ikuti langkah-langkah dalam cara memasang tombol like facebook,google +,twitter,addthis,dll dalam setiap postingan berikut ini:

Langkah dan Cara Pasang Like Button / Icon Social Network Directories

Pertama langkahnya seperti biasanya ya hanya pilih Dashboard (gb.1),lalu Tata Letak (gb.2) kemudian contreng tulisan Expands Widget Templates (gb.3).

(1)


(2)


(3)

Setelah itu cari kode </head> gunakan Ctrl+F pada keyboard untuk mempermudah pencarian,setelah sobat menemukan kode </head> letakkan persis diATASnya kode script berikut:

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'>
{lang: &#39;en-US&#39;}
</script>

**script tersebut diatas dipasang jika sobat ingin juga menampilkan google plus share button

Kemudian langkah selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p>

Setelah sobat menemukan kode tersebut,

-jika sobat INGIN MENAMPILKANNYA DI BAWAH POSTINGAN maka sobat letakkan kodenya nanti diBAWAH kode <data:post.body/> atau <p><data:post.body/></p>.

-jika sobat INGIN MENAMPILKANNYA DI ATAS POSTINGAN maka sobat letakkan kodenya nanti diATAS kode <data:post.body/> atau <p><data:post.body/></p>.

Nah,kode yang harus sobat letakkan adalah sebagai berikut:

<b>Bagikan posting ini di:</b><br/>
<tbody><tr><td><iframe allowtransparency='true' class='twitter-share-button twitter-count-horizontal' frameborder='0' scrolling='no' src='http://platform.twitter.com/widgets/tweet_button.1337330192.html#_=1337861351239&amp;count=horizontal&amp;id=twitter-widget-0&amp;lang=en&amp;original_referer=http%3A%2F%2F#%2F;url=http%3A%2F%2F#%2F' style='width: 110px; height: 20px;' title='Twitter Tweet Button'/>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td><td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/></td>
<td><g:plusone expr:href='data:post.url' size='medium'/></td><td><div class='addthis_toolbox addthis_default_style '><a class='addthis_counter addthis_pill_style addthis_nonzero' href='#' style='display: block;'><a class='atc_s addthis_button_compact'><span/></a></a><div class='atclear'/></div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/></td></tr></tbody></table></div>
<br/>

Simpan Template sobat dan lihat setiap posting sobat :D Good Luck ya! :D