2013,01,14米特七六【部落格使用教學】Facebook|如何在部落格版面中加入FB粉絲團LikeBox名片貼001
 

首次嘗試著寫教學文,

希望可以幫助到剛開始接觸部落格的朋友們

第一篇就交給宣傳粉絲團很重要的環節「FB Like Box名片貼」吧!


在名片貼的類別裡我覺得「Like Box」是最終極的,

但當然每個人的使用需求不同,

之後也會一一跟大家介紹其他基本款名片貼的崁入方式。

以下就詳細介紹如何在部落格的側邊欄位中放置「FB Like Box」囉!!!!!   

各位可以從以下三個連結找到自己想顯示的名片貼樣式,

這次要介紹的是第三個選項「fb likebox」,請點開後繼續下一個步驟。 

名片貼首頁

下載我們的社群插件

fb likebox設定網址

 
 
 
2013,01,14米特七六【部落格使用教學】Facebook|如何在部落格版面中加入FB粉絲團LikeBox名片貼007  
編輯各項「Like Box」名片貼設定
Facebook Page URL:輸入想宣傳的粉絲團網址
Width:整體欄位寬度 ( 注意|如果知道你的部落格的側邊欄位寬度
建議設定比Like Box寬度設定比部落格寬度少至少5~10單位 )
Hight:基本上可以不需要調整,會因著你所點選要顯示的資料而拉長欄位
Show Faces:在欄位底下顯示粉絲團上粉絲的頭貼
Coler Scheme:欄位的底色
Stream:是否顯示粉絲團近期推廣內容
Border Color:邊框顏色 ( 可空白 )

 
設置完程式碼後點選下方「Get Code」
P.S. 現在FB有改版,版面會跟講解的圖片不大相同,但可對照文字去設定。
 
 
2013,01,14米特七六【部落格使用教學】Facebook|如何在部落格版面中加入FB粉絲團LikeBox名片貼008
 
複製程式碼
點選IFRAME,並複製下方程式碼
P.S. 語法選擇IFRAME是以痞客邦為例,其他部落格平台若顯示不出來,可選擇HTMAL5等其他程式碼嘗試。

- - - - - - - - - - - - - - - - - - - - - - 完成Facebook端步驟 - - - - - - - - - - - - - - - - - - - - - -
 
2013,01,14米特七六【部落格使用教學】Facebook|如何在部落格版面中加入FB粉絲團LikeBox名片貼009
 
進入痞客邦後台管理→ 側邊欄位設定(左側)→ 新增版位 (右上)
 
 
2013,01,14米特七六【部落格使用教學】Facebook|如何在部落格版面中加入FB粉絲團LikeBox名片貼011
 
填入欄位
自訂標題:填入想呈現在部落格上的欄位標題
自訂區域內容:貼上剛剛複製的IFRAME程式碼,確認後按下送出。
 
 
2013,01,14米特七六【部落格使用教學】Facebook|如何在部落格版面中加入FB粉絲團LikeBox名片貼012
 
► 確認新增版位
新增的欄位會再右邊版位的最下方,
可在欄位上用滑鼠點著,
直接拖曳至部落格任何一個側邊欄位中。
 
 
2013,01,14米特七六【部落格使用教學】Facebook|如何在部落格版面中加入FB粉絲團LikeBox名片貼013
 
► 拖曳變更順序
不只可以變動呈現的區域,還可以改變呈現順序。
確認位置設置完成後按右下角的「儲存設置」。
 
 
2013,01,14米特七六【部落格使用教學】Facebook|如何在部落格版面中加入FB粉絲團LikeBox名片貼014
 
► 確認成功崁入「FB Like Box」名片貼
回到部落格首頁,
尋找剛剛設定的側邊欄位位置,
確認是否崁入成功。
 
2013,01,14米特七六【部落格使用教學】Facebook|如何在部落格版面中加入FB粉絲團LikeBox名片貼016  
 
Like Box名片貼尺寸修改
若Like Box在部落格中欄位寬度過寬,可以回到痞客邦後台修正。
點選剛剛你新增欄位旁的設定,
在程式碼最後面中尋找「width:」的字串,
後面的數字即是寬度單位可自行變動數字調整欄寬,
調整完畢後按下「送出」,
最後重新回部落格首頁檢視名片貼,確認欄位尺寸後就大功告成囉!!!
 
 
 
如果以上看不懂,建議直接修改以下米特自己的FB LIKEBOX語法,丟進側欄就OK嘍!!!! 
 
 
- - - - - - - - - - - - - - - - - - - - - - 以下為要複製的FB LIKE BOX 語法 - - - - - - - - - - - - - - - - - - - - - -
 
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2F請貼上自己粉絲團的【自訂短網址&amp;width=200&amp;height=290&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=true&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:290px;" allowTransparency="true"></iframe>

- - - - - - - - - - - - - - - - - - - - - - 以上為要複製的FB LIKE BOX 語法 - - - - - - - - - - - - - - - - - - - - - -
 
語法中的有色字串請貼上自己粉絲團的【自頂短網址】
說明:
粉絲團網址為https://www.facebook.com/meat76就將黃底字串改成meat76
 
米特本次教學時間結束嘍,以下開放發問
 

加入米特,味玩待敘粉絲團,隨時追蹤好吃好玩新訊息!

按下這顆讚,和你的Facebook好友分享這篇文章



快,留言跟米特聊個天,推推文,給我一顆微鼓勵 :)


arrow
arrow
    創作者介紹
    創作者 米特 的頭像
    米特

    米特。味玩待敘 @meat76

    米特 發表在 痞客邦 留言(82) 人氣()