小雕雕的家

痾.....雖然之前寫過判斷是否加入粉絲團的方式

但是 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&amp;width=349&amp;colorscheme=light&amp;show_faces=true&amp;stream=false&amp;header=false&amp;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 .......因為是放在免費空間，所以紅色箭頭上面的是廣告可以不用按 >< (反正我也賺不到錢)