社交平台功能 - Twitter oEmbed篇



今次要講既,終於到Twitter,但係都只係有一樣野要講:Tweet Embedding。你期待一個基本上只有Post功能既社交平台啲咩?當然,佢仲有啲咩趨勢呀之類,但唔係今日既重點。
如果有睇過尋日篇Facebook oEmbed講解既話,其實大致上就係嗰回事。Twitter更加好在於有API文件直接同你講邊啲打邊啲。


Twitter既oEmbed endpoint係https://publish.twitter.com/oembed。佢既tweet URL亦都無FB咁多花臣,所以用以下呢個regex就搞掂。

var pattern = /^(https:\/\/)?(www.)?twitter\.com\/([^/])*\/status\/([0-9]*)/g;

再黎就係傳送個網址去個端口度拎返你想要既資料。同FB一樣,由於係跨網域請求,一般AJAX係會出現瀏覽器安全性問題。我都係用jQuery既$.ajax(),將dataType轉成JSONP。

回傳返黎既結果同FB既oEmbed端口回傳既大致相同。

成功後就會得到上圖既資料,我地要做既就係將佢預設既HTML拎黎用就得......本身就應該係咁。

其實佢回傳返黎既HTML係會以blockquote既形式出現。同FB既FB.XFBML.parse()一樣,當你獲得HTML後只要用特定既Javascript指令,就可以令到blockquote變成佢真正既樣。Twitter既Javascript指令係twttr.widgets.load()

不過Facebook既blockquote轉換後可以直接係content editable既div使用,Twitter就反而有問題。Twitter既Javascript會將<div>個tag直接轉換成一個叫做<twitterwidget>既tag。

經過Twitter JS既改變,div轉絨成twitterwidget。

或者係因為呢個唔係HTML 5原生既tag,所以content editable唔支援。點樣唔支援法?就係content editable會變返做一個普通既block-level元素,你亦無辦法打任何野落去。一打enter入去,個tweet就會自動消失。

Twitterwidget令到content editable既元素失效。

目前後台能夠做既就只有唔載入Twitter JS,等佢繼續以blockquote既形式出現。

最後,如果嵌入成功既話,大家就會睇到呢篇文章一開頭既tweet啦。

Powered by Half-moon Production.

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

社交平台功能 - Twitter oEmbed篇



今次要講既,終於到Twitter,但係都只係有一樣野要講:Tweet Embedding。你期待一個基本上只有Post功能既社交平台啲咩?當然,佢仲有啲咩趨勢呀之類,但唔係今日既重點。
如果有睇過尋日篇Facebook oEmbed講解既話,其實大致上就係嗰回事。Twitter更加好在於有API文件直接同你講邊啲打邊啲。


Twitter既oEmbed endpoint係https://publish.twitter.com/oembed。佢既tweet URL亦都無FB咁多花臣,所以用以下呢個regex就搞掂。

var pattern = /^(https:\/\/)?(www.)?twitter\.com\/([^/])*\/status\/([0-9]*)/g;

再黎就係傳送個網址去個端口度拎返你想要既資料。同FB一樣,由於係跨網域請求,一般AJAX係會出現瀏覽器安全性問題。我都係用jQuery既$.ajax(),將dataType轉成JSONP。

回傳返黎既結果同FB既oEmbed端口回傳既大致相同。

成功後就會得到上圖既資料,我地要做既就係將佢預設既HTML拎黎用就得......本身就應該係咁。

其實佢回傳返黎既HTML係會以blockquote既形式出現。同FB既FB.XFBML.parse()一樣,當你獲得HTML後只要用特定既Javascript指令,就可以令到blockquote變成佢真正既樣。Twitter既Javascript指令係twttr.widgets.load()

不過Facebook既blockquote轉換後可以直接係content editable既div使用,Twitter就反而有問題。Twitter既Javascript會將<div>個tag直接轉換成一個叫做<twitterwidget>既tag。

經過Twitter JS既改變,div轉絨成twitterwidget。

或者係因為呢個唔係HTML 5原生既tag,所以content editable唔支援。點樣唔支援法?就係content editable會變返做一個普通既block-level元素,你亦無辦法打任何野落去。一打enter入去,個tweet就會自動消失。

Twitterwidget令到content editable既元素失效。

目前後台能夠做既就只有唔載入Twitter JS,等佢繼續以blockquote既形式出現。

最後,如果嵌入成功既話,大家就會睇到呢篇文章一開頭既tweet啦。