轉載需經作者授權，並註明文章來源、文章網址、作者姓名等。
在開始著手處理前，你需要擁有：Blogger、臉書帳號、以及粉絲專頁
其實就算你要嵌入的粉絲專頁是別人的，也是可以的喔~
第一步：先登入你的 Facebook 帳號，接著進入 Facebook for developers
Facebook for developers ：https://developers.facebook.com/1. 按右上角的「開始註冊」
1-1. 按「下一步」
有時候會跳出「輸入螢幕上的驗證碼」的驗證資訊，照著做完即可。
1-2. 按右上角的「建立應用程式」
1-3. 輸入你想和此應用程式建立關聯的名稱，建議使用和你的部落格相同的名稱更好辨別。
1-4. 建立完成後，在視窗左邊的控制欄，就可以看見你設定的應用程式名稱。
接著點「設定」。
1-5. 在下方點擊「新增平台」
1-6. 選擇「網站」，因為Blogger 是一個網站呀。
1-7. 在網址網誌欄位內，輸入你的 Blogger 首頁的網址，右下角按「儲存變更」。
1-8. 接著按下「立即開始」鈕。
就會跳到如下圖般的畫面，將下圖紅色框選起來的位置複製起來。
第二步：進入你的 Blogger後台 >主題。
2-1. 注意：在進入編輯前，記得要先備份你的主題喔！按「備份/還原」
2-2.按「下載主題」，將主題備份。
2-3. 備份完成後，按「編輯HTML」。
2-4. 在程式碼內按一下滑鼠左鍵。
2-5. 按鍵盤上的 Ctrl + F，Ctrl + F 是尋找，所以右上角會出現尋找的小視窗。
2-6. 在尋找的小視窗內輸入 <body>，輸入後按 Enter，
程式碼就會自動跳到有<body>的地方，反黃代表這個單字串有符合你要找的單字。
2-7.在 <body>的後方，多按幾下 Enter 空出段落，將稍早前複製好的程式碼貼上。
2-8. 貼上後記得按「儲存主題」。
第三步：臉書社交外掛
3-1. 開一個分頁，進入臉書的社交外掛程式頁面，左邊選擇「粉絲專頁外掛程式」
3-2. 在 Facebook 粉絲專頁網址欄位內，填入你的粉絲專頁網址，下方就會出現你的粉絲專頁頁籤預覽。
寬度最低 180，最高 500。
高度最低 70。
其餘設定項可以自己嘗試勾選。
3-3. 上述設定完成後，按下方的「取得代碼」。
3-4. 將「步驟三」內的程式碼反藍複製。
3-6. 在欲嵌入臉書粉絲專頁的位置，按「新增小工具」。
3-7. 選擇「HTML/JavaScript」的藍色 + 按鈕。
在「內容」欄位中，貼上在第二步複製的那串臉書粉絲專頁社交外掛程式碼，
記得要按儲存。
※標題可以選擇設定或是不設定。
3-8. 去你的部落格前台按下重新整理( F5)，就可以看到粉絲專頁嵌入在你想要的地方囉，有沒有很簡單呀。
最後~
同樣的方法，之後有空再教大家怎麼在 Blogger 裡面加上「讚、分享」鈕或是臉書留言板喔。
11 意見:
大大你好，我根據你的方法試過一次，可是在文章中還是看不到，請問還有那些需要特別注意的地方嗎?我用的theme是Contempo...
不好意思現在才看到留言...筆者自己的私人部落格也是用Contempo模版喔，有正確將code近進去的話，就可以看見粉專外掛、按讚鈕和分享鈕，你可能要檢查看看是不是code有貼錯地方？
我找不到body耶
我也找不到body...
不好意思現在才回留言，你可用下面的關鍵字進行搜尋
大於加上 body
或是
body 加上大於
因為模板如果不一樣，body標籤裡可能會有其他css的程式，換個關鍵字找一定找的到喔
不好意思現在才回留言，你可用下面的關鍵字進行搜尋
大於加上 body
或是
body 加上大於
因為模板如果不一樣，body標籤裡可能會有其他css的程式，換個關鍵字找一定找的到喔
成功了～感謝教學～～
感謝!我會試看看 ,有問題再請教了!
恭喜成功~
祝你成功喔！
不好意思，我有body可是都没有function那些。
.post-body h1,.post-body h2,.post-body h3,.post-body h4,.post-body h5,.post-body h6{color:$(title.color);font-weight:700;margin:0 0 15px}
.post-body h1,.post-body h2{font-size:24px}
.post-body h3{font-size:21px}
.post-body h4{font-size:18px}
.post-body h5{font-size:16px}
.post-body h6{font-size:13px}
.widget .post-body ul,.widget
.post-body ol{line-height:1.5;font-weight:400}
.widget .post-body li{margin:5px 0;padding:0;line-height:1.5}
.post-body ul{padding:0 0 0 20px}
.post-body ul li:before{content:"\f105";font-family:FontAwesome;font-size:13px;font-weight:400;margin:0 5px 0 0}
.post-body u{text-decoration:underline}
.post-body a{transition:color .17s ease}
.post-body strike{text-decoration:line-through}
張貼留言