[Facebook][Javascript] Facebook 按讚鈕預設隱藏,而後顯示卻在 IE / Firefox 中無法顯示的解法

Standard

上週在做個活動案時,有個需求是希望使用者必須是某個 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>

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *