2016年3月7日

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

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 相關工具:

14 則留言:

  1. 安裝了這個之後,電腦網頁版基本沒問題!
    想問一下,到了手機版,是否要按一下邊邊的facebook logo,它才會跑出來?
    但,跑出來之後,好像沒辦法缩進去?一直出現在那,遮蓋著網頁!
    請問可以怎樣做?謝謝!

    回覆刪除
    回覆
    1. 網頁版的程式不一定適合手機版使用喔,基本上Blogger的工具都不是為了手機開發的,如果覺得手機版效果不好的工具,建議盡量避免在行動版執行~

      刪除
  2. Wayne你好,謝謝你提供這麼完整的程式,讓我們可以方便的修改!想請教一個問題,能不能把浮動的FB移到左邊呢?我目前把FB的視窗調到跟視窗一樣高,但是只要使用者想拉動卷軸(滑鼠移過去時),FB視窗就會跑出來,有點惱人ORZ,所以才想移至左方?W那行應該有經過編碼@@?,完全不知道該如何下手XD

    回覆刪除
    回覆
    1. Hi Wei, 你的痞客邦功力很強呢,我有關注過你的作品及教學文~

      1. 如果這個區塊高度不大時,這個現象就可忽略,不過區塊高度跟視窗一樣時,的確就有點麻煩。

      2. 我會想想程式該怎麼修正,來改善這個現象,那麼就不需要改成把 FB 視窗放到左邊,否則就要當作客製案子大改程式了。

      3. 如果可以的話,建議不要把 FB 視窗改得跟視窗一樣高,因為這樣子版權文字就被遮住了。可以把參數 height 改為 $(window).height() - 20 之類的,讓版權文字顯示出來。

      刪除
  3. Hi Wayne,不好意思我沒有注意到底下有版權宣告,已經修改了 :)
    謝謝你呀~被你關注讓我有點驚訝呢,哈哈!!

    回覆刪除
    回覆
    1. 因為之前為了研究 SEO 效果而測試了一段時間的痞客邦,然後就爬到了你的文章及網站了 ^^

      我更改了程式碼,動到的地方不少,因此請全部重新安裝,就可解決你提到的狀況了~~

      刪除
  4. 重新安裝成功了,謝謝你 :DDD

    回覆刪除
  5. 如果想要在網誌側邊放入"兩個"粉絲專頁,該怎麼做呢?

    回覆刪除
    回覆
    1. 這個工具沒辦法這麼做,要另外寫客製程式喔~

      刪除
    2. 在我家放了這個工具,很喜歡,謝謝分享:)

      刪除
    3. 你設計得滿不錯的呢~~ ^^b

      刪除
  6. 我裝了這個跑出來的fb頁面會在原來網站資料的下方,請問應該改哪裡可以讓他在最上層呢?謝謝 ....

    回覆刪除
    回覆
    1. 請見留言注意事項,我不會隔空把脈喔~

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。