Facebook時常改版，身為網站經營者的你也不能錯過Facebook粉絲團的外掛工具「Facebook Box 粉絲框」，現在這個粉絲框居然要改版了，行之多年的就版Facebook粉絲框，從最早期的iframe語法、FBML語法到HTML5語法，現在要全面汰舊換新，改成全HTML5語法並搭配新版樣式，新版樣式更增添了Facebook Cover封面圖，讓你整個小工具顯得更有質感。
新版的語法一旦全面強迫更新，對於許多喜歡在內文塞粉絲團的用戶應該是一個莫大的打擊，因為得一篇篇去將語法拿掉，否則那些FB粉絲框是全數失效無法顯示。不過Facebook粉絲框早期用iframe好處是比較不影響網頁載入，現在全數改為Javascript+HTML5，可能未來常常會有延遲載入的狀況，因為Facebook常常會等全站資源載入完畢後才顯示出他的外掛工具。
很久很久以前香腸寫過「如何在部落格放Facebook粉絲框？」，其實新版的放置方法也差不多，有別於iframe語法變成兩段語法(如果你早就用過HTML5版本，你就不陌生)，如果懶人可以把語法通通塞在同一個地方，如果你是比較嚴謹的朋友，則可以將另一段語法放到網頁最底端。如果你是使用BSP部落格的朋友，像是痞客邦、天空、Xuite，可能就比較無法彈性的分段放置，建議是通通塞入側邊欄。
下午看到有新版，立刻替工作室的網站「阿腸網頁設計工作室」改版並換上新版粉絲框，感覺整個很有質感的FU，還沒換新版的Facebook粉絲框語法嗎？趕快來行動囉！
舊版官方停止服務訊息
根據Facebook官方消息來源，原先舊版的Like Box的臉書粉絲框工具將於2015年6月23日停止使用。所以使用者必須手動更新此外掛，將語法提早更新為新版本，否則到期後可能就無法使用了。
這是舊版的粉絲框樣式，即將於2015年6月23日被新版取代掉囉！
幫部落格換上新版Facebook粉絲團框框
- 網站名稱：Facebook Page Plugin
- 網站網址：按這裡
第1步 首先來到新版Facebook Page Plugin，輸入粉絲團的網址並設定高寬，即可點選﹝Get Code﹞產生語法。
- Facebook Page URL：粉絲團網址
- Width：寬度
- Height：高度
- Hide Cover Photo：隱藏粉絲團封面圖
- Show Friends’s Face：顯示粉絲頭像
- Show Page Posts：顯示粉絲團最新貼文
第2步 接著選擇「APP ID」與「Language」，然後下方會有兩段語法。
- APP ID：選擇FB的APP ID，如果尚未建立請參考FB APP ID建立教學。
- Language：語言，選擇【Traditional Chinese(Taiwan)】。
第3步 以WordPress用戶來說，建議把上面「程式碼1」的語法貼到版型裡面的「footer.php」檔案中，約莫在「</body>」標籤之前的位置。
第4步 接著來到你放粉絲框語法的位置，替換掉舊版語法。例如我們放在側邊欄，那可以直接新增「文字小工具」，然後貼上上方的「程式碼2」語法並點選﹝儲存﹞。
第5步 回到網頁前端看，是不是就換成新版了呢？
第6步 如果其他非WordPress的網站，其時可以將「程式碼1」和「程式碼2」一起貼到要顯示的位置，也可以正常呈現，放上新版的Facebook粉絲框，是不是蠻酷的呢？(以下是阿腸網頁設計工作室官網)
![[教學]如何用 ShowKeyPlus 查詢 Windows 10/11 產品金鑰序號？](https://i2.wp.com/sofree.cc/wp-content/uploads/2023/11/20231103232630_0.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[教學]如何用 ShowKeyPlus 查詢 Windows 10/11 產品金鑰序號？")
![[教學]如何用 Chrome 批次把 HEIC轉成 JPG 圖片 ？](https://i2.wp.com/sofree.cc/wp-content/uploads/2024/04/20240402230128_0.png?quality=90&zoom=2&ssl=1&resize=350%2C233 "[教學]如何用 Chrome 批次把 HEIC轉成 JPG 圖片 ？")
![[教學]GA4 和 Google AdSense 資料串接，輕鬆掌握網站流量和收益報告](https://i0.wp.com/sofree.cc/wp-content/uploads/2023/06/20230620130326_57.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[教學]GA4 和 Google AdSense 資料串接，輕鬆掌握網站流量和收益報告")
![[教學]如何申請台北捷運誤點證明？](https://i2.wp.com/sofree.cc/wp-content/uploads/2024/04/20240403164113_0.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[教學]如何申請台北捷運誤點證明？")
![[教學]如何申請台北捷運誤點證明？](https://i0.wp.com/sofree.cc/wp-content/uploads/2024/04/20240403164113_0.jpg?fit=768%2C403&quality=99&ssl=1 "[教學]如何申請台北捷運誤點證明？")
![[教學]GA4 和 Google AdSense 資料串接，輕鬆掌握網站流量和收益報告](https://i0.wp.com/sofree.cc/wp-content/uploads/2023/06/20230620130326_57.jpg?fit=768%2C403&quality=99&ssl=1 "[教學]GA4 和 Google AdSense 資料串接，輕鬆掌握網站流量和收益報告")
https://uploads.disquscdn.com/images/2bb9ff0d0c9fb13d869b4d9736a9069c2593060464ed82f78149f374eee81fa2.jpg 您好抱歉要請教下,我按下取得代碼後,就卡在這裡? 請問是要把應用程式按開放,然後提交項目批准嗎??
把應用程式取消開發模式應該就可以了。
是不用特別提交，只要不是存在於開發模式即可。
你在應用程式審查狀態是對外公開嗎? https://developers.facebook.com/apps/
你好，想請教你，我之前粉絲框有用FLOATING，新版的話要怎麼讓它浮動呢?謝謝!!
可改用 ： http://tw.piliapp.com/pilipress/float-fb/
在此我遇到一個問題，希望在此尋求幫助及解決。
我要將我的粉絲團崁入我的網站，語法使用iframe語法，但無法顯示呈現空白；之後我使用很多其他的粉絲團網址再次崁入即可正常顯示。唯有我的網址就是呈現空白，我的粉絲專頁都是正常運作，但是不知問題出在哪裡?…..似乎好像是Facebook Fans
可以使用另外一種語法。
香腸你好,
我是wordpress新手，想將粉絲團放到文章頁面中~
但轉為html格式後直接貼入產生的code,卻無法顯示
另外，也找不到更改footer.php的地方
以上兩個問題，想請你幫忙解惑
謝謝: )
有兩段語法要貼哦
請問香腸
如何讓FB的resource以https的方式載入呢
我看你的網站有綠色的鎖好羨慕QQ
我也想要有一個
我找了好多網路上的文章可是找不到相關的教學
FB 現在預設就是https囉！
我網站上的是要去申請SSL憑證，然後設定到主機內，每一台主機環境不同，設置方式也不太一樣。
請問香腸，我是只有用電腦開才能開啟粉絲框，用手機開只會有粉絲團的名稱(只有文字連結)，像下方這樣，不知道是哪裡有問題，再麻煩你回復，謝謝
可能語法載入上不完全@@
請問香腸，我用dreamweaver，把第一段程式碼放在區，第二段程式碼放在區，可是預覽只出現文字連結，請問是有哪邊出錯了??? 感謝您的回復~
兩段都要放body內
您放哪邊？ 如果只顯示文字，是否放錯或者是UDN不支援？
因為我手邊沒有UDN部落格無法測試@@
你好我是使用ＵＤＮ粉斯專業我照您的方法操作～～但只顯示文字連結～～能告素我原因嗎？感恩
http://blog.udn.com/saxophone/article
請問如果要在dreamweaver 上使用要怎麼做呢？我有試過把兩段code都貼進去 但都沒有用
爬過無數國內外文章都沒有答案 已經快瘋了 謝謝您
那應該就是語法放置錯誤或者是跟網站上的東西衝突。
切到原始碼放置哦！
給個小小建議給香腸，我個人怕麻煩，直接將兩個條碼直接加入wordpress 小工具的同一個「文字小工具」，都能正常顯示
有些是本身主題或外掛有加入，容易造成新舊版的問題
請問香腸，我原本做的是浮動邊框，照你的方法完成後他變成側邊攔固定邊框，怎麼改才能又變成浮動的
應該是JS衝突，您可能得自己debug一下哦！
或者是換 http://tw.piliapp.com/pilipress/float-fb/
大大你好，我照您的教學設定，可是無法完整呈現，有被卡掉的地方，請問要修改甚麼地方?我是使用痞客邦
應該是你側邊欄太窄了哦，新版FB粉絲框至少區塊要有280px以上的寬度。
您好~請問大大，是否可點圖片直接連結至FB粉絲團，那語法該如何下呢，我是用dw編輯的，謝謝你
那就是查一下超連結語法和圖片語法即可。
新的粉絲框寬度限定280~500請問有辦法比280更小嗎?
以前舊的好像沒限制耶~~
現在這樣網站版面有部分會被遮到~~@@”
無法哦！
我電腦版網頁正常
但是我的手機版網頁卻出不來是怎麼一回事?
ci？
是的
framework
如果是痞客幫的話語法要怎麼放呢?
程式碼1和2同時放在你想顯示的地方。
對不起，新舊版我感覺沒差，一樣醜。
把root語法插入到blogger 之下 卻出現以下訊息QQ
沒辦法使用….><
The reference to entity "appId" must end with the ';' delimiter.
那您應該是上面第二步驟時，沒有建議APP ID，請參考： http://sofree.cc/apply-facebook-app-id/
謝謝你的回覆….我後來去申請了還是不行><
但like button可以正常顯示
網路上好像找不太到類似的案例…
sorry 上面的圖有點錯
請參考下圖
語法只要留一段，你好像前一段也是FB，那段可以刪除改由新加入這一段。
刪除前一段好像還是一樣 > <
OK 你再試試看囉！
Hallo
SA大大，我剛剛使用也發生這個問題，其實只要把1和2兩個語法放在版面配置>新增小工具>設定 HTML/JavaScript的內容裡就可以使用囉! :)
那沒有foor.php呢？比如我是用子主題！
那你就自己找個地方加入，或是塞在同一地方。
請問要怎麼在dreamweaver 上面使用呢
謝謝
dreamweaver 應該是要切到原始碼模式加入，位置可以依照你自己的網頁結構設置。