Sekali lagi, inilah widget yang dinanti-nantikan oleh semua pengguna blogger (khas dari allblogtools dan sempoi corner) dan sekarang hanya ada untuk pelawat Sempoi Corner dan All Blog Tools (eksklusif) , dan ini mungkin blog yang terawal tutorialnya yang akan menerangkan kepada anda langkah mudah untuk mendapatkan kotak komen facebook yang terbaru KHASNYA untuk blogger (BLOGSPOT) blog...
DEMO KOMEN BOX INI
Perhatian: Jika anda rasa anda pernah melihat tutorial ini,(kecuali di allblogtools).Anda salah,ia mungkin kelihatan sama seperti tutorial sebelumnya tetapi entry kali ini adalah yang terbaru dan UPDATED*.Dan banyak masalah telah diselesaikan .Jika anda menghadapi masalah dalam mana2 web yang memberi tutorial ini,cubalah tutorial ini.
Untuk NaikTaraf(update): Jika anda telah mempunyai kotak komen facebook yang lama dalam blog anda dan tak nak kehilangan komen2 anda .Klik di SINI untuk mengetahui cara untuk upgrade dengan mudah.
AMARAN : Sebelum anda menukar blog kod template anda atau melakukan apa-apa perubahan,Bro nasihatkan agar anda Backup dengan mengKlik DOWNLOAD FULL TEMPLATElink.
Apa yang ada dalam kotak komen
facebook terbaru ini:
facebook terbaru ini:
- Threaded comments : reply to comments.
- User network : now it’s displaying the comment author not only name, but his profile info as well
- Permalink to specific comments : Permalinks have now been assigned to each comment so people can share links and be directed to specific comments.
- Notifications : sent to users will also go to the permalink, making it easier to respond. For example, clicking on the notification below will take you to the permalink of the original comment.
- 2 Color schemes, regular light, and the new dark colors.
now let’s do it, don’t worry, i know that must of you tried to add it to blogger blogs, with no result, but today you’ll see how to add it in really easy steps and it’s 100% working. but please be careful and pay attention for all the details.
This tutorial is updated.
This tutorial is updated.
Langkah 1. Disablekan Default Comments.
Perkara pertama yang anda perlu lakukan adalah DISABLE KAN default comment blogger anda.kerana anda semestinya tak mahu mempunyai 2 kotak komen .
pergi ke account blogger anda,navigate ke
settings >> comments dan selepas comment field pilih
Save Settings
Step 2. Generate Facebook App ID anda.
dan klik + Set Up New Application
tulis nama aplikasi anda, ( tulis nama yang mudah dan singkat ikut suka korang )
dan tanda agree dan klik Create Application
kemudian klik connect tab (on the left tabs-list) atau lihat imej seterusnya.
dan isi info berikut.
Connect URL : url blog anda dan mesti di akhiri dengan ending dash
Connect URL : url blog anda dan mesti di akhiri dengan ending dash
. (for example: http://myblogname.blogspot.com/) .
Base Domain anda mesti taip blogspot.com
kemudian klik strong>agree dan klik Save Changes
kemudiannya facebook akan generatekan anda banyak info dan anda hanya memerlukan satu sahaja iaitu , App ID:
salin dan simpan di notepad kerana ID itu diperlukan dalam langkah yang seterusnya.Sila lihat gambar dibawah di mana anda akan jumpa facebook App ID anda:.
kemudiannya facebook akan generatekan anda banyak info dan anda hanya memerlukan satu sahaja iaitu , App ID:
salin dan simpan di notepad kerana ID itu diperlukan dalam langkah yang seterusnya.Sila lihat gambar dibawah di mana anda akan jumpa facebook App ID anda:.
Step 3. Codes Untuk Template anda.
Langkah ini amat penting,anda mesti memasukkan kod berikut untuk memastikan kotak komen anda berfungsi dengan lancar dan baik .
dalam langkah ini kami sediakan kod berikut,
dalam langkah ini kami sediakan kod berikut,
- xmlns attribute
- SDK script
- Open Graph protocol tags
- Adding the xmlns attribute :
sila pergi ke akaun blogger anda semula dan navigate ke , layout >> edit html >> dan tanda Expand Widget Templates
dan cari kod berikut,
dan cari kod berikut,
<html
anda akan menemui di kod anda itu,yang dihighlightkan dan masukkan kod di bawah selepas <html
xmlns:fb='http://www.facebook.com/2008/fbml'
anda mesti tinggalkan sedikit ruang antara kod itu
ini adalah contoh.
ini adalah contoh.
<html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog..............2005/gml/expr' >
- Menambah the SDK script Code :
cari
<body>
dan tambah kod berikut SELEPASNYA,
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
jangan lupa untuk menukar APP ID anda kepada app id anda sendiri( anda dapat dari step sebelumnya ).
- Menambah the Open Graph protocol tags:
copy kod di bawah
<b:if cond='data:blog.pageType == "item"'> <meta expr:content='data:blog.pageTitle' property='og:title'/> <meta expr:content='data:blog.url' property='og:url'/> <b:else/> <meta expr:content='data:blog.title' property='og:title'/> <meta expr:content='data:blog.homepageUrl' property='og:url'/> </b:if> <meta content='MY-SITE-NAME' property='og:site_name'/> <meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/> <meta content='YOUR-APP-ID' property='fb:app_id'/> <meta content='YOUR-FACEBOOK-PROFILE-ID' property='fb:admins'/> <meta content='article' property='og:type'/>
dan tukar text bewarna yang berikut ,edit di notepad
Tukar MY-SITE-NAME dengan nama yang anda nak untuk muncul apabila pelawat
Tukar MY-SITE-NAME dengan nama yang anda nak untuk muncul apabila pelawat
tukar http://google.com/…/blogger_logo.gif dengan logo blog anda, atau padamkan jika taknak.
Tukar YOUR-APP-ID dengan nombor application ID anda.
Tukar YOUR-FACEBOOK-PROFILE-ID dengan facebook id profile anda .
selepas buat perubahan ini ,copy dan paste kod ini sebelum:
</head>
sekarang kita dah selesai menambah kod facebook di template anda .Tolong jangan ganggu apa-apa dan sambung di langkah seterusnya.
Step 5. Memuat naik kotak komen ke blogger
template anda.
template anda.
cari kod berikut.
<data:post.body/>
dan selepas itu ,sila paste kod di bawah
untuk Light Comments box (sperti di demo )
untuk Light Comments box (sperti di demo )
<b:if cond='data:blog.pageType == "item"'>
<p align='left'><img alt='' class='icon-action' height='51' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ4jxHJskpE6C2T9S52Au-KQ71u9gaa6p5X-BG27YvBJrfqOZSoCTSFiMBeuUhr5rMvhaqkHAXqDdZQFhhEImWyU5bcCkDrhOqTNIN1Zci7EflMmDDbZpqGUeT5OM0nU8VqQ_IN5Jtpo0/' width='331'/></p>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments width='450' expr:title='data:post.title' expr:href='data:post.url' expr:xid='data:post.id'/></div>
<div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'> <img alt='' class='icon-action' height='16' src='http://allblogtools.com/imgup/1-2010/allblogtools-blogger-templa.gif' width='16'/> <b><a href='http://www.allblogtools.com/' target='_blank' title='blogger templates'>AllBlogToolsFacebook comments for blogger</a> brought to you by <a href='http://www.allblogtools.com/' target='_blank' title='blogger templates'>AllBlogTools.com , Get Yours?</a></b></div> </b:if>
Untuk Dark Comments box ( Jika anda mahukan comments box dalam dark colors. )
<data:post.body/>
dan selepas itu , sila paste kod berikut.
For DARK Comments box ( like the one in the demo )
For DARK Comments box ( like the one in the demo )
<b:if cond='data:blog.pageType == "item"'>
<p align='left'><img alt='' class='icon-action' height='51' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ4jxHJskpE6C2T9S52Au-KQ71u9gaa6p5X-BG27YvBJrfqOZSoCTSFiMBeuUhr5rMvhaqkHAXqDdZQFhhEImWyU5bcCkDrhOqTNIN1Zci7EflMmDDbZpqGUeT5OM0nU8VqQ_IN5Jtpo0/' width='331'/></p>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments width='450' expr:title='data:post.title' expr:href='data:post.url' colorscheme='dark' expr:xid='data:post.id'/></div>
<div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'> <img alt='' class='icon-action' height='16' src='http://allblogtools.com/imgup/1-2010/allblogtools-blogger-templa.gif' width='16'/> <b><a href='http://www.allblogtools.com/' target='_blank' title='blogger templates'>AllBlogToolsFacebook comments for blogger</a> brought to you by <a href='http://www.allblogtools.com/' target='_blank' title='blogger templates'>AllBlogTools.com , Get Yours?</a></b></div>
</b:if>
untuk menukar lebar komen box anda sila tukar 450 kepada yang anda mahukan , ia berbentuk pixels,
dan sekarang klik Save Template , dan WALLOH!! check blog anda. Bro harap ia cantik dan berfungsi dengan baik.
Demo and Credits.
untuk melihat demo kotak komen,sila klik disini.
tolong jangan alihkan link saya or atau nama dari widget ini, Bro berusaha keras untuk cari dan alihkan bahasa untuk anda .
LIKE DAN KOMEN SERTA FOLLOW JIKA BERJAYA.. GOOD LUCK!