如果你跟Ｏ小豬一樣，不會什麼語法或是程式碼等，
但又想跟上圖一樣將ＦＢ的連結嵌入自己痞客邦部落格的首頁，
而不是像下圖只是一個單純的連結！（感覺很空虛啊！！）
現在只要跟著以下步驟，就可以完成放入有圖且生動活潑版的ＦＢ連結囉！
這篇要教大家兩種顯示在首頁側欄ＦＢ連結的樣式
樣式 １：隱藏款
（Ｏ小豬：平常會隱藏在側邊，僅顯示Facebook字樣，當滑鼠滑過時會跳出圖樣跟連結）
滑鼠滾過後
樣式 ２：常駐款（Ｏ小豬：會直接顯示在首頁側欄中）
這兩種樣式的步驟都是一樣的，可以只選一個樣式，也可以兩種都放，一個樣式一個欄位喔
步驟一：打開「部落格後台」→點選「側欄管理」
步驟二：點選「新增欄位」
步驟三：點選「新增欄位」→填入「標題」
（Ｏ小豬：標題可以自己另取喔）
步驟四：找到自己的ＦＢ的帳號
（打開粉絲團的首頁，網址的後面就是帳號喔，例如ＯＳ的帳號就是October-Studio-612292398922922）
步驟五：填入「內容」
（Ｏ小豬：複製下列的語法後貼入內容，並將綠色的部分替換成自己的帳號，粉色的部分替換成粉絲團名稱）
（注意：一個樣子要新增一個欄位喔！！！）
樣式１的語法
<script id="float_fb" src="//pic.sopili.net/pub/float_fb/widget.js" data-href="https://www.facebook.com/October-Studio-612292398922922/" async></script>
樣式２的語法
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v4.0"></script>
<div class="fb-page" data-href="https://www.facebook.com/October-Studio-612292398922922/" data-tabs="timeline" data-width="" data-height="" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/October-Studio-612292398922922/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/October-Studio-612292398922922/">October Studio</a></blockquote></div>
步驟六：將新增好的欄位從「版為暫存區」拖到「側欄」自己想要的位置
完成以上的六個步驟，這樣就大功告成啦！！！！
喜歡請幫我們點讚、分享、追蹤、訂閱喔！
留言列表
∝October Studio∞ (3)