【教學設定】簡單上手痞客邦側欄置入FB粉專（浮動拉霸版） @ 千步走台灣愛。點滴！

版面再升級，增能持續學

好不容易設定好側欄，卻發現還有更酷的

你看過網頁上FB粉專浮動拉霸嗎?

在痞客邦也能做的到，畫面變得更加生動活潑

YT 封面照

１。首先請在網路搜尋：FB粉絲專頁外掛程式（如下圖）

https://developers.facebook.com/docs/plugins/page-plugin

【教學設定】痞客邦側欄置入FB粉專丶IG丶YT，嵌入程式碼步

２。Facebook粉絲專頁網址版面設定

2-1　就輸入您自己的［粉絲專頁網址］

2-2　設定頁籤、寛度、高度及其他選項

2-3　下方方框可以做［樣式的預覽］

2-3　找到想要的格式，欄位都設置好後，就點擊［取得程式碼］

【教學設定】痞客邦側欄置入FB粉專丶IG丶YT，嵌入程式碼步

３。回到痞客邦側欄做設定

3-1　選擇［JavaScript SDK的程式碼］兩段都做複製

3-2　並在前丶後分別加入藍色字

3-3 進入側欄管理，將程式碼貼入［公告欄位］，要按下方［開啟鍵］

【教學設定】簡單上手痞客邦側欄置入FB粉專（浮動拉霸版）

<div class="fbbox" style="right: -292px;">
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v18.0" nonce="Et3rsZ1f"></script>
<div class="fb-page" data-href="https://www.facebook.com/wen780202/" data-tabs="timeline" data-width="" data-height="" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/wen780202/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/wen780202/">千步走台灣「愛點滴」</a></blockquote></div>
</div>

<script>

jQuery(function($){

$(".fbbox").hover(function(){

$(this).stop().animate({right: "0"}, "medium");

}, function(){

$(this).stop().animate({right: "-292"}, "medium");

}, 500);

});

</script>

【教學設定】簡單上手痞客邦側欄置入FB粉專（浮動拉霸版）

４。CSS語法添加

完成側邊欄位設定後，進行CSS原始編碼設定

4-1　進到管理後台->樣式管理->［CSS原始編碼器］

4-2　拉到最下方位置加入［下方程式碼］

/*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;}

【教學設定】簡單上手痞客邦側欄置入FB粉專（浮動拉霸版）