close

大家是否在其他格友家看過FB粉絲團的伸縮外掛呢?
當滑鼠移到右邊Facebook圖樣時,便會跑出FB粉絲團的資訊
如下圖

FBplugin01.PNG   

小弟也放了一個在右邊給大家參考參考

今天要分享如何在格子裡加入這個外掛

01.首先用粉絲團管理者的帳號登入自己的Facebook粉絲團

02.連結到 https://developers.facebook.com/docs/plugins/like-box-for-pages 中間畫面如下

FBplugin02.PNG  

[Facebook Page URL] 填上粉絲團的連結

[Width] 根據說明,填上最小的寬度 292

[Height] 這邊我們填上300

[Color Scheme] 根據你的版型挑選淡色係light,或是暗色系dark

[Show Friends' Faces] [Show Header] [Show Posts] [Show Border] 根據個人所需去勾選

以上設定變更時下面都會有預覽,可以看看有什麼不一樣

03.接著按下 [Get Code] 會出現如下圖,共有四種語法,這邊我們選擇 [IFRAME],複製語法吧

FBplugin03.PNG   

04.取得語法後回到我們的部落格 [側邊欄位設定

按下右上方的 [新增版位] 如下圖

FBplugin04.PNG  

[自訂標題] 可自行填寫

[自訂區塊內容] 如下圖

FBplugin05.PNG     

05.第一部分紅色框完整語法如下,把下面[外掛語法]四個字換成剛複製的語法(綠色框部分)

這裡要小修改一下

258px; 後面加入上圖藍色框選的文字 background-color: white;

06.第二個紅色框請貼上下面的語法

 

07.按下右下角的 [送出] 即可成功新增版位

08.再來要將剛新增的版位從 [版位暫存區] 拖拉到 [側欄1] 或是 [側欄2],拖拉後記得按下 [儲存版面]

FBplugin06.PNG  

09.最後是加上CSS語法,連結到 [CSS 原始碼編輯] ,複製下面語法貼到最後面,記得按下[儲存]

回到你的格子看看結果吧!

2014/11/20 補充
若是想要將藍色的
fbox_blue.png

換成粉紅色的
fbox_pink.png  
請將上述CSS與法第二行的連結 http://pic.pimg.tw/blogbackup/1416463254-1526616050.png
改成 http://pic.pimg.tw/blogbackup/1416463625-215231562.png 即可.

有問題請再留言讓我知道吧 

arrow
arrow
    文章標籤
    facebook fb 外掛 粉絲團
    全站熱搜

    Hunt 發表在 痞客邦 留言(129) 人氣()