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

 

最後，點選自己的部落格打開首頁

就能看到顯示在頁面右手邊的藍色  FACEBOOK  圖示

將滑鼠移到  FACEBOOK  就會自動展開FACEBOOK粉絲框

這種能完整在部落格嵌入個人粉絲頁最新圖文資訊的外掛太棒拉！

013一直想要弄這個[粉絲框]，但之前一直不知道它的名稱

這次為了部落格改版瘋狂搜尋各種樣式和語法後終於找到資訊

但2015才改版的FB粉絲框外掛竟然在2016一開始就又在最新改版

在完全不懂語法的013經過多次嘗試後終於結合大家分享的教學和語法

成功將痞客邦的部落格嵌入粉絲框外掛拉(喜泣+灑花旋轉)

希望這篇教學也能幫助到想要將部落格嵌入粉絲框的朋友們^v^b

--------------------------------------------------------------------------------------------------

閱讀延伸：

【013教學】快來建立自己的FACEBOOK名片貼吧！圖解步驟
 

【教學】FACEBOOK權限設定教學~FB廣告標記通通退散!!

●按讚+追蹤<< two013粉絲團 >>看更多即時分享

 

●【歡迎分享】您的按讚追蹤及留言是對作者最佳鼓勵