關於部落格
雨--是天空的眼淚 風--是蝴蝶的痴醉 雲--是水珠的嫵媚 光--是溫暖的慰藉 夜--是孤單的滋味 星--是墜跌的心碎 蹲下,是為了躍起。 後退,是為了向前跳得更遠。
  • 167781

    累積人氣

  • 9

    今日人氣

    0

    訂閱人氣

FB 讚 按鈕

好久沒有發教學文了~


這次來簡單介紹
到處可以看到FB"讚"的按鈕


大概分兩個部分來介紹
第一部分是
先建立"讚"的按鈕
當然官方都有提供範例的Code
http://developers.facebook.com/docs/reference/plugins/like
用iframe Code比較難寫更進階的功能?
但是又聽說之後FBML又要改成iframe
不知道改來改去是為啥0.0


一開始必須先到FB建立一個應用程式
接著再到網頁中依以下步驟加入Code
1. 在html標籤加入 xmlns:fb
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">


2.在body標籤內加入 fb.init
<div id="fb-root"></div>
<script src="http://connect.facebook.net/zh_TW/all.js"></script>
<script>
 FB.init({
  appId  : '填入應用程式API 金鑰',
  status : true, // check login status
  cookie : true, // enable cookies to allow the server to access the session
  xfbml  : true  // parse XFBML
 });
</script>


3.在你要的位置,加入fb like按鈕
<fb:like href="要分享的url" layout="button_count" show_faces="false" action="like" colorscheme="light"></fb:like>


這樣
第一部分就大功告成


重點是在於第二部分
從fb:like的href屬性
可以得到你要"讚"的網頁網址
假設你要"讚" http://www.leafmemory.tw/1.php
那在 1.php這頁必須做一些設定


1.在html標籤加入 xmlns:og、xmlns:fb
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">


2.
<meta property="og:title" content="儲值白鑽看漫畫,還可以抽【萬顆粉鑽】 @ 可愛鼠精品店"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://cute.pinkygame.com/Forum/MsgL.asp?TopicNum=232"/>
<meta property="og:image" content="http://www.pinkygame.com/Download/logo/cute.gif"/>
<meta property="og:site_name" content="可愛鼠精品店" />
<meta property="fb:app_id" content="填入應用程式 ID" />
<meta property="fb:admins" content="管理者 fid"/>


第二步驟是一個重點
如果說要讓自己FB"讚"按鈕有可以發佈到朋友塗鴉牆的功能
就必須設定
og:title:網頁標題
og:type:類型
og:url:網頁網址
og:image:網頁縮圖
og:site_name:網站名稱
這些資訊
其實就是控制塗鴉牆上要show的東西
而且這些屬性
有幾個是必須的
不然就不會有發佈到朋友塗鴉牆的功能


fb:app_id和fb:admins
是屬於比較行銷和管理的功能
簡單說
假設有設定fb:admins
當你按下"讚"時
就會有一個類似粉絲團的管理頁面(只有管理者能看到)
裡面會show出有誰按過
流量等等分析
當然還有更多進階的
就等大家研究分享囉


其實當我做完這個功能時
才覺得FB的野心很大0.0




效果可以參考PinkyGame各大論壇
http://cute.pinkygame.com/Forum/Forum.asp





文:葉小誠
相簿設定
標籤設定
相簿狀態