緊貼螢幕邊緣的浮動 FB 粉絲團外掛

這個不會隨著螢幕捲動而變換位置的 Facebook 粉絲團外掛，會黏貼在螢幕邊緣、只顯示垂直的 "Facbook" 字樣，當滑鼠經過時才將 FB 粉絲團滑動顯示出來，而滑鼠離開後則立即收合。這樣的外掛效果並不算少見，許多知名部落格都有設置。

最近處理一個案子需要安裝這個效果時，Google 到不少教學文章，程式碼多半都相同，主要來源為國外網站。由於這些 code 不是我自己寫的，語法看不太習慣，參數也很難調整、修改，於是乾脆重新寫一個。

本篇的版本把所有的參數都開放出來，整個外觀只要看得到的，不論是粉絲團設定、圖片、外觀、尺寸、位置都可修改，算是最方便自訂的一個版本了。

一、安裝程式碼

請到後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入以下程式碼：


先別儲存，請繼續參考以下說明來修改主要參數。

二、修改參數

以下參數修改請參照程式碼行號：

A：第一行可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，如果已經安裝過請刪除此行，以免重複安裝。

J：這是最重要的參數，請將紅字改為自己的 FB 粉絲團網址。

如果沒有特殊需求的話，改完以上兩點，其他都用預設參數，即可存檔看效果了。

若需要更詳細的自訂效果，請繼續往下改。

K~L：分別設定 FB 粉絲團外掛的寬、高 px 值，根據設定的數值，會自動調整版面效果。

M：可調整這個小工具，跟螢幕上方距離的百分比。

N：如果想要自訂圖案的話，請將綠字改為自訂圖片網址即可。

請注意：預設圖片的尺寸為 33x105 px，若使用不同尺寸的圖片，請勿必修改 O~P 的數值，版面比較好看。

O~P：如果使用自訂圖片，這兩行請修改為自訂圖片的寬、高 px 值。

Q~U：如果想要調整粉絲團外掛顯示的內容，可修改這幾行的參數(例如顯示粉絲團最新的貼文)。而修改的方法，請參考「FB 粉絲團外掛簡易安裝法及各種應用方式」→「二、簡易安裝法」的修改說明。

Z~AP：如果熟悉 CSS 的話，可自行修改這幾行的參數。