Home » » Kenapa Masih Keluar Tanda 'Warning' ?

Kenapa Masih Keluar Tanda 'Warning' ?

Empayar Utama - Thursday, July 11, 2013 : 13 comments

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.

Manalah tau kemudian hari nanti Immotive atau dulunya dipanggil NuffnangX pun boleh ditambah bersebelahan, jadilah 3 tab, kan, kan, kannnn...

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:
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml'>
<head>

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 == &quot;item&quot;'>
<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(&quot;#fb-comments&quot;);' 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(&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'/>
<script> window.fbAsyncInit = function() { FB.init({
appId : 'fb:app_id KORANG',
status : true, cookie : true, xfbml : true }); };
(function() {
var e = document.createElement(&#39;script&#39;);
e.src = document.location.protocol + &#39;//connect.facebook.net/en_US/all.js&#39;;
e.async = true;
document.getElementById(&#39;fb-root&#39;).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 ^_~


related posts plugin for wordpress, blogger...

^_^

13 comments:

  1. cam best jer wat komen camni... klu wat komen ni, jumlah komen2 sebelum ni hilang tak?

    salam ramadhan, salam blogging

    ReplyDelete
  2. nampak lebih kemas bila cantum sebela2 macam ni..

    ReplyDelete
  3. @Mizz Aiza

    Makasih. Kemas ke? Cuba ler. Bila-bila masa boleh buang balik kod-kod tu.

    ReplyDelete
  4. salam...selamat berpuasa...
    eh apakah ini...haha da lama xberblog tetiba blur..

    ReplyDelete
  5. assalamualaikum..EU

    slmt puasa...

    ayie dah try..hehe...terima kasih EU :)

    ReplyDelete
  6. byknya post komen ko buat. better ko guna disquss. semua pengguna bleh komen. pendapat aku la.

    ReplyDelete
  7. selamat beribadah dan berpuasa ramadhan karim

    ReplyDelete
  8. @MUHAMMAD IQBAL Abdullah

    Salam, siang td rasa cam dah jawab tp tak masuk plak. Kod yg ada tak kacau apa-apa - cuma tambahkan comment fesbuk dan buatkan tab untuk asingkan fesbuk dengan blogger comments. Bagusnya ia meringkaskan senarai yang panjang...

    ReplyDelete
  9. @Carlos Santiago

    Yang ini nanti aku perjelaskan. Kena buat 1 entri lain.

    Buat yang lain yang sudi komen, terima kasih juga dari saya

    ReplyDelete
  10. ha'ahla, nampak kemas. Tapi Tedi xde FB, boleh guna jugak ka?

    ReplyDelete
    Replies
    1. Alamak Tedi ini belog untuk saya test main-main. Belog saya empayarutama(dot)blogspot(dot)com hahahah. Takde fesbuk tabley lorrr...

      Delete

Tulisle apa pun, aku baca ^_~