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

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)。
  • 以上完成。

 

(圖二)浮動粉絲頁讚視窗的點擊圖示
(圖二)浮動粉絲頁讚視窗的點擊圖示

 
 

(圖三)facebook 粉絲專頁外掛程式
(圖三)facebook 粉絲專頁外掛程式

 
 

(圖四)facebook 粉絲頁讚視窗的程式碼
(圖四)facebook 粉絲頁讚視窗的程式碼

 
 

(圖五)外觀/小工具/文字小工具
(圖五)外觀/小工具/文字小工具

 
 

(圖六)外觀/小工具/文字小工具填入代碼與式樣設計
(圖六)外觀/小工具/文字小工具填入代碼與式樣設計

 
 

結論

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

About The Author

max

使用 WordPress 架設網站不再是一件痛苦的工作。這裡跟大家分享使用WordPress的相關問題與研究。 並且提供有關WordPress外掛程式,佈景主題等等的使用經驗分享。 幫助想要建立網站的朋友,可以簡單,快速,無痛苦的建立與使用網站。

2 Comments

  1. Jarvis

    請問如何把它改道左邊阿..QQ

  2. max

    把式樣語法左右對調試試。

網站架設

WordPress 虛擬主機免費安裝設定