Cara letak FB comment di blogspot anda

Monday, October 31, 2011

Cara letak FB comment di blogspot anda

Assalamualaikum.Saya nak kongsi tutorial cara membuat Comment Box Direct dari account FB ke dalam blog.Untuk lebih jelas, rakan-rakan silalah skrol kebawah dan lihat contoh kat blog ni.

Seperti biasa, Log In ke Account Blogspot anda dan masuk ke ruangan Design-->Edit HTML dan tandakan pada ruangan Expand Widget Templates. Sebelum kita membuat sebarang perubahan code html, pastikan kita save backup template dahulu di ruangan Download Full Template.

1. Buat carian mudah dengan menggunakan short cut Ctrl+F, class='comments'
Kalau tak jumpa, cari code yang seumpama code di bawah ini.

<div class='comments' id='comments'>

2. Kemudian Copy Code di bawah ini dan Paste di bawah Code yang anda cari pada langkah 1.

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' 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("#blogger-comments");' 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>

3. Kemudian di ikuti dengan code ini di bawah code no.2 tadi

<div class='comments-page' id='fb-comments-page'> <b:if cond='data:blog.pageType == "item"'> <div id='fb-root'/> <fb:comments expr:href='data:post.url' num_posts='2' width='500'/> </b:if> </div><div class='comments comments-page' id='blogger-comments-page'>

Anda juga boleh mengubah lebar Comment Box anda dengan mengubah jumlah width='500' mengikut kesesuaian blog anda.

4. Langkah seterusnya CTRL+F (head) seperti di bawah ini.

<head>

5. Dan masukan code berikut di bawah langkah no.4

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <script src='http://code.jquery.com/jquery-latest.js'/><meta content='YOUR_FB_ID' property='fb:admins'/><script type='text/javascript'>function commentToggle(selectTab) { $(".comments-tab").addClass("inactive-select-tab"); $(selectTab).removeClass("inactive-select-tab"); $(".comments-page").hide(); $(selectTab + "-page").show();} </script>

Gantikan YOUR_FB_ID dengan ID= FB anda sendiri.

6. Step terakhir adalah CTRL+F comments cari Code seperti di bawah ini.

/* Comments----------------------------------------------- */

7. Dan paste code berikut di bawah code no. 6 tadi iaitu selepas tanda*/.

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

Sekarang Save Template anda dan lihat hasilnya. Jika dah cuba, anda boleh bagi tahu hasilnya dengan komen di bawah ya. kalau ada masalah pun boleh tanya. :)

Kelebihan FB Comment Box ini adalah pelawat lebih mudah untuk memberi komen kepada entry anda bagi yang tidak mempunyai acc. google, dan dalam masa yang sama, pelawat yang biasa menggunakan default comment box dari blogspot pun tetap boleh memberi komen secara biasa.
semoga berjaya.

Comments

0 Comments

RahsiaKita

Monday, October 31, 2011

Cara letak FB comment di blogspot anda

0 comments: