Photo


I'm Wei [更多關於我]

Traveler / Photographer / Designer

以清新細膩的文字搭配有溫度的照片記錄我的生活點滴,旅行除了沿途的風景,最重要的是途中發生的點點滴滴,唯有照片與文字的交織才能讓美麗的回憶不朽,也是部落格取名為"Dribs & Drabs 點點滴滴"的涵義。


Dribs & Drabs

Dribs & Drabs - Designs

dribs__drabs

weilife.blog@gmail.com

18.bmp

網路上可以查到許多Facebook浮動視窗的語法,但實際用起來發現缺點不少,例如IE瀏覽器觀看時無法順利讓視窗滑出,或是只是要捲動捲軸卻一直動到Facebook浮動視窗,等問題一直困擾著我,相信大家也深受其擾。最近比較認真研究語法,成功解決上述問題,且讓Facebook視窗能夠符合瀏覽器高度,訪客更清楚地看到所有的貼文。呈現效果可以看本頁右手邊,需要點擊Facebook按鈕才會有效果喔!

 

01.gif

效果大概像上圖這樣,但展開的方式有動畫的效果,語法很簡單,分成以下兩個步驟,放在不同的位置,請詳看說明。適用於任何平台、網站。

 

Step 1. JavaScript

放置位置(以下擇一):側欄 / 公告版位 / 頁尾描述

請把以上語法的 DribsAndDrabs 改成你的粉絲團網址後方的名稱 (用Ctrl+f很方便)

例如 https://www.facebook.com/DribsAndDrabs/ 的名稱為 DribsAndDrabs

 

Step 2. CSS

放置位置:CSS原始碼 ( 後台 > 樣式管理 > 部落格CSS原始碼 )

這段不需要修改,若想替換掉Facebook的圖樣,請搜尋 http://pic.pimg.tw/weilife/1464262350-2208202000.png

若想修改底色,請搜尋 #4867aa,共有兩處須修改

套用後被快捷功能bar遮住的話,可以修改#MYFB_slide{top: 0px;} ,數值改成30

 

♥ 部落格樣式 - 實用教學: http://weilife.pixnet.net/blog/category/1358731

文章標籤
創作者介紹

Dribs & Drabs 點點 滴滴

Dribs & Drabs 發表在 痞客邦 PIXNET 留言(74) 人氣()


留言列表 (74)

