上週在做個活動案時,有個需求是希望使用者必須是某個 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 的外掛元件得以重新被解析一次。
果然,在主控台中手動呼叫該方法後,按讚框成功地顯示出來了!