Selasa, 29 Desember 2015

Cara Mudah Membuat Kotak Komentar Facebook di Blog 2016

Langsung saja ikutin langkah-langkah di bawah ini.

1. Login Facebook Anda terlebih dahulu

2, Setelah login, klik link ini >> https://developers.facebook.com/apps <<

3. Setelah itu klik bacaan Register Now

4. Setelah muncul jendela seperti di bawah ini, klik Selanjutnya


5.  Silahkan isi nomor ponsel Anda di kotak yang tersedia. Lalu pilih yang “Send as Text“. Nanti Anda akan mendapatkan kode untuk di masukkan ke dalam kotak yang ada bacaan “Kode Konfirmasi“. Setelah mendapatkan kode tersebut, lanjut klik “Mendaftar“



6. Setelah berhasil mendaftar, tampilannya akan seperti di bawah ini. Lalu pilih Apps – Create a. New Apps


7.  Akan tampil jendela seperti gambar di bawah ini. Untuk Display Name, isilah dengan nama blog Anda. Lalu pilih Kategori – Aplikasi untuk Halaman – Buat Aplikasi


8. Jika Anda melakukannya dengan benar, maka akan muncul tampilan seperti di bawah ini. Lalu pilih Settings – pada kolom contac email, isilah dengan email Anda – lalu klik Add Platform – Pilihlah yang “WEBSITE”


9. Untuk Site Url, isikan dengan Url blog Anda. Sedangkan kotak yang di bawahnya, kosongkan saja. Lalu Save Changes


10. Setelah semuanya selesai, Anda akan mendapat kode ID FB Anda. Selengkapnya lihat gambar di bawah ini.


Capek buatnya yaa?? hahaha ^^

Langkah di atas baru membuat ID FB yang akan ditempel di blog Anda. Untuk Javascipt Kotak Komentar Facebooknya, ikutin lagi ya langkah di bawah ini. Gak banyak kok hehe..

1. Login akun blogger Anda

2. Pilih Template – Edit HTML

3. Carilah kode  ]]></b:skin> (Untuk mempermudah bisa menggunakan Ctrl + F)

4. Lalu masukkan kode di bawah ini, tepat di atas kode  ]]></b:skin>

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

5. Jika sudah cari lagi kode </head> , lalu letakkan kode di bawah ini tepat di atas kode </head>

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

6. Untuk tulisan yang saya merahkan bisa di ganti dengan ID FB yang sudah di buat tadi

7. Langkah terakhir adalah, cari kode <div class=’comments’ id=’comments’>. Biasanya kode tersebut di dalam blog tidak hanya 1, tapi ada banyak. Jadi carilah kode tersebut yang paling terakhir. Jika Anda sudah menemtukan kode tersebut yang terakhir kali, lalu letakkanlah kode di bawah ini tepat di bawah kode <div class=’comments’ id=’comments’>

<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=’5′ width=’500’/>     <div style=’color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:588px;’>Facebook Comments by  <b><a href=’http://impoint.blogspot.com/’ style=’text-decoration:underline; color:#fff;’ target=’_blank’ title=’Blogger Widgets’>Media Blogger</a></b> </div>     </b:if>     </div>     <div class=’comments comments-page’ id=’blogger-comments-page’>
8. Lalu Simpanlah Template Anda. Jika Anda melakukannya dengan benar, maka akan muncul kotak komentar facebook di blog Anda.


Baca Juga Artikel Menarik Lainnya :
Diposting oleh di
Label:

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)