發表留言
  • 嗨牛奶
  • 找這個教學找好久!!!
    謝謝你 : )
    不過...
    請問如果想把它改到左邊的話要怎麼改呢?
  • 改左邊有點麻煩喔~
    我試試看,再把語法分享出來 :)

    Dribs & Drabs 於 2016/05/27 09:06 回覆

  • Hunt
  • 何時要出其他瀏覽器版本呀
    期待唷 ^.^
  • 其它瀏覽器也適用喔~
    標題會打IE是因為很多外掛在IE會有問題,所以特別強調IE,哈

    Dribs & Drabs 於 2016/05/27 09:02 回覆

  • Hunt
  • 剛以為我的Chrome不行,原來是要點下去才會展開
    拍謝啦,我沒仔細看文....WinXP + Chrome 成功!!
  • :D

    Dribs & Drabs 於 2016/05/27 09:20 回覆

  • 悄悄話
  • 李介介
  • 請問可以用個人 FB 頁面
    不用粉絲頁的方法嗎?
  • FB好像沒有提供個人FB的外掛,只有粉絲專頁才有,若你有找到相關的資料或程式可以給我參考喔 :)

    Dribs & Drabs 於 2016/05/27 16:12 回覆

  • ねこ
  • 我剛以為是滑鼠一過去會自己彈開,一開會自己收回去,結果要點他 XDDD 我是用Chrome、Firefox,IE 已經 N 年沒用過了,剛用 IE 實驗發現一樣要點開
  • 此外掛就是要點擊才會展開喔~因為覺得每次滑鼠移到捲軸旁,視窗都會自動打開有點煩,所以才改成點擊的方式XD

    Dribs & Drabs 於 2016/05/27 16:10 回覆

  • 跳跳兒♥
  • 成功了~~好美唷!!!!!
    超喜歡妳的分享~~~~謝謝妳^^
  • 不客氣 :D

    Dribs & Drabs 於 2016/05/27 23:20 回覆

  • Mia.依
  • 成功了~謝謝Wei無私的分享^^
    只是我做的FB圖檔好像太長XD 有被切到
  • 你可以修改 #MYBTN 裡面的長高設定。另外,我發現你的版面頁尾都不見了~麻煩檢查看看哪邊出問題,copyright消失了!

    Dribs & Drabs 於 2016/05/27 23:23 回覆

  • Mia.依
  • !!!請問我左側留言跟誰來我家那邊都不見了是因為語法關係嗎?
    重整好幾次都看不到東西
  • 已解決囉 :)

    Dribs & Drabs 於 2016/05/27 23:23 回覆

  • Mia.依
  • 天啊!真的耶!明明沒刪掉的...留言跟誰來我家那邊都會一直消失,有時又會出現,真的好怪完全不知道是甚麼原因ˊˋ
  • 我最近也有發現其他人也是這樣~還在找問題中

    Dribs & Drabs 於 2016/05/28 07:53 回覆

  • Emily-瑜
  • 真的很棒的教學^^謝謝你貼心分享給大家
  • 謝謝你 :D

    Dribs & Drabs 於 2016/05/30 09:04 回覆

  • T&R
  • 好用 謝謝
  • 不客氣 :D

    Dribs & Drabs 於 2016/05/30 09:04 回覆

  • 訪客
  • weiwei想請教你,我的上面會被卡到
    該修改哪邊的數據呢
    謝謝你>.<
  • 要給我看錯誤畫面,才能偵錯喔!

    Dribs & Drabs 於 2016/05/30 22:08 回覆

  • ♥❤甜蜜蜜
  • 我找超久的,無意間看到~真的很謝謝妳也
    而且部落格的風格 好舒服歐 真的很讚
  • 不客氣唷 :D
    謝謝你的稱讚>/////<

    Dribs & Drabs 於 2016/05/31 22:50 回覆

  • 史努比
  • 推推推

    可以請問我要怎麼刪除我原來的FB側欄呢?
    我也忘了我當初怎麼設定的,找不到在那裡
    所以變成2個了,可以幫我看一下嗎?感謝
    http://anita6426.pixnet.net/blog
  • 能放語法的就這幾個地方,你可以找看看
    側欄、公告區塊、頁尾描述

    Dribs & Drabs 於 2016/06/03 21:17 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 西踢city
  • 耶耶~我也順利套用了 謝謝Wei~~~
    之前一直沒有擺fb連結正是因為那個浮動的樣子很佔位置很討厭
    好在我們心有靈犀一點通(嗯?) Wei這款真是太美啦!!
    不過如果用手機瀏覽網頁的話會卡在左上角沒辦法隨著螢幕放大縮小變化
    希望可以等到修改版~~
    真心謝謝Wei 辛苦你了:)
  • 我用手機看是正常的 @@"
    有時候會是為各家瀏覽器定義不同而有所變化,哀,網頁就是這麼麻煩
    謝謝你喜歡喔,等我有空再來研究一下

    Dribs & Drabs 於 2016/06/23 19:30 回覆

  • 瑞秋兒
  • 我用ie開~無法顯示耶~
  • 請更新你的IE喔,我看都是正常的

    Dribs & Drabs 於 2016/06/23 19:28 回覆

  • Misa
  • 超酷的!!!
    謝謝你:))
  • 不客氣 :D

    Dribs & Drabs 於 2016/07/09 08:53 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • shetraveling
  • 不好意思,我照您的方式,步驟一將語法放到側欄中,步驟二一樣將語法放到側欄,可是怎麼沒有啊? 謝謝
  • 步驟二不是放側欄喔~再仔細看一下!

    Dribs & Drabs 於 2016/07/26 22:14 回覆

  • 悄悄話
  • 悄悄話
  • SUGAR
  • 哇謝謝你~~~
    兩個項目我都成功套用了:)
  • 期待你的遊記喔 :D

    Dribs & Drabs 於 2016/07/28 18:24 回覆

  • Travel Non-Stop
  • 謝謝妳的教學,我套用有成功唷! 一開始雖然失敗,但後來調整高度,就沒有問題了!
  • 不客氣 :D

    Dribs & Drabs 於 2016/07/29 08:37 回覆

  • 蘇蒂娜
  • 謝謝分享~~~
  • 不客氣 :D

    Dribs & Drabs 於 2016/07/30 21:59 回覆

  • 翔鴻婚宴會館
  • 有成功~~~~~很漂亮~~~~感謝Wei!!!

    只是有一個問題~為什麼點FB出來~她會把我的文章都擠下去呀@@?

    我沒有改什麼說= ="

    網址:
    http://xhwedding.pixnet.net/blog
  • 語法請重新套用,修改時小心點
    會造成這樣是不小心刪除了一些HTML符號,導致整個版面錯亂

    Dribs & Drabs 於 2016/08/31 22:15 回覆

  • 悄悄話
  • 翔鴻婚宴會館
  • 沒動的話會變這樣~也會往下啦XD
    而且還會擋住~= ="
    版型套版的話,目前一字沒改~不知道是不是因為個人資訊那些在右邊導致的問題...

    或者是我中間文章的部分範圍太大,導致拉出來的FB會強制把我往下?我看了成功者,都沒有滿版或FB拉出來底下有文章的|||

    感謝wei回應!
  • 你有改動CSS語法喔!!
    position應該要fixed才對

    Dribs & Drabs 於 2016/09/01 08:40 回覆

  • 悄悄話
  • sordoo
  • 感謝你^^
    非常喜歡~~~~~~~~~
  • 感謝支持 :D

    Dribs & Drabs 於 2016/09/02 15:09 回覆

  • 詩詩
  • 謝謝分享~~
  • 不客氣 :)

    Dribs & Drabs 於 2016/09/05 21:42 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 台熊
  • 多謝分享:) 之前用的都會突然消失 發現這個真的太好啦~
  • 很開心你喜歡這個外掛 :)

    Dribs & Drabs 於 2016/10/07 17:42 回覆

  • 台熊
  • 想請問一下剛發現外掛按進去後都沒內容了問題出在哪呢? 早上我按還很正常呢!!
    先謝謝了~
  • 我現在看是正常的喔~都有出現

    Dribs & Drabs 於 2016/10/07 19:19 回覆

  • 台熊
  • 謝謝回復!難道是只有我自己看不到? 沒關係大家可以看到就好 :)
  • 可以換個瀏覽器試試喔 :)

    Dribs & Drabs 於 2016/10/08 08:42 回覆

  • 台熊
  • 不好意思Wei,我試了兩個瀏覽器都沒內容耶~請問可以去哪裡檢查錯誤呢?謝謝
  • 那你可以看到我的部落格右邊的FB展開內容嗎?
    另外請問觀看的瀏覽器是?

    Dribs & Drabs 於 2016/10/08 20:41 回覆

  • 台熊
  • 謝謝回覆,我可以看到妳的FB展開,我的瀏覽器是Chrome. 我試過直接貼你的Java Script完全不改在我的blog就可以看到FB展開的內容,然後再把語法換成我的網址就又可以顯示出我的FB.但奇怪的是當晚一點再去點展開內容就會不見了...(哭)
  • 我看了好幾次,FB的內容都有出來喔
    或是換台電腦試試看,應該是沒問題的

    Dribs & Drabs 於 2016/10/09 10:11 回覆

  • 台熊
  • 好的我試試謝謝妳喔~
  • 不客氣 :)

    Dribs & Drabs 於 2016/10/10 20:14 回覆

  • winter
  • 請問這個語法貼在wordpress沒辦法顯示
    是因為我沒有裝java的外掛嗎
  • wordpress的話,步驟一裡的這段
    var BODY = document.getElementsByClassName("topbar-placeholder");
    topbar-placeholder需要改掉,改成最外層的標籤,因為不太確定wordpress的架構,如果方便的話留個網址會更清楚

    Dribs & Drabs 於 2016/11/29 13:40 回覆

  • Naomi
  • 我成功了椰!!!謝謝你耶!!!還幫我用網址,真的好感謝你
  • 不客氣喔 :P

    Dribs & Drabs 於 2016/12/08 20:57 回覆

  • JK Dairy
  • 終於成功了~ 非常感謝妳的分享呢 :)
  • 不客氣 :D

    Dribs & Drabs 於 2016/12/12 15:01 回覆

  • 阿凱
  • 請問如果想將這個程式代碼直接以HTML方式鑲嵌到網站中 要如何使用呢?
    我好喜歡這個款式阿~~~
  • 會建議直接使用本頁教學的JS的語法,因為JS會自動抓瀏覽器高度讓FB粉絲頁滿版,用HTML的話只能設固定高度

    如果你要用在網頁的話,請改JavaScript語法的第五行 "topbar-placeholder",改成Body下的第一個class標籤,其它的照用就可以了

    Dribs & Drabs 於 2016/12/20 09:28 回覆

  • 哲凱
  • 嗨,Wei小姐,不好意思又來煩你了!!
    我是上面留言的阿凱
    因為就讀土木工程系,對網頁程式語言可謂模不著頭緒。
    關於Wei小姐所說的:
    JavaScript語法的第五行 "topbar-placeholder",改成Body下的第一個class標籤
    我用了header-page改寫,但沒有顯示,
    在麻煩Wei小姐有空閒時 幫幫忙!!!

    p.s 我是用weebly建立網站的,之前改版後取消直接以CSS編輯,
    因此我直接用<style type="text/css">把您的CSS原始碼框起來,不知道這樣行不行得通 >///<
    以下是我亂改的 QQ
    ----------------------------------------------------------------------------------------------------
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    _Height = ($(window).height());

    <style type="text/css">
    #MYFB_slide{
    position: fixed;
    top: 0px;
    right: 0px;
    height: 100%;
    .
    .
    .
    height: 100%;
    padding-bottom: 40px;
    }
    </style>

    var BODY = document.getElementsByClassName("header-page");
    BODY[0].outerHTML = BODY[0].outerHTML+"<div id=\"MYFB_slide\"><a id=\"MYBTN\">Click</a><div id=\"MYIFRAME_outter\"><div id=\"MYIFRAME\"><iframe src=\"https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FDribsAndDrabs%2F&tabs=timeline&width=400
    .
    .
    .
    $("#MYBTN").click(function(){
    $("#MYIFRAME").toggle(1000);
    });
    });
    </script>
  • 已在FB回應

    Dribs & Drabs 於 2016/12/20 14:59 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 阿白| RiAn日安
  • 感謝Wei的分享^^
    真的很謝謝你分享這些語法,讓即使沒有CSS或設計底子的人,也有機會使用這麼美好的版面裝飾自己的Blog。
    祝你一切順心:)
  • 謝謝你的祝福 :D
    也祝你開心快樂,一起分享美好的事物吧!

    Dribs & Drabs 於 2017/01/17 21:17 回覆

  • 悄悄話
  • 嚕嚕
  • 謝謝分享~~超喜歡!
  • 謝謝你的喜歡 :D

    Dribs & Drabs 於 2017/02/21 16:16 回覆

  • 悄悄話
  • 涵兒
  • 謝謝你~~~~~ 超強大!!!!><
  • 不客氣 :D

    Dribs & Drabs 於 2017/04/16 21:25 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • JC
  • ~~ oh yeah ~~ 成功了!!
    謝謝妳!!
  • 不客氣 :D

    Dribs & Drabs 於 2017/09/03 21:01 回覆

  • Miku
  • 謝謝你的分享^_^
    我想問一下我設定好之後
    往下拉的話會有一大片藍底,這樣是正常的嗎!?
  • 如果不改變視窗大小的話,理論上不會有藍底出現
    FB的視窗會填滿目前瀏覽器視窗的高度

    Dribs & Drabs 於 2017/09/13 16:00 回覆

找更多相關文章與討論