Quantcast
Viewing all articles
Browse latest Browse all 789

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

Image may be NSFW.
Clik here to view.
這個不會隨著螢幕捲動而變換位置的 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 的話,可自行修改這幾行的參數。


更多 Facebook 相關工具:
Image may be NSFW.
Clik here to view.

Viewing all articles
Browse latest Browse all 789

Trending Articles