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

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

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

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

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

文章目錄
  1. 一、加入JQuery函式庫
  2. 二、修改成您的粉絲團
  3. 三、加入CSS
  4. 四、大功告成

一、加入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的哪裡?
    我放在最上面，結果悲劇發生
    整個網頁的文字圖片版面全跑掉，按復原也無法恢復
    只好更換版面= =

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

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

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

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

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

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

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

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

  8. 香腸大大你好：

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

  10. 香腸大您好：

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

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

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

    [email protected]

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

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

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

發佈留言

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

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