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... 

Tutorial Membuat Kotak Komentar Facebook di Blogspot 2014:

     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--->>>>>>>>