WordPress Floating Facebook Like Box – 如何建立浮動粉絲頁讚視窗

延續上一篇文章我們利用外觀/工具的式樣（CSS）技巧，今天我們來示範如何建立浮動粉絲頁讚視窗 WordPress Floating Facebook Like Box（圖一）。有經營粉絲頁的朋友可以參考看看，不同於以往單純的在小工具上顯示粉絲頁讚視窗，這次是透過一些式樣（CSS）技巧，讓它有浮動的效果，希望可以作為與網站訪客的互動媒介，最終目的當然是希望社群與網站的流量可以互相流通，為網站創造出最大的效益。

WordPress Floating Facebook Like Box

（圖一）浮動式粉絲頁讚視窗

• 在開始以前需要準備的是，浮動粉絲頁讚視窗的點擊圖示（圖二），圖檔可以自己創作任何喜歡的圖示。
• 需要已經申請好了粉絲頁，已經有粉絲頁的ID或是已經建立好的粉絲頁網址。
• 接下來請前往粉絲專頁外掛程式，開始建立自己的粉絲頁讚視窗（圖三）。
  • Facebook 粉絲專頁網址：請輸入自己的粉絲頁網址。
  • 頁籤：這一欄位是粉絲頁讚視窗主要呈現的內容，例如 timeline 是顯示（動態時報）、events（活動）或是 messages（訊息），這裡可以依據自己的需求作調整填入。
  • 寬度與高度：是設定粉絲頁讚視窗的尺寸，文章範例採用的是預設的。
  • 隨著設定的內容修改，可以看到出現即時效果的預覽，調整設定為自己喜好的樣子。
  • 設定完成後，請點選取得代碼，會跳出一個粉絲頁讚視窗的程式碼（圖四），請將這些代碼都複製起來，待會會用上。
• 取得粉絲頁讚視窗代碼以後，回到自己的 WordPress後台外觀/小工具/文字（圖五），拖拉到側邊欄（Main Sidebar），這篇文章同樣是以 Suits 佈景主題來做範例。
• 文字小工具的標題同樣的請留空白，內容區塊請填入以下語法（圖六）。

• <style>…</style>之間的語法法是浮動粉絲頁讚視窗的式樣設計。
• 緊接的的語法是我們在粉絲專頁外掛程式取得的第一段代碼（圖三的1）。
• <img src=”https://yourdomain.com/your_facebook.jpg” />  這一段語法請輸入自己設計的圖示。
• <div class=”mx-box”>…</div> 之間填入的是粉絲專頁外掛程式取得的第二段代碼（圖三的2）。
• 以上完成。

結論

喜歡使用 WordPress 來架設網站，實在是因為它對於使用者的設計非常友善，即便是不會程式設計的人，都可以透過一些小小的改變，創造出非常符合自己網站需求的設計。特別是在目前台灣幾乎人人都有使用社群媒體的今日，適時的讓網站與社群媒體結合，這是增加自己網站持續曝光的最好方式了。