[教學]在側邊欄加個浮動Facebook粉絲框

發表時間： 2012-11-12

最近常常有人問我說，該如何在部落格側邊欄加入一個浮動的粉絲框，滑鼠滑過去就會顯示出來？其實這只是簡單的JQuery，滑鼠動過去觸動，就會滑出，滑鼠移開就會收起。想要加入這個非常簡單，只要將下方提供的語法直接張貼在部落格的側邊欄，改一下裡面的粉絲頁面連結，就可以輕鬆達成效果囉！

在側邊欄的瀏覽器邊邊上加入一個浮動粉絲框，可以有助於社群的推廣，讓新進的訪客可以很快地知道你有粉絲團，對於網站有興趣的內容可以直接點讚，之後只要有發新訊息就會自動出現在他們的塗鴉牆上，這樣比辦活動、抽獎衝粉絲人數還來得有意義，雖然增加人數不一定很快，但當網站到達一定的程度時，每天都會固定有人會加入追蹤，這些願意主動加入的人，會提高網站訪客到訪率，成為老主顧。

這個加入浮動粉絲框在部落格側邊欄，其實是來自國外部落格分享的一段語法，謝謝阿福提供給我。現在跟大家分享一下那個在側邊欄可以顯示浮動Facebook粉絲框的語法。只要你的部落格側邊欄支援javascript，基本上就可以達成效果了，使用此元件時，需要額外引入JQuery函式庫，如果你部落格本身已經有引用，可以跳過引用，下面會有詳細的介紹。

如果您是痞客邦、Blogger用戶，覺得以下方法很麻煩，可以使用工具邦元件：一段語法就能搞定，請按這裡申請。

文章目錄

一、加入JQuery函式庫
二、修改成您的粉絲團
三、加入CSS
四、大功告成

一、加入JQuery函式庫

假設你的網站本身已經有載入JQuery函式庫，就可以跳過這部分，如果沒有的話請在網頁的head標籤之前加入以下語法。(這個函式庫來自Google CDN)

二、修改成您的粉絲團

第1步 將以下語法「sofreecc」換成您FB的自訂名稱。也就是「http://www.facebook.com/」網址斜線後面的東西，例如下圖。

[教學]在側邊欄加個浮動Facebook粉絲框

第2步 將語法直接加入到部落格的側邊欄。以WordPress為例，到【後台】→【模組】，從左方拉一個空白的文字模組到側邊欄，展開之後裡面填寫第1步驟的語法。

[教學]在側邊欄加個浮動Facebook粉絲框

三、加入CSS

將以下CSS貼到您的部落格CSS部分，如果以WordPress來講，就是開啟佈景主題目錄下的style.css檔案，透過NotePad++進行修改。主題目錄：「/wp-content/themes/你佈景主題名稱/style.css」。

「http://a.imageshack.us/img525/9882/47256382.png」部分可以換成您圖片位置，如果大家都連這張圖片，到時候爆掉舊囧了。圖片下載→按這裡

[教學]在側邊欄加個浮動Facebook粉絲框

四、大功告成

第1步 滑鼠移動過去前，是靜止的。

[教學]在側邊欄加個浮動Facebook粉絲框

第2步 滑鼠移動過去後會滑動出來！

[教學]在側邊欄加個浮動Facebook粉絲框

以上的語法是來自於這個網站，圖片的部分有換過，因為他原先提供的圖片含有微微的浮水印。補充一下，其實國外那篇文章講解的方式比較簡單，把以上所有的程式碼都丟到側邊欄的文字模組內，就可以做到效果了。

但是，全部丟到側邊欄方式雖然方便，但對於想要將網站做成符合W3C驗證可以過的朋友，這樣可不是一個最佳方式，因為程式碼雜亂，比較好的方式是將各類語法分開放置。事實上本篇教學前面第二階段那邊，如果懂JQuery的朋友，應該知道這樣放也不是正確的方式，是可以將那串用到head標籤之前。

但無論如何，如果你聽不懂香腸這邊講得落落長卻似乎沒什麼重點的話，那做就對了！