-
-
Notifications
You must be signed in to change notification settings - Fork 2.1k
Support image previews for Twitter oEmbed URL Previews #8022
Description
To help fix twitter embedding issues, we've just added support for oEmbed in capturing URL previews. We now use this for previewing twitter links (by default), and we can now receive tweet text without problems. However, twitter does not return any image data for a tweet in its oEmbed response:
{
"url": "https:\\/\\/twitter.com\\/arnaudmez7\\/status\\/1284848614062338053",
"author_name": "The Uncle Mez",
"author_url": "https:\\/\\/twitter.com\\/arnaudmez7",
"html": "\\u003Cblockquote class=\"twitter-tweet\"\\u003E\\u003Cp lang=\"en\" dir=\"ltr\"\\u003EI Absolutely like the new \\u003Ca href=\"https:\\/\\/twitter.com\\/element_hq?ref_src=twsrc%5Etfw\"\\u003E@element_hq\\u003C\\/a\\u003E \\u003Cbr\\u003EBeautiful work !\\u003Cbr\\u003ERun very well on \\u003Ca href=\"https:\\/\\/twitter.com\\/SolusProject?ref_src=twsrc%5Etfw\"\\u003E@SolusProject\\u003C\\/a\\u003E \\u003Ca href=\"https:\\/\\/t.co\\/bLzhmuoFdy\"\\u003Epic.twitter.com\\/bLzhmuoFdy\\u003C\\/a\\u003E\\u003C\\/p\\u003E— The Uncle Mez (@arnaudmez7) \\u003Ca href=\"https:\\/\\/twitter.com\\/arnaudmez7\\/status\\/1284848614062338053?ref_src=twsrc%5Etfw\"\\u003EJuly 19, 2020\\u003C\\/a\\u003E\\u003C\\/blockquote\\u003E\n\\u003Cscript async src=\"https:\\/\\/platform.twitter.com\\/widgets.js\" charset=\"utf-8\"\\u003E\\u003C\\/script\\u003E\n",
"width": 550,
"height": null,
"type": "rich",
"cache_age": "3153600000",
"provider_name": "Twitter",
"provider_url": "https:\\/\\/twitter.com",
"version": "1.0"
}
You'll notice that the html
key has a pic.twitter.com
URL in it. However, this just leads us to the tweet HTML, and extracting it from this HTML is too twitter-specific anyways.
However, the HTML returned here is the exact same (minus being encoded) as what's shown on publish.twitter.com for this tweet. You can see that this HTML renders into a nice little standardised preview of the tweet. Part of this HTML is a JS script that gets loaded (platform.twitter.com/widgets.js
) that will actually do most of the magic render the tweet.
Theoretically, after rendering this HTML output locally, we can just run our standard URL preview code over it and extract an image!
Thus my proposal for support Twitter image embeds with oEmbed that is still generic is to:
- Check if a response has image information (either
photo
orvideo
response type is used, orthumbnail*
keys are provided. - If an image isn't easily provided, check for an
html
key. - If
html
key exists, render securely and run URL preview code over it. - Attempt to extract an image.
At the moment this is all theory, I haven't tested it in code yet.