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

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

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

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

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

一、加入JQuery函式庫

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

[gist id=5480029 file=step1.html]

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

二、修改成您的粉絲團

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

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

[gist id=5480029 file=step2.html]

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

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

三、加入CSS

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

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

[gist id=5480029 file=step3.css]

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

四、大功告成

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

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

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

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

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

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

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

在Google News上追蹤我們最新文章
香腸
香腸

喜歡在網路上透過文字與圖片分文章教學,默默地用鍵盤烤了9年的香腸。另外還身兼阿腸接案餬口飯吃。對了,別叫我阿腸,請叫我香腸,這樣我才知道你看我部落格長大的。

文章: 1781

59 則留言

  1. 請問
    第三步驟加入CSS,我有找到style.css檔案,並加入這五行程式碼,
    也有換圖片位置,但放在style.css的哪裡?
    我放在最上面,結果悲劇發生
    整個網頁的文字圖片版面全跑掉,按復原也無法恢復
    只好更換版面= =

  2. 我到第三布步驟 沒辦法儲存 顯示

    剖析 XML 時發生錯誤 (第 2942 行,第 1 欄):Content is not allowed in trailing section. 隱藏通知
    我是用blogger

    但我痞客幫可以 但這不行ㄟ

  3. 請問香腸
    那如果說想要把你此篇文章中,浮動Facebook粉絲框,設定說”使用手機觀看會自動隱藏”的功能,請問要加入何種語法在裡面呢?謝謝

    • 可以喔~ 那可能你應該是JS衝突,與網站上其他JS衝突,造成無法正確使用,蠻多痞客邦使用者都是這樣… 不過這就要由您自行檢查是哪邊的JS造成衝突,以至於特效無法跑出。

      之前我自己有在痞客邦測試過,他是可以運作的。

    • 要去哪兒可以找出問題呢~~有痞客邦現在網頁的教學方式嗎~~
      不要以前版本的喔~
      不知這個網頁是否更新過

      Disqus 於 2014年3月5日 下午1:58 寫道:

  4. 香腸大大你好:

    我的部落格是痞客幫的~我也都有照以上的方法做了,右邊的確已經有出現FB的圖案了,可是滑鼠靠近的時候粉絲團並沒有滑出來,請問這該怎麼解決呢?網址:http://k882010.pixnet.net/blog

  5. 香腸大您好:

    想請問您一下,是否有幫人修改wordpress網頁的功能,因為有看到你有在推這服務,但我只是想增加一些功能而已(因為本身已經有部落格了),這是我的部落個網址http://eternalagreed.com/

    主要是想在部落格左邊增加像http://www.skystudio2011.com/

    這網站左邊能增加粉絲頁或個人資訊的滑動菜單,假如有的話再麻煩您跟我聯絡,並給我報價,謝謝ORZ

    [email protected]

  6. 你好~關於第一個步驟我有一點問題…..我的部落格是痞客邦的,我去管理後台的CSS原始碼編輯那邊並沒有看到這個東西耶……我找好久都找不到@@所以我的框都跳不出東西…..好奇怪~明明就看到一些有用痞客邦的部落客有成功……拜託幫幫我~感謝你!

    • 痞客邦的部分,就全部程式碼都貼在側邊欄文字模組即可。

      我這邊教學主要是for wordpress 或是自架網站,痞客和wordpress可以完美轉移XD

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料