【教學】FACEBOOK粉絲框新改版，部落格嵌入FB粉絲團外掛語法，痞客邦版型側邊隱藏視窗圖解步驟－two013

【痞客邦嵌入FB粉絲團】部落格側邊浮動FB側欄語法/隱藏伸縮粉絲框，圖解步驟教學

FB粉絲團浮動外叫粉絲框，部落格嵌入FB名片&facebook粉絲團外掛語法，可調整欄位版型

2019年FB官網粉絲頁外掛程式教學連結 https://developers.facebook.com/docs/plugins/page-plugin

粉絲專頁外掛程式可在網站上內嵌和推廣任何公開的Facebook粉絲專頁

訪客在部落格就能對粉絲專頁按讚分享。粉絲框嵌入個人部落格中也可設定調整版面欄位大小及位置

首先需 建立粉絲專業，並以粉絲團身分登入FB >> 接著點選FB外掛網站Facebook Page Plugin產生語法

https://developers.facebook.com/docs/plugins/page-plugin?locale=zh_TW

進入網站後，系統會自動將粉絲團網址登錄，並顯示粉絲框預覽畫面

系統預先勾選項目為Adapt to plugin container width和Show Friend's Faces

此時須調整的大概只有寬度及高度，未填入數字會已預設狀態顯示較完整粉絲框

調整任何勾選項目或數值後，點擊空白處，即可更新顯示最新設定預覽圖

雖然網頁預設長寬值能顯示更多的粉絲團文字和圖片

但013考慮到若游標誤觸隱藏指標，會讓粉絲框一直跑出來很妨礙閱讀

於是將數值調整在可看見部分首圖和文字，卻又不會遮擋內文的300*450

確認粉絲框的各項設定後請點選預覽下方的藍色 Get Code 取得2個程式碼

開啟部落格>>進入後台管理>>側邊欄位設定

以痞客邦為例，點擊右方新增版位→放置會顯示在前台的欄位→儲存

新增側欄語法：

<div class="fbbox" style="right: -292px;">
這邊插入剛剛的2個語法
</div>
<script>
jQuery(function($){
$(".fbbox").hover(function(){
$(this).stop().animate({right: "0"}, "medium");
}, function(){
$(this).stop().animate({right: "-292"}, "medium");
}, 500);
});
</script>

完成側邊欄位設定後，開啟管理後台>>樣式管理>>CSS原始編碼器

在編碼器最末端加入下面的語法(建議先預覽確認再儲存)

/*fb粉絲團css*/
.fbbox{background: url("http://pic.pimg.tw/blogbackup/1416463254-1526616050.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 0 0 46px;width: 292px;z-index: 99999;position:fixed;right:-260px;top:20%;}
.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;}