這個不會隨著螢幕捲動而變換位置的 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~AO：如果熟悉 CSS 的話，可自行修改這幾行的參數。
更多 Facebook 相關工具：
安裝了這個之後，電腦網頁版基本沒問題！
回覆刪除想問一下，到了手機版，是否要按一下邊邊的facebook logo，它才會跑出來？
但，跑出來之後，好像沒辦法缩進去？一直出現在那，遮蓋著網頁！
請問可以怎樣做？謝謝！
網頁版的程式不一定適合手機版使用喔，基本上Blogger的工具都不是為了手機開發的，如果覺得手機版效果不好的工具，建議盡量避免在行動版執行~
刪除Wayne你好，謝謝你提供這麼完整的程式，讓我們可以方便的修改！想請教一個問題，能不能把浮動的FB移到左邊呢？我目前把FB的視窗調到跟視窗一樣高，但是只要使用者想拉動卷軸(滑鼠移過去時)，FB視窗就會跑出來，有點惱人ORZ，所以才想移至左方？W那行應該有經過編碼@@?，完全不知道該如何下手XD
回覆刪除Hi Wei, 你的痞客邦功力很強呢，我有關注過你的作品及教學文~
刪除1. 如果這個區塊高度不大時，這個現象就可忽略，不過區塊高度跟視窗一樣時，的確就有點麻煩。
2. 我會想想程式該怎麼修正，來改善這個現象，那麼就不需要改成把 FB 視窗放到左邊，否則就要當作客製案子大改程式了。
3. 如果可以的話，建議不要把 FB 視窗改得跟視窗一樣高，因為這樣子版權文字就被遮住了。可以把參數 height 改為 $(window).height() - 20 之類的，讓版權文字顯示出來。
Hi Wayne，不好意思我沒有注意到底下有版權宣告，已經修改了 :)
回覆刪除謝謝你呀~被你關注讓我有點驚訝呢，哈哈!!
因為之前為了研究 SEO 效果而測試了一段時間的痞客邦，然後就爬到了你的文章及網站了 ^^
刪除我更改了程式碼，動到的地方不少，因此請全部重新安裝，就可解決你提到的狀況了~~
重新安裝成功了，謝謝你 :DDD
回覆刪除不客氣 :)
刪除如果想要在網誌側邊放入"兩個"粉絲專頁，該怎麼做呢？
回覆刪除這個工具沒辦法這麼做，要另外寫客製程式喔~
刪除在我家放了這個工具，很喜歡，謝謝分享:)
刪除你設計得滿不錯的呢~~ ^^b
刪除我裝了這個跑出來的fb頁面會在原來網站資料的下方，請問應該改哪裡可以讓他在最上層呢？謝謝 ....
回覆刪除請見留言注意事項，我不會隔空把脈喔~
刪除