Cara Mudah Membuat Komentar Facebook di Blog

Cara Mudah Membuat dan Memasang Kotak Komentar Facebook Responsive di Blogspot - Memasang kolom comment facebook di blog sangatlah mudah , Karena facebook sendiri sudah menyediakan plugin comment yang dapat kita pasang di blog kita


     Tapi kali ini saya akan memodifikasi komentar facebook di blog kita menjadi responsive , sehingga pengunjung mengakses blog anda dalam bentuk apapun dapat berkomentar di blog anda menggunakan komentar facebook dengan nyaman , karena udah di modif responsive . untuk cara pembuatanya hampir sama dengan komentar facebook yang lainya kita hanya menambahkan widht menjadi ukuran 100% dan menambahkan java script agar widht 100% tadi bekerja , karena kalau tidak dikasih java script ukuran widht 100% tidak akan bekerja , ukuran widht default komen facebook menggunakan ukuran pixel ( px )



Ok langsung saja kita :
1. Pergi ke editor template, terus cari kode </head> *tekan f2 tuk lebih cepat nya
Terus masukin kode ini di bawah nya

<meta content='FB Profile ID' property='fb:admins'/> <meta content='App ID' property='fb:app_id'/>

GantiFB Profil ID dan APP ID dengan ID facebook mu.
2. Kemudian cari kode </head> pakai f2 biar cepet

<script type="text/javascript"> //<![CDATA[ $(window).bind("load resize", function(){ var url = location.protocol+'//'+
location.host+location.pathname; var containercm_width = $('#container-commentfb').width();  
$('#container-commentfb').html('<div class="fb-comments" ' + 'data-href="'+url+'"' + ' width="' + containercm_width + '" data-num-posts="10"></div>'); FB.XFBML.parse( ); }); //]]> </script>

3. Selanjutnya pasang html berikut tepat dibawah <data:post.body/> ( biasanya kode tersebut lebih dari 2 , sobat pilih aja yang terakhir atau di coba satu persatu )

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='fb-root'/> <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <div id='container-commentfb' style='width: 100%;'><fb:comments expr:href='data:post.url' num_posts='10' width='500'/></div> </b:if>

4. Save

Nah, cukup mudah kan ? sekian tutor dari saya kali ini, Kalau ada pertanyaan, silakan komentar aja ..

Tweet