Sunday, October 19, 2014

Tips & Trick: Cara Membuat Kotak 3 Komentar (Facebook, Twitter & Blogger) di blog terbaru 2014


Assalamu'alaikum sobat-sobat semua, Alhamdulillah kita bisa jumpa laigi. ok, kali ini saya akan berbagi info tentang bagai mana membuat 3 kotak komentar (Facebook, Blogger dan Twitter) pada bawah postingan blog. Kali ini saya dapatkan infonya dari blog http://berbagi-ilmu-terlengkap.blogspot.com/ dan http://mas-andes.blogspot.com/.

Membuat komentar dengan tampilan yang menarik, akan memancing pengunjung untuk berkomentar di blog Anda. Hal ini sudah tidak menjadi hal yang baru, dan telah banyak yang memakai dengan aplikasi plugin tambahan Facebook ini. Mengapa banyak orang yang ingin membuat kotak komentar facebook di blognya? Salah satu faktor utama adalah untuk meningkatkan traffik pengunjung bagi blog mereka.


Ok. pertama sobat-sobat harus membuat aplikasi di facebook sobat dulu supaya blog sobat lebih terkonektivitas dengan facebook,. langsung saja....

  • Silahkan klik link ini : http://developers.facebook.com/apps Facebook. Maka anda akan masuk ke halaman facebook aplikasi, LALU KLIK REGISTER NOW / BUAT APPLIKASI BARUUntuk lebih lengkap nya perhatikan gambar di bawah ini :
Gambar tampilan utama untuk facebook applikasi
Gambar tampilan utama untuk facebook applikasi

  • Jika sudah nanti akan ada tampilan Form kecil, Klik angka 0 lalu pilih Mendaftar. Untuk lebih lengkap nya perhatikan gambar di bawah ini :
Gambar cara membuat aplikasi kotak komentar fb terbaru 2014
Gambar cara membuat aplikasi kotak komentar fb terbaru 2014
  • Akan muncul form Pembuatan aplikasi baru : Kolom pertama isi dengan nama website anda, kolom ke-2 kosongkan saja, dan PILIHAN KATEGORI pilih saja dengan APLIKASI UNTUK HALAMAN, laluBUAT APPLIKASIUntuk lebih lengkap nya perhatikan gambar di bawah ini :


  • Setelah anda klik mendaftar maka akan muncul kode sapta yang harus anda isi lalu pilih KIRIM.Untuk lebih lengkap nya perhatikan gambar di bawah ini :

  • Setelah itu anda sudah sampai di halaman applikasi anda. tapi tunggu dulu masih ada beberapa langkah untuk menyempurnakan halaman applikasi facebook anda. pilih PENGATURAN di halaman applikasi anda. Untuk lebih lengkap nya perhatikan gambar di bawah ini :
Gambar tampilan applikasi facebook
Gambar tampilan applikasi facebook

  • Jika sudah anda memilih pengaturan, anda lengkapi E-MAIL anda dan pilih TAMBAHKAN PLATFORMUntuk lebih lengkap nya perhatikan gambar di bawah ini :
Cara membuat kotak komentar fb di blog terbaru 2014
Cara membuat kotak komentar fb di blog terbaru 2014
  • Setelah itu pilih SITE WEB.  Untuk lebih lengkap nya perhatikan gambar di bawah ini :
Cara membuat applikasi facebook terbaru 2014
Cara membuat applikasi facebook terbaru 2014

  • Dan yang terahir : 1. isikan url situs anda, 2. kosongkan, 3. simpan perubahan, 4. simpan id applikasi anda untuk Pembuatan kotak komentar facebook di blog di tahap selanjut nya. Untuk lebih lengkap nya perhatikan gambar di bawah ini:
cara membuat kotak komentar di blogger 2014
cara membuat kotak komentar di blogger 2014

Langkah selanjutnnya adalah Menggabungkan 3 Kotak Komentar Blogger, Facebook dan Twitter 

- Untuk menggabungkan 3 kotak komentar di blog ini caranya sangat mudah tidak sesulit yang dibayangkan. Namun sebelum anda memulai untuk Menggabungkan 3 Kotak Komentar Blogger, Facebook dan Twitter ini anda harus mempunyai persiapan yang harus anda miliki, yaitu: 
  • Profile_ID (facebook) adalah Profile_ID   facebook Anda.
  • APP_ID (facebook) adalah Profile_ID dari Fans Page Anda.
  • API_Key atau Consumer Key (twitter) adalah ID dari aplikasi twitter - Buat Disini.

Sebelum memulai, jangan lupa download template lengkap terlebih dahulu untuk berjaga-jaga apabila Anda ingin mengembalikan ke template semula (keadaan sediakala atau default template). Berikut ini adalah langkah-langkah untuk memasang kotak komentar facebook dan twitter di blogger:

1. Masuk ke dashboard blogger, lalu klik Template > Edit HTML > Lanjutkan > Centang 'Expand Template Widget'.
2. Tekan tombol Ctrl+F lalu cari kode <head>
3. Tepat di bawah kode <head> Masukkan kode berikut :
<meta content='Profile_ID' property='fb:admins'/>
<meta content='
APP_ID' property='fb:app_id'/>
<script src='http://code.jquery.com/jquery-latest.pack.js'/>
<script src='http://jsblogstop.googlecode.com/svn/commentpages/jsCommentPages.js'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://jsblogstop.googlecode.com/svn/jstweetbox/v1/jsTweetBox.js'/>
<script src='http://platform.twitter.com/anywhere.js?id=
API_KEY&amp;v=1'/>
Perhatikan tulisan yang berwarna merah:
Ganti tulisan Profile_ID dengan ID profil atau username facebook anda (ID profil bisa berupa angka atau huruf). Cara mengetahui profil ID anda adalah dengan membuka halaman profil dan lihatlah pada kolom alamat browser (address bar). Contoh: alamat facebook saya adalah www.facebook.com/Istahiagi, maka ID profil Saya adalah Istahiagi.
Ganti tulisan APP_ID dengan ID Aplikasi facebook anda yang sudah anda buat sebelumnya.
Ganti tulisan API_KEY dengan API KEY atau Consumer Key dari aplikasi twitter yang sudah anda buat sebelumnya. Baca Cara Membuat Api Key Atau ID Aplikasi Di Twitter.

4. Selanjutnya, cari kode class='comments'
5. Masukkan kode berikut ini letakan tepat di bawah kode class='comments'
<div class='comments-tab' id='blogger-comments' title='Comments from Blogger'> <data:post.numComments/> 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='fb-comments' title='Comments made on Facebook'> <fb:comments-count expr:href='data:post.url'/> Komentar 
</div> 
<div class='clear'/> 
</div> 
<div class='comments-page' id='twitter-comments-page'> 
<div id='js-tweet-box'/> 
</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='20' width='500'/>
 </b:if> 
</div> 
<div class='comments comments-page' id='blogger-comments-page'>
Perhatikan kode berwarna merah:
Anda dapat mengganti tulisan CommentsTweets dan komentar dengan keinginan anda.
Anda dapat mengganti angka 20 dengan jumlah komentar facebook  yang ingin ditampilkan.
Anda dapat mengganti angka 500 dengan ukuran lebar kotak komentar  yang anda inginkan.

6. Simpan template dan selesai sudah, sekarang anda bisa lihat hasilnya.

Demikian tutorial tentang cara Menggabungkan 3 Kotak Komentar Blogger, Facebook dan Twitter. Semoga bermanfaat dan selamat mencoba.

Comments
0 Comments

No comments:

Post a Comment

Makasih telah berkomentar