Home » , » Tutorial Membuat Kotak Komentar Facebook di blog

Tutorial Membuat Kotak Komentar Facebook di blog


DEMONSTRASI
Tutorial Membuat Kotak Komentar Facebook di blog - Cara Membuat Comment Box Facebook di Blogger di bawahnya :  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.

Facebook memang sebagai Social Media sedangkan Blogger adalah Pembangun Blog dengan platform gratis. Hubungan pembuatan komentar Facebook di Blogger, bukan untuk media promosi di social media melainkan menghubungkan konektivitas antara social media tersebut dengan blog kita.



Oke cukup penjelasannya, kita akan langsung ke Inti posting ini... 

     1. Login Ke Facebook
     2. Silahkan Klick link ini http http://developers.facebook.com/apps, jika belum terdaftar /
         Register, Ya
         harus Register Terlebih dahulu.
    3. Jika sudah Register / Sudah Terdaftar, lanjut ke langkah nomer 4
    4. Lihat Screenshoot dibawah ini, Copy "App ID" tersebut.


    5. Sekarang login ke blog anda dulu.
    6. Ke Template - Edit HTML.
    7. Cari kode ]]></b:skin> ini. Untuk mempercepat hanya menekan key "CTRL + F" saja dan
        copy
        Kode tersebut lalu pastekan. Jika sudah ketemu, Copy+Pastekan kode dibawah ini
        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;}

    8. Jika sudah, lanjut ke langkah selanjutnya. Cari kode </head> tersebut. Jika sudah ketemu
        dengan
        Kode tersebut, pastekan kode dibawah ini tepat diatas kode </head> tersebut.
<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>

  • Catatan: Ganti " ID FB Anda " Dengan App ID Facebook Anda yang sudah Anda buat tadi.


    9. Karena kita akan membuatnya berdampingan dengan komentar bawaan dari blogger.
        Maka, kita perlu
        beberapa Script lagi untuk membuatnya berdampingan. Silahkan cari Kode 
        <div class='comments' id='comments' Cara pencarian nya sama seperti cara di atas
        yaitu
        dengan Menekan ( CONTROL + F ). Biasanya kode tersebut tidak hanya 1, kalau di                  dalam template anda
        terdapat lebih dari satu kode. Maka cari kode yang paling terakhir saja. Jika sudah Copy           Kode dibawah ini
        dan Pastekan tepat dibawah 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='https://fbstatic-a.akamaihd.net/rsrc.php/yl/r/H3nktOa7ZMg.ico'/>
    <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='7' width='500'/>
    <div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:588px;'>
<p><span style='float:right;font:italic 12px Arial, Sans-Serif;'> 

<a href='http://infooo-umum.blogspot.com/2014/08/tutorial-membuat-kotak-komentar.html?zx=50b491579e47952b' target='_blank'>.::Get This Widget::.</a></span></p> 
</div>
    </b:if>
    </div>
    <div class='comments comments-page' id='blogger-comments-page'>

    10. Dan langkah terakhir, Simpan Template dan Lihat blog Anda.

Demikian tutornya seputar dengan Tutorial Membuat Kotak Komentar Facebook di Blogspot 2014. Mudah tidak ? Pasti mudah dong. Semoga bermanfaat bagi anda pembaca terkait dengan posting ini.


              <<<<<<<<---Selamat Mencoba ya! Jangan Lupa Like Fanpage--->>>>>>>>
Anda sedang mencari hunian strategis dan nyaman di pusat kota jakarta? Saya sarankan untuk memilih Green Pramuka City, karena Green Pramuka City Hunian Strategis dan Nyaman di Pusat Kota. Baca ulasan review terkait dengan Green Pramuka City Hunian Strategis dan Nyaman di Pusat Kota di situs RenSEO.

1 comments:

Terima Kasih atas kunjungan dan komentarnya pada Blog ini. Thanks atas setiap Komentar, Masukkan, Saran, dan Kritik Yg dapat membangun blog ini agar lebih baik lagi kedepannya. Berkomentarlah sesuai dengan Isi Bahasan Artikel. Mohon dengan Sangat Kepada Sobat-sobat untuk tidak berkomentar Yg berbau unsur:
- Sara
- Pornografi
- No Spam !!! [Komentar menyertakan link aktif akan otomatis terdelete]
Terima Kasih atas Kunjungannya Sobat,,
Salam Sukses dari Kami !