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

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

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


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

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

一、加入JQuery函式庫

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

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

二、修改成您的粉絲團

第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標籤之前。

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