iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 1
1
Modern Web

平時沒注意的 JavaScript - JS 生態系及週邊工具整理系列 第 1

打造 Messenger Extension - Day 1

目標

在你的 Facebook 粉絲專頁上加入一個「使用 Extension」的按鈕

並且打開後可以顯示一個你指定的網址

以及以後,你在手機版 Messenger 左下角按 (+) 時,都能跳出你指定的網頁

直接開始吧!

要能使用 Messenger Extension,因為這個功能跟粉專是綁在一起的

你必須先創一個粉專,點擊 https://www.facebook.com/pages/create/ 就行了

https://ithelp.ithome.com.tw/upload/images/20171203/20107440617Jj0CXju.png

這邊不用太計較細節,隨性選個類別和名字就可以了

我這邊創了一個粉專叫做 Hacker Reader

因為我打算使用 https://news.ycombinator.com/ 來當作首頁的網址

並且放了一個相對應的 Logo

image alt

接下來,我們要去做額外的設定,才能為你的粉專加上 Messenger Extension

打開 Facebook 開發者網頁

現在打開 https://developers.facebook.com/

image alt

基本上這是 Facebook 專門開給想使用 Facebook 周邊功能來建 app 的開發者用的文件

其中包含了如何使用 Facebook 做第三方登入、分享至 Facebook、使用 Messenger 的相關 API

基本上每年關注 Facebook 開發者大會「F8」就可以知道今年又多了什麼新功能

https://www.f8.com/

這邊我們要做的事情很簡單,右上角按「My Apps」

選擇「Add a New App」

image alt

填入相關資料

之後我們會把這個 Facebook App 綁到我們的粉專上,如果你想要有更多的 Messenger Extension,只要多創幾個就好了

開始設定 Messenger Extension

點選左邊「Add Product」

按下 「Set Up」

接下來左邊應該就會多一個 Messenger 了

設定你的 home_url (Extension 開啟的網址)

Google 搜尋 Messenger Extension / Chat Extension

可以找到一篇 Facebook 寫關於如何設定的文件

https://developers.facebook.com/docs/messenger-platform/guides/chat-extensions

其中我們要做的第一步,就是設定 home_url

就是我們把 Messenger Extension 點開,應該出現什麼網頁

找到 「Configuring the Drawer Entry Point」
image alt

這篇文件就是在介紹 home_url 的用途,以及如何設定

不過這邊文件寫的比較不清楚的是,他沒告訴你怎麼 Call 這個 API

仔細查詢之後,可以發現原來所有的設定都得要透過呼叫 Facebook 的「Messenger Profile API」

「Messenger Profile API 文件」

https://developers.facebook.com/docs/messenger-platform/reference/messenger-profile-api/

實際閱讀了文件後

可以看到 API 會使用一個 URL
https://graph.facebook.com/v2.6/me/messenger_profile?access_token=<粉專的token>

並且 Headers 能帶的欄位有很多種,包含 account_linking_urlget_startedwhitelisted_domainshome_url

我們在這邊只在乎 home_url,我們來看看 Facebook 給的範例應該怎麼做

Set/Update Properties

他這邊的範例是使用 Shell 上的一個指令 curl,來呼叫這個 API

我們這邊打開一個常用的編輯器,整理一下設定 home_url 的指令應該是什麼格式

接下來就可以直接貼到你的終端,按下 Enter 了

這邊如我們預期的會回傳一個錯誤,因為我們現在還沒使用正確的 token

我們必須要去拿你粉專的 token 來才能設置 home_url,token 裡面會包含了該設定哪個粉專 & 驗證身份

到目前為止的 code 我上傳在 GitHub,是第一個 commit
https://github.com/alxtz/Iron-Man/commit/b0e5d55

今天就到此結束了,明天我們將會介紹使用 token 來設定 home_url,並且讓 Messenger Extension 實際跑起來


下一篇
打造 Messenger Extension - Day 2 - 設定 whitelisted_domains, home_url, persistent_menu
系列文
平時沒注意的 JavaScript - JS 生態系及週邊工具整理33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言