Google Friend Connect Tu Apa?

Kemaskini: Widget 'follower friends connect' pun sudah tidak dapat digunapakai lagi kerana Google secara otomatis ubah kod 'javascript friendconnect' dari http kepada https. Oleh itu kod yang ada di bahagian bawah posting ini hanyalah sebagai rujukan yang ianya pernah boleh digunapakai; dan kini menjadi bahan sejarah hahahahahah - EmpayarUtama.

'Google friendconnect' tu apa? Ia adalah satu 'Open Social' platform yang disediakan oleh blogger.com tapi dikuasai sepenuhnya oleh Google.

Widget 'follower friends connect' tu apa? Ianya satu ringkasan, berfungsi untuk beritahu berapa ramai pembaca yang ikut blog kita dan mereka akan di'update' melalui 'Google Reader' jika terdapat kemaskini dari mana-mana blog yang diikut/follow.

Adusss, abis tu 'Google Reader' tu apa? Ianya lebih kurangla macam korang follow blog melalui RSS feed dan semua feed ini akan disiar dalam 'Google Reader' selain nama-nama blog yang difollow pula - disusun dalam 'blogger profile'. Kita gelar dia 'Blogger Reading List' (tak sama tau dengan Bloglist). Dulu 'Google Reader' boleh diakses terus melalui akaun Google; tempatnya dekat-dekat dengan picasa yang aku pernah cerita. Jadi bila 'Google Reader' secara rasminya ditamatkan perkhidmatan pada 1 Julai 2013 (baru tiga minggu nih) maka fungsi widget 'follower friends connect' tersebut hanyalah hiasan atau gadget untuk cantikkan blog aja.

Senang cakap - bloggers yang ikut mana-mana blog masih boleh baca jika ada update dari blog yang di'follow' hanya melalui 'Google Reader' tanpa perlu jengah atau blogwalking ke blog tersebut.  Blogwalking tu, er, er, ala macam 'u folo ai folo' hahahahah boleh? 'U jengah ai jengah balik nanti yea lalinggggg...'

Google ni kan, sejak ada G+; fungsi-fungsi berkaitan dengan blog semakin dikurangkan. RSS feed korang boleh baca? Aku 'redirect'kan ke 'feedburner' dan agaknya tak lama lagi 'feedburner' pun akan bungkus kot.

Bukan apa, Nor Hanis bertanya (macam minat je) untuk letak widget, eh gadget 'follower friends connect' dalam belog. Aku ada reply tapi kat sini boleh le nengok lebih detail:

• 
• 
• 
• 
• 
• 
• 
• 
• 

Sambung sini pulak :

Kod ini boleh diguna setelah korang masukkan id dan site id berdasar kod yang korang jumpa dalam 'view page source' tadi. Sekadar langkah berjaga-jaga takut setting dalam 'layout' kembali kepada 'default'. Jadi korang boleh simpan kod ini untuk paste ke 'sidebar' kiri ke, kanan ke, bawah ke; dan yang penting boleh tukar kod-kod warnanya sesuka hati dan sesuaikan dengan warna belog. Kodnya panjang juga kannn. Ambik yang kat bawah ni ajalah:

<script src="http://www.google.com/friendconnect/script/friendconnect.js" type="text/javascript"></script>
<div id="masukkan id di sini" style="width: 100%;">
</div>
<script type="text/javascript">
var skin = {};
skin['FACE_SIZE'] = '32';
skin['HEIGHT'] = "260";
skin['TITLE'] = "Followers";
skin['BORDER_COLOR'] = "transparent";
skin['ENDCAP_BG_COLOR'] = "transparent";
skin['ENDCAP_TEXT_COLOR'] = "#666666";
skin['ENDCAP_LINK_COLOR'] = "#2288bb";
skin['ALTERNATE_BG_COLOR'] = "transparent";
skin['CONTENT_BG_COLOR'] = "transparent";
skin['CONTENT_LINK_COLOR'] = "#2288bb";
skin['CONTENT_TEXT_COLOR'] = "#666666";
skin['CONTENT_SECONDARY_LINK_COLOR'] = "#2288bb";
skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#999999";
skin['CONTENT_HEADLINE_COLOR'] = "#000000";
skin['FONT_FACE'] = "normal normal 12px Trebuchet, sans-serif";
google.friendconnect.container.setParentUrl("/");
google.friendconnect.container["renderMembersGadget"](
{id: "masukkan id di sini", height: 260,
site: "masukkan site id di sini", locale: 'en' }, skin);
</script>

Dah ada widget nih, bolehla sambung buat GA kan? Kalau bosan dengan cerita aku, layan yang ini ajalah:

K baiiiii

Cerita seterusnya »

Replay Eh Bukan, Reply Le...

Salam Ramadhan. Puasa penuh ke takat ni? Okkkkk tak mo cerita puasa. Kali ni aku nak kongsi agak banyak sebab ianya saling berkait.

Kalau korang nengok blog sendiri dengan blog orang lain, kadang-kadang ada kotak 'Reply', 'Reply to Comment', 'Balas', dan yang sewaktu dengannya.

Bila blog sendiri tak de - Haaa banyak tutorial letak butang 'Reply to Comment' boleh dibina. Bila dah banyak sangat, dah jadi macam widgetlah pulak, kan?

Ada yang tulis letak kod <span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=Masukkan ID blog di sini&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'>BALAS / [Reply to comment] / [Balas] / [Reply] / Aku Tak Hensem </a></span>

sama ada di bawah <b:include data='comment' name='commentDeleteIcon'/>; atau selepas <b:include name='threaded_comment_css'/> (ada blog yang tak ada langsung kod ni); ada juga tulis suruh letak di bawah <data:commentPostedByMsg/>; dan ada juga suruh cari <dd class='comment-footer'> dan letak kod tu di bawahnya. Tapi terlupa nak pesan bila letak kod di tempat yang dicadangkan - adakah 'Settings - Posts and comments' untuk 'Comment Location' perlu ditetapkan pada kedudukan 'Embedded', 'Full Page' atau 'Popup window'. Itu yang kedudukan 'Reply to comment' agak bertabur.

Errrr, macam panjanglah nak cerita. Aku guna gambar boleh? Teruskan dengan tengok album ya ^_^

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Pilihan jadi pengomen sebagai Anon macam dah tak ada. Blogger.com juga memilih untuk menambah 'Google+ Follow' berbanding 'Friends Connect'. Oleh itu penggunaan komen Google+ lebih membantu promosi blog kerana ada pilihan untuk dikongsi di G+. Contoh untuk ini boleh dilihat di support.google.com.


Eh, korang men tekan-tekan album tu; tengok sambil baca ke atau minat albumnya? Replay Reply lerrrr...

Cerita seterusnya »

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:

<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 ^_~

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

Tekan 'arrow' kecik sebelah nombor tu, nanti akan keluar banyak senarai cam kat bawah:

No. 1 tu seperti dalam tutorial. Kalau tak menjadi, hangkut kod keempat tu ke dalam no.2 seperti gambar ya.

Mula-mula akan keluar amaran. Refresh/Reload belog dan amaran akan hilang.

Selamat menjadi (Harap Terbelog punya akan oke ^_^)

Lapar...

Cerita seterusnya »