內嵌Facebook粉專小工具來作為「最新消息」吧! - 半節吸管
15878
post-template-default,single,single-post,postid-15878,single-format-standard,ajax_fade,page_not_loaded,,qode-child-theme-ver-1.0.0,qode-theme-ver-13.8,qode-theme-bridge,wpb-js-composer js-comp-ver-5.4.7,vc_responsive

內嵌Facebook粉專小工具來作為「最新消息」吧!

q

內嵌Facebook粉專小工具來作為「最新消息」吧!

官方網站作為品牌的門面,除了有經過編排設計的優質內容之外,各位朋友應該也希望可以讓訪客知道公司近期有哪些活動、又有什麼樣的促銷優惠吧?其實這樣的需求透過FB來達成可是最省時省力的做法呢!

畢竟比起重新編排網頁的排版或是每個短期活動都要製作獨立網頁來說,FB發個動態可是省時又省力呀…但是有鑒於許多的朋友提出了類似的需求,可惜對於沒有程式基礎的人來說要做出這樣的功能是相對比較困難的。

為此吸管為各位朋友撰寫了一個簡單的小工具,效果就如同現在這個頁面右方的小工具,點擊就可以讓FB的最新動態顯示在畫面上唷,載入方式也非常簡單,我大概區分成三種網站類型,如果沒有包含到你使用的網站系統就請見諒了…不過使用方法大同小異我相信你(?)一定可以摸索出來的!(妳的話我手把手教到會…咦?)

大致上只需要把下面這段短短的程式碼更改一下參數加入你的網站就可以囉

接著就針對自行編寫的網頁、Wordpress以及吸管這邊配合的WebSolutions系統來做一個圖解說明吧!

自行編寫網頁

如果是自行編寫的網頁可以加在</body>的前面,如果你有能力自己編寫網頁相信這一定難不倒你!

插入教學

想要在哪些頁面載入這個小工具,那就複製貼上到那些頁面上便可以囉,很簡單吧XD

WordPress建議使用小工具來插入是最容易的

WordPress網站的部分,可以新增一個HTML或純文字的小工具在footer的部分,小工具的設定頁面是在功能選單的「外觀>小工具」裡面,雖然依據不同的佈景主題,小工具的設定頁面會有點不同但應該是大同小異的,其實也沒有一定要放在footer的部分,只是比較能確保在每個頁面都正常載入這個小工具。

wordpress教學

標題區不要輸入文字喔,不然就會額外冒出一個區塊影響排版的,貼上程式碼之前也記得要把頁籤改成「文字」,程式碼才能正常運作喔,這幾點要注意一下。

接著貼上程式碼,參數修改完點擊「儲存」就完成囉!

WebSolutions網路中心

而如果你使用的網站系統是吸管這邊有合作的WebSolutions網路中心,請先從「網站>網頁清單」這邊進入以下頁面:

網路中心教學

之後就可以進入頁面的設定畫面了

網路中心教學

儲存之後,一樣看有哪些頁面要載入小工具就依序進行設定吧。

設定完成可別忘記要「發布網站」才能夠讓運行中的網站正確載入小工具喔,雖然網路中心這樣的設計會讓操作流程變得有些麻煩,但是像這樣才能保證使用者不會看到編輯到一半有問題的網頁,所以是必要的程序呢!

流量引導

在設定完成之後,這下網站就有了Facebook收放側邊欄的功能囉,除了可以做為公司第一手「最新消息」之外,同時也能增加對於粉專的導流,別忘記網路行銷必須是一個網狀化的架構,流量必須互相引導不能各自為政唷!

最後關於這個小工具,如果有任何使用上的問題,或是有發現相關的BUG也希望你能跟我聯絡,我也希望能多得到一些使用者的回饋呢!

No Comments

發表迴響

close