Blog工具|在部落格側邊加入浮動式FB標籤,新增Fb粉絲團外掛Widget

在先前部落格側邊欄浮動式視窗,很少人有,曾看過幾個知名部落格有,
然後詢問過朋友,朋友告知這是JQ,
(對會的人來說,這是簡易JQuery,只要滑鼠移過去就會觸動該事件,就會滑出,滑鼠移開就會收起。)
偏偏我跟JQ不熟不了解,當時搜尋過網路,也沒有人寫。研究和搜尋過後~差點想要放棄了。

Blog第一屏01.jpg


後來終於在因緣際會下,看到某位從無名搬家至PIXNET後,有寫出來,
分享如何設定”在部落格側邊加入浮動式FB”,
設定成功後,就擺放在一旁了,最近有朋友在問起,那~我也來個簡易分享吧。

只要部落格側邊欄有支援javascript,基本上就都可以使用了;
如果不支援的話,就需要另外引入JQuery函式庫了。

就PIXNET來說,是個還蠻齊全的平台,所以早就有支援囉。
★第一步驟、
登入後台,選擇部落格>樣式管理>自訂樣式,選擇「CSS原始碼編輯」。

Blog01.jpg

在後面加上fbbox的CSS語法:
.fbbox {background:url(http://pic.pimg.tw/chiau69/1381984211-3203853996.jpg) no-repeat scroll left center transparent!important;
display:block;float:right;height:270px;width:245px;z-index:99999;position:fixed;right:-250px;top:40%;padding:0 5px 0 46px;}
.fbbox div {border:none;position:relative;display:block;}
.fbbox span {bottom:12px;font:8px “lucida grande”,tahoma,verdana,arial,sans-serif;position:absolute;right:6px;text-align:right;z-index:99999;}
.fbbox span a {color:gray;text-decoration:none;}
.fbbox span a:hover {text-decoration:underline;}

CSS01
▲在網頁編輯軟體,格式整理下畫面。(我喜歡語法整齊排列)

語法裡面的~
1.「http://pic.pimg.tw/chiau69/1381984211-3203853996.jpg」,
請改換成自己想要放的圖片。(當然也可以隨時更換),像我很應景的,換成了黃色小鴨wf%20(63).gif
2.「right:-250px;top:40%」可以調整靠右位置和高度。看自己喜好,我的就是有調整過的位置。

Blog02.jpg

★第二步驟、
側邊欄位設定>新增一個空的側邊欄位,然後在標題和內容下,填入~以下語法。
<! – – FB – ->
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”>
<script type=”text/javascript”>$(document).ready(function() {$(“.fbbox”).hover(
function(){$(this).stop().animate({right: “0”}, “medium”);}, function(){$(this).stop().
animate({right: “-250”}, “medium”);}, 500);});</script>
<div class=”fbbox” style=””><div>
<iframe src=”http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2F
facebook.com%2F411435005724919&amp;width=245&amp;colorscheme=light&amp;
show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270″
scrolling=”no” frameborder=”0″ scrolling=”no” style=”border: medium none; overflow:
hidden; height: 270px; width: 245px;background:#fff;”>

Blog03.jpg

因為這段不是要顯示在部落格的左右側選單上,所以~我選擇跟其他的區塊並放。
然後會另外加上註解語法「<! – – FB – ->」,寫給自己看。

Blog04.jpg

語法裡面的~
411435005724919」請更新成個人粉絲團或朋友粉絲的網址或短網址。例如~
吃心絕對 https://www.facebook.com/ksdelicacy,就是輸入「ksdelicacy」。
愛挖鼻屎的尼力 https://www.facebook.com/nellydyu0608,就是輸入「nellydyu0608」。
若是還沒有設定短網址的粉絲團,就是把https://www.facebook.com/ 後面這一長串網址填入即可。

CSS02▲在網頁編輯軟體,格式整理下畫面。(我喜歡語法整齊排列)

設定完成後,可先預覽看成果,再儲存。如此以來,
這樣邊邊是不是就可以有特別的浮動視窗了呢。wf%20(66).gif

Blog第一屏02.jpg

設定簡易,可以動手試看看喔。

設定的好處是,在一定流量的部落格上,架上一個浮動粉絲框,除了新奇之外XD,
就是對於新進的訪客能快速地知道該部落格有粉絲團,更可以直接按讚加入該粉絲團,
比起先前的FB視窗更加明顯。更可以提高來這網站/部落格訪客率。

另外,JQ有版本問題,所以若設定上有問題,可以先行查看自己是否還有其他JQ設定哦。
script src=”//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”

★延伸閱讀:【運用粉絲團第三方工具,簡單幾步驟讓部落格Blog與粉絲專頁同步網誌


嗨!我是Cherry,您的支持是我寫文的動力 ❤❤❤
喜歡這篇文章或是覺得對你有幫助的話,請不要吝嗇幫我按讚喔 💋

★ 文章是撰寫自己當下的感受
★ 每個人旅遊心情、飲食習慣的不同,人事物的不同,所反應出來的感受,就會有所不同
★ 店家菜單、菜色、售價、環境與服務人員態度,依業者當日可能會有點差異
★ 喜歡文章的話,請到「切琍攝文旅食FB粉絲專頁」按個讚吧
★ 歡迎加入LINE@生活圈
★ 也可以鎖定Cherry的instagram

16 Comments

  1. 張小瑋
    2013-10-22

    謝謝分享 😀
    版主回覆:(10/22/2013 04:08:39 PM)
    趕快試做看看吧^____^

    回覆
  2. 艾爾娃
    2013-10-22

    這超實用的!
    但我沒有經營粉絲團耶>"<
    (謎之音:也沒粉絲吧?!)
    版主回覆:(10/22/2013 04:10:32 PM)
    對阿,蠻實用的筆記XD
    本來沒要寫的,想一想還是寫來分享和提醒自己.
    粉絲哦,朋友和讀者都可以算是吧,
    就好玩阿…
    畢竟粉絲團可以預發,個人帳號沒辦法.
    不然我一般工作上也只會用客戶的粉絲團,
    這回就開了一個自己的玩玩囉…

    回覆
  3. 原來是這樣啊~~謝謝分享
    版主回覆:(10/22/2013 04:11:39 PM)
    對阿,講破是不是感覺就沒什麼了呢,呵呵..
    可以試試看哦,
    等我比較有空再來做幾張新的圖樣XD

    回覆
  4. timi3210
    2013-11-01

    謝謝你的分享, 想不到你的語法, 也可以成功地安裝在yam天空的部落格上 ^^ 分享我安裝後的效果.
    http://blog.yam.com/timi3210
    版主回覆:(11/01/2013 07:11:23 PM)
    有實用到,就好~(開心)
    我有連過去看,跟我一樣很應景的用小鴨圖^______^

    回覆
  5. 小熊吉奈
    2013-11-02

    若更換樣板就要重貼第一段了!!
    版主回覆:(11/02/2013 08:04:17 PM)
    嗯阿,畢竟每款樣板的設計與做法,
    大概都是固定的標準版。

    回覆
  6. mrf0428
    2014-03-16

    感謝教學! 不知道您介不介意我偷了版大的黃色小鴨圖><
    版主回覆:(03/16/2014 05:50:17 PM)
    您好,不會喔~^^

    回覆
  7. Vivi醬Yo
    2014-05-19

    我也成功了!!!耶耶耶 謝謝
    接著要來看看怎麼換圖案,先借黃色小鴨用一下喔^^

    回覆
  8. doubleshe116
    2014-07-23

    謝謝大大分享~~
    對於程式碼超不行的我居然也可以換成功> <
    http://doubleshe61116.pixnet.net/blog
    大家有空也可以來我的部落格坐坐喔~
    我都會分享美妝、保養還有出遊和美食的日記喔
    版主回覆:(07/28/2014 05:17:28 PM)
    ^___________^ 謝謝

    回覆
  9. lynn0120
    2014-11-25

    用了大大小鴨圖,請問若想製造自己專屬圖,如小鴨如何設計?謝謝.
    版主回覆:(11/25/2014 07:38:54 AM)
    您好,
    圖樣可以自行用軟體繪圖設計出來哦!
    謝謝。

    回覆
  10. 亞韻子
    2015-02-25

    研究超久 我成功ㄌ 謝謝你阿 哈~我用你小鴉圖喔
    還有哪邊有別ㄉ圖
    版主回覆:(02/25/2015 02:24:02 PM)
    您好,
    謝謝來訪~^______^
    恭喜成功啦
    不好意思,因工作忙碌,所以近期都沒更新圖示>"<

    回覆
  11. 加一
    2015-05-05

    謝謝分享~超讚的呢!
    版主回覆:(08/14/2015 07:29:03 AM)
    謝謝 ^_____________^

    回覆
  12. 喵仔 ฅ(OωO ฅ
    2015-05-09

    不好意思 點進去文章裡面那個浮動標籤就不會動了 要怎麼解決呢???

    回覆
  13. 昂妞
    2015-08-07

    你好唷~
    第二次看這一偏文章
    終於成功了XD
    不過也是先借妳的圖用><
    請問要把圖傳到哪裡才會產生網址呢?
    我卡關了
    ss改後,貼在側編欄的語法也要換嗎~
    謝謝妳的詳細教學~
    版主回覆:(09/08/2015 02:30:08 PM)
    您好,我是放在痞克邦的相簿,他也會有網址產生喔。
    只要有換圖,圖片位置的網址(也是程式碼的地方)就要更新哦…

    回覆
  14. emma
    2015-09-08

    好實用~~謝謝你的分享~~晚一點來研究看看~~

    回覆
  15. 您好~
    我想請教~我的浮動式FB有完成~
    滑鼠移過去會滑出來~
    但是就是看不到我設置的照片~
    想請問是哪個環節步驟錯了嗎?!
    抱歉~打擾您~
    感謝您播空回答~感恩
    版主回覆:(10/30/2015 04:58:29 AM)
    您好,可以看看是不是圖片尺寸、圖片放置的相簿是否有公開....等等,都是有可能會導致無法看到的因素哦!可以再試試,謝謝。

    回覆
  16. 幸福1+1
    2015-11-10

    借用小鴨圖,很棒,很實用,謝謝^^
    版主回覆:(11/11/2015 01:15:18 PM)
    ^______^

    回覆

發表迴響