[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 的外掛元件得以重新被解析一次。

果然,在主控台中手動呼叫該方法後,按讚框成功地顯示出來了!

Continue reading

[Facebook][jQuery] 讓「讚」顯示完整的數字

Standard

我們在網頁中嵌入 Facebook 的「讚」按鈕,當被讚超過一定數量,就不會顯示明確的數字,如下圖:

但這個案子希望能顯示完整的數字,要怎麼解決呢?

對了,順帶一提,「讚」的數字包含「讚」以及「分享」次數。( The count on the Like button will include all likes and shares — from Faceook Developer, Like Button

 

思路是這樣,將原有的數字藏起來,然後加入我們用 Graph API 查詢出來的明確數字,噢對,你還得準備數字對話泡泡的圖檔。

註:不知道這樣的解法是否有違反 Facebook 使用規範 品牌引用許可資源中心 – 使用方針 – Facebook 讚按鈕 中的「你可以依照所需調整大小,但是不能以其他任何形式修改「讚」按鈕 (如變動設計樣式)」。

Continue reading