社交平台功能 - Facebook oEmbed篇


以時序黎講其實我係應該先介紹Twitter個embed API,但係我已經更新咗Facebook個embed API,所以就一次過將Facebook既相關API介紹埋先。
首先,我地要理解咩叫oEmbed。根據維基百科既介紹:

oEmbed is an open format designed to allow embedding content from a website into another page.
無錯,呢個係一個專門俾人去用黎將一個網站既內容由A貼到去B既格式,而且唔需要硬性遵從。如果有興趣詳細去學既話,可以到講解oEmbed既主網站 https://oembed.com/ 睇返。

如果有睇過我之前介紹Facebook既Post Embed功能既話都會記得,我會將Embed功能變成連接Facebook既oEmbed端口去直接拎佢提供既HTML黎用。呢個做法既好處係我唔需要去為每個唔同既URL pattern去做一個regex去試佢係咩類型既post。

Facebook各種唔同既post有各自既URL pattern,甚至連同一種post都可以有兩款......參考: https://developers.facebook.com/docs/plugins/oembed-endpoints

FB既URL pattern主要分做兩種。
1. 將ID同用戶名稱/用戶ID等結合埋一齊既URL。
2. 直接用query string顯示相關ID。

於是我就整咗兩條regex去應對兩款唔同既pattern。
var pattern_one = /^(https:\/\/)?(www.)?facebook\.com\/(photos|photo\.php|permalink\.php|media|questions|notes|video.php)/g;

var pattern_two = /^(https:\/\/)?(www.)?facebook\.com\/([^\/]*)\/(posts|activity|videos|photos)/g;

要記住既係,FB自己都講個pattern清單未必完整。我就試過想embed專頁既相個陣出事,發現多左一個專頁同photos拼埋一齊既格式。

成功通過regex測試後就要決定將佢地丟入邊個endpoint。呢度我用左個好簡單既regex。
var video_pattern = /(videos|video\.php)/g;

只要URL有video既字眼都通通丟入去video既endpoint,其餘既就丟入帖子既endpoint。然後就開始傳送request出去啦。我用既係jQuery既關係,所以會用$.ajax()進行溝通,但由於我地進行既係跨網域請求(Cross-site request),將$.ajax()入面既dataType設為JSON既話會無辦法拎到我地想要既資訊。

由於無特定既HTTP header去進行跨網域請求,FB會直接block咗個request。

解決方法係將dataType由JSON變成JSONP (JSON with Padding)。請注意,JSON及JSONP並非近親。有關佢地既野可能遲下會再拎黎講下。總之,JSONP實現咗跨網域請求,令我地成功獲得FB回傳返黎既JSON。

由FB回傳既JSON data。

我地要既就係當中既html,FB會將預定格式既HTML回傳,我地只需要將呢段HTML抽出黎留作己用就好。

成功既話就會好似下面咁。

Powered by Half-moon Production.

Copyright © 2011-2020 by 泣雨家的雜物房. Version 1.5.2.

社交平台功能 - Facebook oEmbed篇


以時序黎講其實我係應該先介紹Twitter個embed API,但係我已經更新咗Facebook個embed API,所以就一次過將Facebook既相關API介紹埋先。
首先,我地要理解咩叫oEmbed。根據維基百科既介紹:

oEmbed is an open format designed to allow embedding content from a website into another page.
無錯,呢個係一個專門俾人去用黎將一個網站既內容由A貼到去B既格式,而且唔需要硬性遵從。如果有興趣詳細去學既話,可以到講解oEmbed既主網站 https://oembed.com/ 睇返。

如果有睇過我之前介紹Facebook既Post Embed功能既話都會記得,我會將Embed功能變成連接Facebook既oEmbed端口去直接拎佢提供既HTML黎用。呢個做法既好處係我唔需要去為每個唔同既URL pattern去做一個regex去試佢係咩類型既post。

Facebook各種唔同既post有各自既URL pattern,甚至連同一種post都可以有兩款......參考: https://developers.facebook.com/docs/plugins/oembed-endpoints

FB既URL pattern主要分做兩種。
1. 將ID同用戶名稱/用戶ID等結合埋一齊既URL。
2. 直接用query string顯示相關ID。

於是我就整咗兩條regex去應對兩款唔同既pattern。
var pattern_one = /^(https:\/\/)?(www.)?facebook\.com\/(photos|photo\.php|permalink\.php|media|questions|notes|video.php)/g;

var pattern_two = /^(https:\/\/)?(www.)?facebook\.com\/([^\/]*)\/(posts|activity|videos|photos)/g;

要記住既係,FB自己都講個pattern清單未必完整。我就試過想embed專頁既相個陣出事,發現多左一個專頁同photos拼埋一齊既格式。

成功通過regex測試後就要決定將佢地丟入邊個endpoint。呢度我用左個好簡單既regex。
var video_pattern = /(videos|video\.php)/g;

只要URL有video既字眼都通通丟入去video既endpoint,其餘既就丟入帖子既endpoint。然後就開始傳送request出去啦。我用既係jQuery既關係,所以會用$.ajax()進行溝通,但由於我地進行既係跨網域請求(Cross-site request),將$.ajax()入面既dataType設為JSON既話會無辦法拎到我地想要既資訊。

由於無特定既HTTP header去進行跨網域請求,FB會直接block咗個request。

解決方法係將dataType由JSON變成JSONP (JSON with Padding)。請注意,JSON及JSONP並非近親。有關佢地既野可能遲下會再拎黎講下。總之,JSONP實現咗跨網域請求,令我地成功獲得FB回傳返黎既JSON。

由FB回傳既JSON data。

我地要既就係當中既html,FB會將預定格式既HTML回傳,我地只需要將呢段HTML抽出黎留作己用就好。

成功既話就會好似下面咁。