把FB粉絲團嵌入痞客邦部落格又不佔頁面的側邊隱藏樣式

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的粉絲團【Sandra幻遊奇境】

各種圖文分享都在這,快來聊天交朋友吧~^o^~

文章標籤
創作者介紹

33在哪裡

two013 發表在 痞客邦 PIXNET 留言(15) 人氣()


留言列表 (15)

發表留言
  • mika
  • 很實用的教學耶
    要收在最愛裡
  • <3

    two013 於 2016/03/04 17:59 回覆

  • POPO旅行與攝影
  • 很實用 也用成功了 愛你^^
  • 有幫到大家太好啦^^

    two013 於 2016/03/04 17:59 回覆

  • 芙緋兒♥
  • 好實用喔!!
    我也要來用看看~~
  • 粉絲框真的好棒一定要裝!

    two013 於 2016/03/04 18:00 回覆

  • cindy
  • 超實用的呢!!^^
  • ~^w^~

    two013 於 2016/03/04 18:00 回覆

  • sunnygo1798
  • 好實用的教學,我也來試看看^^
  • 有成功了嗎^^

    two013 於 2016/03/04 18:01 回覆

  • 韓曉淨
  • 又上了一課
    感謝你
  • <3

    two013 於 2016/03/12 00:42 回覆

  • 美食雷達BIBO
  • 謝謝你 有成功安裝了!!
    不過因為我的版型關係,內容都在右邊,粉絲框想使用窄一點的!
    可是他向左展開的時候,卻還是移一樣的幅度,看起來離捲軸好遠
    不知道可以調哪個地方,讓它闔起來時跟你一樣,展開幅度不這麼大呢?
    希望您能再回覆我,感激不盡!!
  • 看了你的部落格,粉絲框很正常啊
    如果是希望展開時框框不要那麼大,就是要先設定長寬再擷取程式碼唷!

    two013 於 2016/03/12 00:47 回覆

  • H K
  • 有種想哭的感覺~
    搞了一天 終於成功了> <
    超級感謝你!!!!!!!!!
  • 恭喜 **\ >w< /** 有幫上忙真是太好了

    two013 於 2016/08/14 03:14 回覆

  • 安楊
  • 成功使用!大感謝~~~(撒花瓣
  • 恭喜 ** \ >w< / ** (灑花

    two013 於 2016/08/14 03:14 回覆

  • 邱婷婷
  • 太實用了啦!先收藏~等換了樣式在來套用!
  • <3

    two013 於 2016/08/19 18:23 回覆

  • 左撇Shane
  • 用不出來(大哭中)
  • FB一直改版,實在很傷腦筋QQ

    two013 於 2017/02/17 16:02 回覆

  • 莓子貓坊
  • 比較想知道你部落格文章ˊ每篇文章中,最後面的粉絲專頁是怎麼弄進去的?不會是自己每篇文章用HTML碼崁入的吧!!!比較想知道有沒有其他語法或方式可以一次崁入,不需要每篇文章自己弄???
  • 我是每篇文末加入語法orz
    之前有看過你所說的每篇文都有嵌入文字和連結的教學
    但我放的是FB名片貼,不知道使用效果一不一樣~可以搜尋文章問一下教學者唷

    two013 於 2017/02/17 16:06 回覆

找更多相關文章與討論

您尚未登入,將以訪客身份留言。亦可以上方服務帳號登入留言

請輸入暱稱 ( 最多顯示 6 個中文字元 )

請輸入標題 ( 最多顯示 9 個中文字元 )

請輸入內容 ( 最多 140 個中文字元 )

請輸入左方認證碼:

看不懂,換張圖

請輸入驗證碼