2016年3月1日 星期二

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

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

Wayne Fu 0 A+
這個不會隨著螢幕捲動而變換位置的 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 相關工具:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP