首次嘗試著寫教學文，
希望可以幫助到剛開始接觸部落格的朋友們
第一篇就交給宣傳粉絲團很重要的環節「FB Like Box名片貼」吧!
在名片貼的類別裡我覺得「Like Box」是最終極的，
但當然每個人的使用需求不同，
之後也會一一跟大家介紹其他基本款名片貼的崁入方式。
以下就詳細介紹如何在部落格的側邊欄位中放置「FB Like Box」囉!!!!!
各位可以從以下三個連結找到自己想顯示的名片貼樣式，
這次要介紹的是第三個選項「fb likebox」，請點開後繼續下一個步驟。
► 名片貼首頁
編輯各項「Like Box」名片貼設定
Facebook Page URL：輸入想宣傳的粉絲團網址
Width：整體欄位寬度 ( 注意｜如果知道你的部落格的側邊欄位寬度
建議設定比Like Box寬度設定比部落格寬度少至少5~10單位 )
Hight：基本上可以不需要調整，會因著你所點選要顯示的資料而拉長欄位
Show Faces：在欄位底下顯示粉絲團上粉絲的頭貼
Coler Scheme：欄位的底色
Stream：是否顯示粉絲團近期推廣內容
Border Color：邊框顏色 ( 可空白 )
Coler Scheme：欄位的底色
Stream：是否顯示粉絲團近期推廣內容
Border Color：邊框顏色 ( 可空白 )
設置完程式碼後點選下方「Get Code」
P.S. 現在FB有改版，版面會跟講解的圖片不大相同，但可對照文字去設定。
複製程式碼
點選IFRAME，並複製下方程式碼
P.S. 語法選擇IFRAME是以痞客邦為例，其他部落格平台若顯示不出來，可選擇HTMAL5等其他程式碼嘗試。
- - - - - - - - - - - - - - - - - - - - - - 完成Facebook端步驟 - - - - - - - - - - - - - - - - - - - - - -
點選IFRAME，並複製下方程式碼
P.S. 語法選擇IFRAME是以痞客邦為例，其他部落格平台若顯示不出來，可選擇HTMAL5等其他程式碼嘗試。
- - - - - - - - - - - - - - - - - - - - - - 完成Facebook端步驟 - - - - - - - - - - - - - - - - - - - - - -
進入痞客邦後台管理→ 側邊欄位設定(左側)→ 新增版位 (右上)
填入欄位
自訂標題：填入想呈現在部落格上的欄位標題
自訂區域內容：貼上剛剛複製的IFRAME程式碼，確認後按下送出。
自訂標題：填入想呈現在部落格上的欄位標題
自訂區域內容：貼上剛剛複製的IFRAME程式碼，確認後按下送出。
► 確認新增版位
新增的欄位會再右邊版位的最下方，
可在欄位上用滑鼠點著，
直接拖曳至部落格任何一個側邊欄位中。
新增的欄位會再右邊版位的最下方，
可在欄位上用滑鼠點著，
直接拖曳至部落格任何一個側邊欄位中。
► 拖曳變更順序
不只可以變動呈現的區域，還可以改變呈現順序。
確認位置設置完成後按右下角的「儲存設置」。
不只可以變動呈現的區域，還可以改變呈現順序。
確認位置設置完成後按右下角的「儲存設置」。
► 確認成功崁入「FB Like Box」名片貼
回到部落格首頁，
尋找剛剛設定的側邊欄位位置，
確認是否崁入成功。
回到部落格首頁，
尋找剛剛設定的側邊欄位位置，
確認是否崁入成功。
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請貼上自己粉絲團的【自訂短網址】&width=200&height=290&show_faces=true&colorscheme=light&stream=false&show_border=true&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
說明：粉絲團網址為https://www.facebook.com/meat76，就將黃底字串改成meat76
米特本次教學時間結束嘍，以下開放發問
文章標籤
全站熱搜
創業小旅程 (1)
謝謝分享！
不客氣:) 如果有看不懂的話也請跟我說唷!!
哈囉 米特 ，好久不見 這篇教學文 超級詳細的!!! 太厲害啦~
我這陣子都忘記回去被包客棧重拾我熱血年輕的心 難怪心情都很差!!!!!! 星期一上班前要看看你的文章 這樣心情會好一點XDDDD 之前摸索的時候也總覺得會有人需要這麼詳細的解說 有幫到需要的人太開心了 哈哈
*****
*****
謝謝分享~我也設定成功囉^^ 教學寫得很清楚造福大家 呵呵
謝謝你的鼓勵阿:) 你的星座文讓我很感興趣呢 好好奇你為何對星座這麼了解 :P
感謝米特呀!!!才剛在妳這邊看完教學設定好粉絲頁的名片貼~ 妳就幫我的粉絲頁按讚了~揪甘心 感動QQ 其實我還沒推廣我的粉絲頁 所以妳是第三個加入的NO.3會員(元老級XD) 我也把妳的粉絲頁按讚了 互相支持^^ 我的Blog是專門發表關於天秤寶寶和一些我喜歡的文章和心情 說對星座了解不敢當~只是對星座有興趣而已:) 米特也是天秤座的嗎?是就太令人高興了 總之很開心認識妳喔 呵
哈哈哈當然要支持一下啊!!! 如果之後有什麼部落格問題想要問 我也可以幫你解答 :) ((如果我會的話啦 哈哈 米特是金牛座耶 怎麼辦 讓你失望了 哈哈哈 但我也認識頗多天秤座的好朋友唷 :) 我也很開心認識你 !
*****
*****
謝謝米特~妳人真好 感動...嗚嗚QQ 其實我玩blog才兩個月 滿新奇的 呵呵 希望之後也能像妳一樣每天那麼多人來我家XD 之後有不懂的再跟妳請教囉 我也超開心認識妳的^^
是唷 怎麼會開始想寫部落格阿 其實我寫很久 只是都搬來搬去 現在終於定居了XD 我一開始搬過來也好少人來看 但你文章也很豐富呢 而且寫文好快 一定很快就追過我了!!! 一起加油吧:)
沒啦~就從小就對3C和電腦資訊等有興趣 年紀大了也想說寫寫一些東西以後才可以回憶XD 謝謝米特的鼓勵呀QQ 一起加油謝謝你^^
那之後就多寫寫3c開箱文或教學吧 你一定很內行 :D
太實用了!!!!!超詳細!!!!!
齁齁 期待下下篇為你開的教學文吧!
太感人了Q_______Q感謝米特大師XDDDDDD
喔我裝好了～～ 你可以直接讓大家點進這個畫面 因為ＦＢ好像改版了 https://www.facebook.com/badges/
哈囉娜娜 我不知道她有沒有改版 不過這網址確實可以直接連過去 頗方便的 感謝妳提供網址!!!
謝謝分享教學!!
不客氣 :)
米特: 謝謝妳的分享文...決定把部落格從無名搬到痞克幫... 一切彷彿...都很陌生...慢慢搬運中...尤其看見妳的這篇教學文.....粉絲專頁終於可以貼在側邊欄啦!
哈摟哈摟 搬家總是很陌生 我以前也是從無名天空那邊班過來的~ 語法略懂所以可以寫些教學讓大家參考 你有問題都可以問我 如果我能解答的我都會盡力幫忙的 讓米特當你的小巢吧 哈哈哈哈
*****
*****
哈!有米小巢真好
哈囉米特新寫了一篇教學 是側邊浮動欄位 快點來試試看吧XD http://meat76.pixnet.net/blog/post/151529184
推一個~!這篇太實用了!!!
謝謝Alina支持窩:p
哈囉 我的facebook名片貼頁面一直跑不出來 是什麼原因呢？ 只有我的這樣嗎？
哈囉Elsa 你是說從fb登入後進去設定自己的名片貼嗎 你要不要貼一下你的語法給我看 這樣我才能知道問題在哪唷 :)
哈，謝謝妳呦! 我重新試了幾次 成功了: )
齁齁成功就好 :) 我是怕我哪邊沒有說清楚 哈哈
呵呵, 很好用吔, 原來這麼簡單哇 謝謝妳分享給大家
不客氣唷 :)
感謝分享，真好用
謝謝米特 我也成功了 現在正在努力學側邊浮動欄位 試了幾次還是不行...
不客氣 !! 如果哪邊設定不成功 你可以把語法丟給我看看 通常都是浮動圖案的網址設定有問題 你可以丟給我看看你上傳的網址
詳細的說明, 非常感謝!
不客氣 :)
推推~~~謝謝無私的分享^^
不客氣唷 :) 歡迎分享
推13!!!實在是大拇哥啊!!!!!!!!!!
(Y)
謝謝你!我也成功了
不客氣 (Y)
Hello~請問妳喔！我試了幾次嵌入Like Box，但是底色無論選擇dark或light都無法顯示出來，會變成我blog邊欄的底色，是我有什麼地方設定錯誤嗎？
哈囉我幫妳測試了一下 你看看我的側欄最下面應該有跑出你粉絲團LIKE BOX 語法如下 你可以複製使用 <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FTeatroDellaEvance&width=220&height=427&colorscheme=light&show_faces=false&header=true&stream=true&show_border=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:220px; height:427px;" allowTransparency="true"></iframe>
還是一樣耶...我也去檢查過CSS但是沒發現什麼異狀，可能要白底的側欄才不會影響到Like Box的底色...><.
OH YA~ 寫得好詳盡呀 我一下子就搞定嚕^^ 謝謝米特
(y) 不客氣唷 齁齁
可是要怎麼像你右邊那樣,會有個facebook跑出來 然後還可以變成粉紅色的呢:(((\ 拜託大師解答了感恩
哈嘍 側邊浮動fb likebox教學在這 http://meat76.pixnet.net/blog/post/151529184 不過本篇文章首圖的粉紅色點點框是我畫出來的XD
推 米特教學文都寫的好棒!! 我想提問文章最後 "按下這顆讚，和你的Facebook好友分享這篇文章" 下面有個讚按鈕，這個要怎麼寫才能放在文章中阿?@@
老爹過獎了!!! 這其實也是放語法 允許我晚點再寫教學嗎 哈哈哈
哈哈 你方便就好 其實你直接把那段語法貼給我看也可以 我應該會懂 XDDD
簡單來說就是把粉絲團按讚的語法 貼在文章中 然後網址改一下 就這樣而已XD 我會講得太簡略嗎 哈哈哈
請問版主 html 5裡的語法分為上下兩行 請問兩行都要複製嗎?還是複製其中哪一行?
哈嘍 你是使用PIXNET的平台嗎 如果是的話 就複製IFRAME的語法就好了 如果是HTML5我之前試著放在PIXNET裡面是都沒有成功過XD 所以我只能以此推斷回覆你了
版大 我是樂天的新店家 它是HTML的語法 內部建置很摳門 很多無法外部鏈結 請教他們這些問題的都是要費用啦 看到您這篇文章 雖是燃起希望 就是不會把語法弄進去 也非感謝您了! 如果您破解了 呵呵 太多人會超超級感恩的~
我只會用痞客幫的語法 我本身沒再用樂天 所以對於HTML沒有研究 這部分沒辦法幫上忙嘍 直接問樂天客服會比較快吧 就算花點費用也是值得的
妳好棒哦^^
哈哈哈 不客氣~
謝謝您寫的這麼詳細！但是再請問一下，我將您的CSS修改成我FB的帳號後，都看不到內容，可以麻煩您幫我看一下原因嗎？拜託了>< 以下從Link box get code來的。 我直接修改也是一樣><
這陣子在忙沒有上來看 :P 剛去你格子看 有看到內容 應該是你已經設定成功了吧!?
是的，謝謝米特^___^
: )
請問一下網頁側邊碰到會跑出來的臉書連接怎麼做?? 謝謝!!!
教學在這 http://meat76.pixnet.net/blog/post/151529184 下次可以利用旁邊的搜尋 很快就可以找到答案嘍 :)
推20 大大感謝>ˇ<
不客氣 :)
好棒的教學，謝謝分享唷 :)
不客氣 :)
寫的很清楚（大推） 但是我太天了嗎 怎設完後 沒有跑出東西呢？ 是我那邊出錯了嗎？？
我想應該是圖片網址設定有誤 你試試看在相簿首頁點選要用的那張圖按右鍵 選取複製圖片網址位置 應該就可以了
感謝米特的回應~謝謝 但我是還用不成功(呵~真的有網路很天的人喔) 我會再試試的
您好,很詳盡的教學,謝謝您 但我試了很多次,都顯示不出來耶 可以請您看看嗎?
謝謝分享，真的很詳細 終於試成功了，感謝你的無私教學!!
不客氣 : )
感謝!!已成功>0<
謝謝你!!! 大成功!! 感激你詳細的教學><
*****
*****
謝謝詳細教學～來試試看
不客氣 :)
不好意思~我想請問一下我設定後,怎麼登出facebook後欄位就變空白的呢??
拍謝~ 米特沒遇過這種狀況 無法幫你解答唷 OTZ
謝謝你，我終於做成功了^_^
謝謝 ~ 成功囉
不客氣 :)
感謝很實用的分享!
不客氣 :)
謝謝分享~清楚又明白一次就成功了^^
不客氣 是你太聰明 XD
謝謝你的分享 解決我的問題 很棒 ^^
不客氣唷 :)
那請問下面結合用臉書帳號可以留言的，有教學分享嗎?謝謝~
好的 有空會寫:)
您真是幫了大忙!! 大愛!!
剛才去你家看了 好像還沒成功 希望可以趕快ok :)
真的太感謝您的分享,,,,超級 超級實用的！
哈哈哈哈 不客氣唷 :))
米特妳好 請問如果自己的匹克邦網頁不想用制式的圖式套用 享用自己的照片 要如何用呢
先上傳你想要的圖片到相簿中 在把圖片網址位置複製起來 在選擇背景圖片或大圖時 就可以直接貼上你想要的圖片網址位置 試試看吧!
感謝，我設定成功囉!!!
不客氣唷 :)
非常感謝這麼實用的教學！謝謝 感激～
不客氣唷 :)
很清楚的教學喔 感謝你 覺得實用XDD
不客氣唷 :)
*****
你好，昨天看了你的教學，讓我順利在部落格成功了! 如果可以的話想請問您，我部落格文章裡的直的照片，不知道為什麼很長，從不管是從電腦看或是手機，部落格的直的照片比例很怪(太長了)，橫的照片沒有問題!有什麼方法可以讓直的照片不要那摩長嗎?如果在這裡提問不妥的話，請刪除留言!先謝謝您!!http://sunrain0422.pixnet.net/blog/post/189343740
啊!!!! 我完全沒發現你的留言 對不起啊 整個過了四年XD 而且過去看你已經搬到個人站了 你好棒!!!! 部落格發展得很好~~~~ 我要向你看齊!!!!
超實用的!!淺顯易懂!!! 真的很謝謝:DD
不客氣唷 !! :)
喔耶~真的超實用的!! 小媺也設定成功囉!!!謝謝米特!!!
不客氣唷:)
太棒的解說了 設好嚕 謝謝!!
不客氣唷 :)
hello 雖然可以跑出來程式碼可是我無法成功貼入痞客幫 請問是哪裡有出錯嗎?!
我之前可以,可是最近換粉絲團,剛想改貼不上去耶,一直無法顯示連結在部落格,只有顯示標題而已耶
可能語法問題唷!
大推 好實用！！ 我直接用了妳的語法複製了XD 感謝！
:)
我點選了" fb likebox設定網址"出現的頁面與你PO的不同 能編輯的功能只有:Facebook 專頁 URL 宽度 高度 配色方案light 显示好友头像 显示标题 显示帖子 显示边框 我試著按照出現的頁面設定,取得代碼輸入還是不行 請問是哪個環節出錯了?
頁面不同應該是沒有關係的 我只會用這方式 可能你要自己再檢查看看步驟唷 加油啦!!!!
*****
*****
*****
*****
好受用 終於搞定 謝謝分享 ^^
:)
請問 為什麼我貼上只有顯示字連結 沒有圖
那就是圖片網址錯誤嘍
謝謝提供
不客氣唷 :)
感謝提供資訊~
:) 不客氣
感謝教學，幫助實用。 萬分感謝！
不客氣唷~~~
您好,我在名片貼的首頁就無法進入了,為何呢?
今天發現改版了 可以從這進去調整唷 https://developers.facebook.com/docs/plugins/like-button
終於搞定了,真是大大的感謝啊!
不客氣唷 :)
感謝分享，好實用喔~
很實用的教學，謝謝^^
謝謝分享~~