[教學]在痞客邦、部落格嵌入Facebook粉絲專頁FB外掛的2種方法

Mio

Published in

斜槓女紙

6 min readNov 27, 2020

寫文這麼久，常常看到很多部落格的版面都會放入Facebook粉絲團的外掛，或者是比較有互動性的浮在兩側，滑鼠移過去的時候會跑出來跟你說👋Hello!

本來懶惰如我是沒想要開FB粉絲頁的，總覺得自己會懶得發文XD 但我最終還是開了哈哈哈(說啥廢話🤣🤣)

ANYWAY~這麼多大神都放了Facebook粉絲團在部落格裡面，一定要跟風一下的啊~~不過FB粉絲頁的外掛百百種，彙整了一下最常見的兩種方法，就算是完全不會程式的超級新手也能直接用喔！

始まります~

方法一：浮動版FB粉絲團外掛(目前使用der)

第一次想嵌入Facebook粉絲團的時候原本想用這種方法，但不知道哪裡搞錯，一直都沒能讓粉絲頁滑動出來，我難過😭

當下也沒想太多，甚至也沒想抓bug(那天好像哪裡壞掉惹😧)，只覺得可能我用錯了，默默地先用了第2種方法。

直到前幾天，很不信邪的再試了一次，這次有記得帶我的coding腦做事，所以順利的找到了上次沒能成功的原因，下面馬上分享給大家唷！

步驟一：複製程式碼到

⚠注意：複製之前要先記得把下面標註的地方改成自己粉絲專頁的專屬網址

<div class="fbbox" style="right: -292px;">
    <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fbusiness.facebook.com%2F這邊輸入你的粉絲頁網址%2F&tabs=timeline&width=500&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="500" height="300" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true";background-color: white;></iframe>
</div>

所謂的粉絲頁專屬網址就是你的FB粉絲網址後面那一長串，如下圖紅框標示處。

(https://www.facebook.com/codingGirl.life)

步驟二：將程式碼貼到部落格後台

接下來把剛剛複製好的程式碼貼到部落格後台，以痞客邦後台為例，可以貼到【公告版位】、【頁尾描述】，或是新增一塊【側欄版位】。

我個人是貼在 公告版位 裡面XD

▶▶貼在公告版位

▶▶貼在側欄版位

步驟三：複製CSS語法並貼到部落格後台

/*-- fb粉絲團css --*/.fbbox {
  transition: 0.6s;
  background: url("http://pic.pimg.tw/blogbackup/1416463254-1526616050.png") no-repeat scroll left top transparent !important;
  display: block;
  float: right;
  height: 240px;
  padding: 0 0 0 46px;
  width: 292px;
  z-index: 99999;
  position: fixed;
  right: -260px;
  top: 15%;
}
.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: #808080;text-decoration: none;}
.fbbox span a:hover {text-decoration: underline;}
.fbbox:hover, .fbbox:focus {right: 0 !important;}