Kenapa Masih Keluar Tanda 'Warning' ?

(Nota: Entah kenapa belog ini telah diblok oleh fesbuk. Aku dah merayu masih tunggu respon. Jadi buat masa ini semua link yang berhubung kait dengan fesbuk - aku keluarkan dulu. Maaf ya)

Apa yang best hingga nak letak fesbuk komen? Pertama - Sebab kotak komen nampak kemas hanya tunjuk 2 tab komen (fesbuk dan blogger). Kedua - Sebab tutorial dah ada dan orang len dah letak, takkan tak nak letak.

Jawapan "nanti pengguna fesbuk yang bukan blogger senang komen" tu cuma alasan je hahahah jangan mare - bulan posa nih.

Dah tu apa masalahnya bila dah banyak 'tutorial pasang kotak komen fesbuk di blog'; aku menyibuk nak tumpang juga? Haaa... cuba tengok apa beza dua gambar di bawah (tekan segala gambar yang ada untuk lebih jelas) :

GAMBAR 1

GAMBAR 2

Sebenarnya tutorial yang ada macam tak cukup satu step/langkah awal iaitu 'integrate' link fesbuk dengan link blog. Itu yang keluar tanda 'warning' tak hilang-hilang. Ini boleh dilakukan melalui fesbuk developers. Meh aku kongsi cara nak hilangkan tanda amaran berlatar kuning tu (ada di step/langkah kedua, baca dulu yea). Tapi cam biasa saya budak baru belajar kalau salah tolong betulkan tau :

Untuk integrate blog dengan fesbuk tanpa keluar tanda amaran, perlu masukkan nombor fesbuk developer id (fb:app_id) korang. Kat mana nak dapat? Pergi ke developers facebook setup

Akan keluar pop-up dan isi dua kotak pertama. Pastikan statusnya 'available' baru tekan 'Continue'

Nanti akan keluar page ni pula:

Pilih 'Website with Facebook Login' dan isi link blog korang. Dahtu 'Save Changes'. Page penuh akan tunjuk benda alah ni kat belah atas:

Haaa ini aku punya fb:app_id dan ada remark 'This App is is live (Visible to all users)' maknanya dah siap le. Itu untuk dapatkan fb:app_id.

Biasanya fesbuk korang akan tunjuk nama cenggini : https://www.facebook.com/EmpayarUtama. Jadi kalau nak tau atau dapat fb user id (fb:admins_id) korang, kena pergi ke https://graph.facebook.com/username (tukar username dengan nama fesbuk korang)

Nanti keluarlah info camni:

Ok sekarang kita dah ada kedua-dua id (fb:app_id dan juga fb:admins atau fb user id)

Sekarang kita susun betul-betul segala kod yang diperlukan dalam template blog.

Semua ni kena buat dalam blog template korang (takkan lom tau camana nak pergi ke blog template ^_^. Ok, Nama blog -> Sebelum Butang 'View Blog' ada butang 'arrow' ke bawah [view more]; tekan dan pilih 'Template' -> Edit HTML -> klik kiri mouse dalam kotak kod html)

Pertama : Tekan [Ctrl F] dan cari <head>
Tujuannya - supaya blog boleh baca FESBUK SAHAJA. Kita kan nak orang komen melalui fesbuk. Maknanya kita dah skip satu langkah 'Comment using... Facebook / Yahoo / AOL / Hotmail'. Segala kod mungkin dah ada cuma perlu tambah kod yang dibirukan sahaja tau. Ini kodnya letak sebelum <head> macam contoh bawah ni:

Kedua: Cari <b:skin>
Tujuannya - untuk hilangkan tanda 'Warning' yang berlatar warna kuning. Ia berfungsi untuk integrate kedua-dua link blog dan fesbuk. Kod <b:if supaya paparan komen hanya keluar di page entri bukan di homepage blog. Script tu pula agar link tabber komen berfungsi - kan ada dua tab fesbuk dan blogger.

Satu lagi lihat script jQuery yang berwarna merah. Jika blog kamu sudah ada jQuery script, buang baris yang merah tu ya. Ini kerana font blog kamu yang dah cantik akan bertukar (contohnya font Cherry Cream Soda cam kat blog aku akan jadi font Arial)

Ini kodnya letak sebelum <b:skin> macam contoh bawah ni:

<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='NAMA BLOG KORANG' property='og:site_name'/>
<meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/>
<meta content='article' property='og:type'/>
<meta content='fb:app_id KORANG' property='fb:app_id'/>
<meta content='fb:admins (fb user id KORANG)' property='fb:admins'/>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<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>

<b:skin>

Ketiga: Cari kod ini ]]></b:skin>
Tujuannya - Setting untuk ejas cantik-cantik kedudukan kotak komen fesbuk. Warna latar/background yang bertanda biru tu ikut suka - nak letak transparent pun boleh)

Ini kodnya letak sebelum ]]></b:skin> macam contoh bawah ni:

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

]]></b:skin>

Keempat: Cari <b:includable id='comments' var='post'> dan di bawahnya ada kod <div class='comments' id='comments'>

Tujuannya - Agar kotak komen dan tab yang dah dibina tadi terpamer dalam ruang komen blog korang. Lebar/width warna biru tu ikut kesesuaian lebar entri belog.

Ini kodnya letak selepas / di bawah kod <div class='comments' id='comments'> macam contoh bawah ni (ingat ya dua kod teratas dah sedia ada tau. Errr, tak pe aku tandakan warna merah, copy yang warna merah je) :

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>

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

<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<script> window.fbAsyncInit = function() { FB.init({
appId : 'fb:app_id KORANG',
status : true, cookie : true, xfbml : true }); };
(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);
}());
<fb:comments/>
</script>
<fb:comments expr:href='data:post.url' num_posts='2' width='450'/>
</b:if>
</div>

<div class='comments comments-page' id='blogger-comments-page'>

Setelah susun kod-kod tadi, korang pastikan semula - nombor fb:app_id KORANG telah dimasukkan dua kali (di step Kedua dan Keempat) manakala nombor fb:admins (fb user id KORANG) telah dimasukkan sekali (di step Kedua sahaja)

Selamat berjaya, perghhh cam soalan bocor nak amek peksa... Jangan buang posa aaa ^_~

Alamak camana Cik Tedi Bear ni buleh termasuk dalam belog satu lagi? Hahahahahah

Okeh. Kepada yang berusaha tapi masih tak berjaya; ada satu lagi tempat sebagai pilihan untuk diletak kod keempat tu. Ikut je gambar-gambar bawah ni (tekan gambar untuk lebih jelas):