上週在做個活動案時，有個需求是希望使用者必須是某個 Facebook 專頁的粉絲才能進行遊戲，若尚未成為粉絲，則立即用 Lightbox 方式顯示按讚鈕讓使用者按讚，「讚」完就可以進入遊戲。
是個相當單純的需求，不過有個需要特別注意的地方：若一開始用 CSS 讓放置按讚鈕的容器（如 div）為 display: none;，而後才讓其顯示（本例是透過 jQuery 的 $(element).show()）的話，在 Internet Explorer 與 Firefox 上會無法讓按讚鈕顯示出來，而 Google Chrome 卻可以。
情況如圖：
可以在檢測元素工具中觀察到，Internet Explorer 與 Mozilla Firefox 瀏覽時，在容器被 show() 時，按讚元素的寬高仍為 0，但 Google Chrome 是正常的寬高。
翻閱了 Facebook Developer 文件中提到 FB.XFBML.parse() 方法可重新解析頁面（或指定）的元素，讓 Facebook 的外掛元件得以重新被解析一次。
果然，在主控台中手動呼叫該方法後，按讚框成功地顯示出來了！
DEMO: http://labs.patw.idv.tw/facebook_likebutton_show_hide/
順便貼個 code：
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="utf-8" />
<title>顯示/隱藏按讚框</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
#fan_box {
position: relative;
width: 100%;
height: 100%;
margin-left:auto;
display: none;
}
#fan_box .box {
position: absolute;
left: 50%;
top: 50%;
width: 280px;
height: 60px;
margin-left: -140px;
margin-top: 50px;
border: 1px solid #000;
z-index: 998;
display: none;
}
</style>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/zh_TW/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="fan_box">
<div class="box">
先按讚加入 Partner Studio 粉絲團吧！
<div class="fb-like" data-href="https://www.facebook.com/pages/Partner-Studio/390577014272" data-send="false" data-layout="button_count" data-width="180" data-show-faces="true"></div>
</div>
</div>
<a href="javascript:facecbook_login();">登入 Facebook 並檢查粉絲身份</a>
<script>
var appID = "300317586764320",
scope = "user_likes",
uid = ",
PageID = "390577014272";
window.fbAsyncInit = function()
{
FB.init({appId: appID, status: true, cookie: true, xfbml: true, oauth: true, channelUrl: 'http://labs.patw.idv.tw/facebook_likebutton_show_hide/channel.html'});
FB.Event.subscribe('edge.create', function(response)
{
hideFanBox();
alert("好了，謝謝你的讚！");
});
};
function facecbook_login() {
FB.login(function (response) {
if (response.authResponse) {
//授權並同意
// 將 Facebook uid 放到 window.uid 中
uid = response.authResponse.userID;
// 檢查使用者是否為指定專頁的粉絲
FB.api('/me/likes/' + PageID, function (response) {
if (response.data) {
if (!isEmpty(response.data)) {
alert("恭喜，你是粉絲！");
}
else {
// 若尚不是粉絲，跳出粉絲按讚框
showFanBox();
}
} else {
alert('系統忙碌中，請稍後再試');
}
});
} else {
alert("您必須同意授權喔");
}
}, {
scope: scope
});
}
function showFanBox()
{
$('#fan_box').show();
$('#fan_box .box').fadeIn();
// 強制再次 XFBML parse 一次指定元素
FB.XFBML.parse($("#fan_box")[0]);
}
function hideFanBox()
{
$('#fan_box .box').fadeOut();
$("#fan_box").hide();
}
// 檢查返回的物件是否有自己的屬性
// (用在 FB 的話, 返回值皆是物件, 若擁有自己的屬性, 而非 Object 原有的, 就代表有值)
function isEmpty(obj) {
for(var prop in obj) {
if(obj.hasOwnProperty(prop))
return false;
}
return true;
}
</script>
</body>
</html>