痾.....雖然之前寫過判斷是否加入粉絲團的方式
但是 pages.isFan 似乎存在一些問題
有些人可以正常 run，有些人看到一片空白，有些人一直跳出來說他沒加入粉絲團 = =
然後我找了一下 pages.isFan 這東西在 Facebook Developer 裡面似乎找不到了
不知道是換地方還是根本就是舊方法要淘汰了?
因為寫法其實很多種，所以這次改用 FQL 來寫
然後此篇不限於 Facebook APP，一般web 網站也是一樣寫法
首先設定方式還是一樣，可以直接用測試網址，但後面記得要加斜線
如下圖 :
然後該加的還是要加一下
1. 引用 jQuery
2. Facebook js
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://connect.facebook.net/zh_TW/all.js"></script>
3. 放入 Facebook 需要的 <div> 標籤
<div id="fb-root"></div>
4. 設計你要談出來要人家按讚的粉絲團畫面
我懶得改，所以摳比之前寫過的文章，大家要記得改粗體 + 藍字的連結
<div style="width:760px; height:660px;background:rgba(0,0,0,0.6);display:none;z-index:999;position:absolute;top:0px;left:0px;" id="div_fan">
<div style="width: 351px; height: 285px; margin-left: 205px; background: #fff; margin-top: 150px; border: #333 2px solid; padding-top:5px;">
<div style="width: 349px; margin-left: 0px; font-size: 14px; font-weight: bold; color: #333;">
請先加入粉絲團：
<div id="like_box" style="margin-top: 5px;"><iframe src="https://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/maukids&width=349&colorscheme=light&show_faces=true&stream=false&header=false&height=259" scrolling="no" frameborder="0" style="border: none; overflow: hidden; width: 360px; height: 259px;" allowTransparency="true"></iframe></div>
</div>
</div>
</div>
5. 開始寫 js
<script type="text/javascript">
$(document).ready(function () {
//初始化
var fbdata = {
url: "http://localhost:50051/Default.aspx",
appid : "1464841243728820",
fans_id : "382384165146381",
uid : ""
}
FB.init({
appId: fbdata.appid,
status: true,
cookie: true,
xfbml: true,
channelURL: 'http://www.test.com.tw/channel.html',
oauth: true
});
//再來檢查登入狀態與授權
FB.getLoginStatus(function (response) {
if (response.authResponse) {
fbdata.uid = response.authResponse.userID;
isFun(fbdata);
} else {
window.top.location.href = "http://www.facebook.com/connect/uiserver.php?app_id=" + encodeURIComponent(fbdata.appid) + "&next=" + encodeURIComponent(fbdata.url) + "&display=popup&perms=email,user_likes&fbconnect=1&method=permissions.request";
}
});
//檢查是否加入粉絲團
function isFun(fbdata) {
FB.api({
method: 'fql.query',
query: "SELECT uid FROM page_fan WHERE uid = '" + fbdata.uid + "' AND page_id = '" + fbdata.fans_id + "'"
}, function (res) {
var id = "";
for (var key in res) {
id = res[key].uid;
}
//如果回傳的 id 不是空值，代表有加入粉絲團
if (id == "") {
$("#div_fan").show();
} else {
$("#div_fan").hide();
}
//每一秒重複檢查一次是否加入粉絲團
setTimeout(isFun(fbdata), 1000);
});
}
});
</script>
最後....我把範例放到網路上了
如果有加入過就會一片空白，如果你取消按讚就會跳出來叫你按 (因為每秒檢查一次)
http://socute.somee.com/FBFans.html
有需要的人請自行檢視原始碼吧!
and .......因為是放在免費空間，所以紅色箭頭上面的是廣告可以不用按 >< (反正我也賺不到錢)
留言列表
CSS、Responsive Web Design (2)