最近常常有人問我說,該如何在部落格側邊欄加入一個浮動的粉絲框,滑鼠滑過去就會顯示出來?其實這只是簡單的JQuery,滑鼠動過去觸動,就會滑出,滑鼠移開就會收起。想要加入這個非常簡單,只要將下方提供的語法直接張貼在部落格的側邊欄,改一下裡面的粉絲頁面連結,就可以輕鬆達成效果囉!
在側邊欄的瀏覽器邊邊上加入一個浮動粉絲框,可以有助於社群的推廣,讓新進的訪客可以很快地知道你有粉絲團,對於網站有興趣的內容可以直接點讚,之後只要有發新訊息就會自動出現在他們的塗鴉牆上,這樣比辦活動、抽獎衝粉絲人數還來得有意義,雖然增加人數不一定很快,但當網站到達一定的程度時,每天都會固定有人會加入追蹤,這些願意主動加入的人,會提高網站訪客到訪率,成為老主顧。
這個加入浮動粉絲框在部落格側邊欄,其實是來自國外部落格分享的一段語法,謝謝阿福提供給我。現在跟大家分享一下那個在側邊欄可以顯示浮動Facebook粉絲框的語法。只要你的部落格側邊欄支援javascript,基本上就可以達成效果了,使用此元件時,需要額外引入JQuery函式庫,如果你部落格本身已經有引用,可以跳過引用,下面會有詳細的介紹。
如果您是痞客邦、Blogger用戶,覺得以下方法很麻煩,可以使用工具邦元件:一段語法就能搞定,請按這裡申請。
一、加入JQuery函式庫
假設你的網站本身已經有載入JQuery函式庫,就可以跳過這部分,如果沒有的話請在網頁的head標籤之前加入以下語法。(這個函式庫來自Google CDN)
[gist id=5480029 file=step1.html]
二、修改成您的粉絲團
第1步 將以下語法「sofreecc」換成您FB的自訂名稱。也就是「http://www.facebook.com/」網址斜線後面的東西,例如下圖。
[gist id=5480029 file=step2.html]
第2步 將語法直接加入到部落格的側邊欄。以WordPress為例,到【後台】→【模組】,從左方拉一個空白的文字模組到側邊欄,展開之後裡面填寫第1步驟的語法。
三、加入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]
四、大功告成
第1步 滑鼠移動過去前,是靜止的。
第2步 滑鼠移動過去後會滑動出來!
以上的語法是來自於這個網站,圖片的部分有換過,因為他原先提供的圖片含有微微的浮水印。補充一下,其實國外那篇文章講解的方式比較簡單,把以上所有的程式碼都丟到側邊欄的文字模組內,就可以做到效果了。
但是,全部丟到側邊欄方式雖然方便,但對於想要將網站做成符合W3C驗證可以過的朋友,這樣可不是一個最佳方式,因為程式碼雜亂,比較好的方式是將各類語法分開放置。事實上本篇教學前面第二階段那邊,如果懂JQuery的朋友,應該知道這樣放也不是正確的方式,是可以將那串用到head標籤之前。
但無論如何,如果你聽不懂香腸這邊講得落落長卻似乎沒什麼重點的話,那做就對了!
請問
第三步驟加入CSS,我有找到style.css檔案,並加入這五行程式碼,
也有換圖片位置,但放在style.css的哪裡?
我放在最上面,結果悲劇發生
整個網頁的文字圖片版面全跑掉,按復原也無法恢復
只好更換版面= =
成功了 第三不用
我到第三布步驟 沒辦法儲存 顯示
剖析 XML 時發生錯誤 (第 2942 行,第 1 欄):Content is not allowed in trailing section. 隱藏通知
我是用blogger
但我痞客幫可以 但這不行ㄟ
那可能就是語法加入錯位置了,blogger您得自行研究了@@
成功了 第三步驟不用 謝啦
請問香腸
那如果說想要把你此篇文章中,浮動Facebook粉絲框,設定說”使用手機觀看會自動隱藏”的功能,請問要加入何種語法在裡面呢?謝謝
可以搜尋 media query css 這些關鍵字,用判斷螢幕寬度進行CSS調整。
謝謝解惑,再研究看看
請問您左邊的FB、Google+、Twitter 的按鈕是怎麼用的呢?
那個透過CSS去改位置,搭上Javascript 去做CSS加入滾動。
你可以拆解我提供的免費版型: http://sofree.cc/themes/
裡面有語法可參考。
你好,我想設制這樣的粉絲框,可是都無法操作
我是 疲客邦的~~請問有這個網頁的教學嗎~~
謝謝你
李小姐
痞客邦做法與上列相同,只是所有程式碼都須直接放置側邊的文字模組中。
或是參考有些痞客邦部落格有放置的網站。
我查詢過了,也用過了,一樣無法更改語法跑粉絲框
Disqus 於 2014年3月5日 上午11:47 寫道:
可以喔~ 那可能你應該是JS衝突,與網站上其他JS衝突,造成無法正確使用,蠻多痞客邦使用者都是這樣… 不過這就要由您自行檢查是哪邊的JS造成衝突,以至於特效無法跑出。
之前我自己有在痞客邦測試過,他是可以運作的。
要去哪兒可以找出問題呢~~有痞客邦現在網頁的教學方式嗎~~
不要以前版本的喔~
不知這個網頁是否更新過
Disqus 於 2014年3月5日 下午1:58 寫道:
這不影響喔,照理講都可以用。
找問題可以試試看安裝 Firefox + Firebug 找JS問題囉!
我要改放在視窗的左邊怎麼改?
要改左邊的話,可能需要您自行研究看看了~~~
我們這邊僅有提供右側的教學 :)
香腸大大你好:
我的部落格是痞客幫的~我也都有照以上的方法做了,右邊的確已經有出現FB的圖案了,可是滑鼠靠近的時候粉絲團並沒有滑出來,請問這該怎麼解決呢?網址:http://k882010.pixnet.net/blog
沒看到你網站有放~
滑過去無效應該是JS沒有引入正確~ 你把程式碼都丟到側邊模組應該就可以了~~~
請問你怎麼操作的,我也是痞客邦的~~可是找不到外觀和模組~
終於弄好了,謝謝香腸哥 分享^^
恭喜 :)
香腸大您好:
想請問您一下,是否有幫人修改wordpress網頁的功能,因為有看到你有在推這服務,但我只是想增加一些功能而已(因為本身已經有部落格了),這是我的部落個網址http://eternalagreed.com/
主要是想在部落格左邊增加像http://www.skystudio2011.com/
這網站左邊能增加粉絲頁或個人資訊的滑動菜單,假如有的話再麻煩您跟我聯絡,並給我報價,謝謝ORZ
[email protected]
目前主要是做客製化,暫時沒有提供修改版型服務喔 :)
你好~關於第一個步驟我有一點問題…..我的部落格是痞客邦的,我去管理後台的CSS原始碼編輯那邊並沒有看到這個東西耶……我找好久都找不到@@所以我的框都跳不出東西…..好奇怪~明明就看到一些有用痞客邦的部落客有成功……拜託幫幫我~感謝你!
“head標籤”這個東西
那你就把本來要放 head 的部分,直接放到側邊模組囉!
不過換WordPress比較實在 :P
我成功了!!!!!!!!!!!感謝你!!!!!
恭喜你 :)
你好~如果我想要改成這個在左邊,她整體是向左滑動。要修改哪一部分的語法? 謝謝
修正 : 格子在左邊,向右滑動
這個你要自己測試了,不過你可以去研究一下 http://www.muzik-online.com/ 的撰寫方式。
謝謝~
您好
不好意思,我照著你的做法做,但是使用做不出效果
想請問
以痞客邦來說,JQuery函式庫要貼在哪裡呢??
痞客邦的部分,就全部程式碼都貼在側邊欄文字模組即可。
我這邊教學主要是for wordpress 或是自架網站,痞客和wordpress可以完美轉移XD
謝謝,我成功了
可是我的facebook符號不見了
http://www.089346999.com
請問我置入了語法
但是滑鼠移動過去後不會滑動出來!
是哪裡出了問題
我的ie也是失敗><
能請您看看嗎?
謝謝囉~
sorry~
已經找到原因
是cookie在作怪…
謝謝您的教學,很棒。
可是不好意思,我照您的教學做出來,也成功了。
可是是只有在google瀏覽器成功。
用IE瀏覽整個壞掉了><
這是我做的網頁
http://citybox.com.tw/fb/20130104-FB.html
可以麻煩您幫我看一下嗎?真的很不好意思
超級感謝你的^_____^
您好!!
我嘗試過了, 但不知為何做不出這效果啊!
大家都可以,確定是否有正確引入JQuery~ ?
請問我置入了語法
但是是在網站最下方 不是像您右邊的!!
是哪裡出了問題
看看是否網站內本身的JQuery相衝或是擺放位置不對,或是語法有漏掉,因為這些都可能成為原因
:)
謝謝你大費周章的寫這篇文章~! (大推阿~!!!
雖然我的網站還沒用WordPress
不過 我還是上了一課~ 謝囉 ^^
沒有WordPres 這也可以用哦~
耶~~~~我剛剛也用成功了,多謝教學!!
恭喜你~
我怎麼覺得第一張圖片那個紅線是歪的
((好像看錯重點了 =P
那是做效果的..
我很好奇 這可以在opencart 或者其他購物車上實現嗎?
可以的,只是要找對位置加入
謝謝你的教學~很實用~已加入我的blogger!!
哈~ 希望這樣可以增加粉絲數 :)
大陆ie9下,那个facebook的边框弹不出来,不过能弹出来也没什么用。
是只有大陸嗎? 你是用本站做測試嗎?
我剛剛測試我的IE9,運作上是正常的 @@