[教學] Facebook 聊天外掛 + 粉絲專頁外掛 安裝
前陣子因為發文量減少之後比較有空
就把部落格一些功能做了一些更新
相信應該還算是蠻有感的改變(吧?)
由於有人在私訊提到這些新功能很少見
而且追蹤者裡面似乎也有其他經營部落格的朋友
所以就決定寫個系列教學讓大家的網站更完善一點
也順便幫自己做個備份
這次的教學主要圍繞在Facebook上
分別是聊天外掛和粉絲專頁外掛
聊天外掛
FB在去年底推出的新功能
官方正式名稱是"顧客洽談外掛程式"
能讓使用者在登入FB的狀態下直接在網站上與粉絲專頁進行聯繫
具體就是目前網站右下角出現的聊天氣泡
就我個人使用上來說體驗還不錯
聊天機器人因此訓練了不少對話量
安裝上基本沒什麼難度
(除非你的網站本來就有在右下角放東西)
Step #1
首先要確定網站是否已經安裝好Facebook SDK
沒有的話也無所謂, 最後FB提供的code會有
已經裝過的記得最後在複製code時刪去那段
(Load Facebook SDK for JavaScript)
(Load Facebook SDK for JavaScript)
Step #2
點進 Facebook 粉絲專頁的 "設定"
點選 "Messenger 開放平台" 並找到 "顧客洽談外掛程式" 區塊
接著會跳出一連串設定, 依照說明設定就好
直接跳過也無所謂, 之後都可以透過程式碼更改
顏色部分建議配合網站設計調整
這裡一定要記得加入自己的網址
否則會沒辦法正確顯示
最後將右側產生的code安裝進網站就完成了
(更細項的code調整可以參考官方文件)
粉絲專頁外掛程式
這個算老功能
不過Facebook近期更新之後功能增加不少
設定上也相對自由許多
Step #1
主要想提的是下圖我框起來的兩個
頁籤官方預設是動態時報
不過可以自行增減
目前支援的有動態時報(timeline), 活動(events)和訊息(messages)三項
而寬度不像以前需要手動調整
現在可以配合嵌入的位置進行動態調整
不過最小寬度還是維持在180px
設定完成後會得到類似下方的程式碼
<div class="fb-page data-href="https://www.facebook.com/SeanChaox/" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"> <blockquote cite="https://www.facebook.com/SeanChaox/" class="fb-xfbml-parse-ignore"> <a href="https://www.facebook.com/SeanChaox/">Sean's House</a></blockquote></div>
如果想隱藏自訂的行動呼籲按鈕
則可以自行加入data-hide-cta="true"
Step #2
將得到的程式碼安裝進網站
以上兩個小教學
如果有不懂的地方歡迎私訊或留言
About Sean Chaox
沒有留言:
張貼留言