Use oEmbed to Embed Tweets and More In Your React App
Have you ever wanted to embed Tweets, TikToks, Spotify songs, videos or pretty much anything else in your React sites? Or are you a developer that would like others to embed rich content from your website?
One way that is widely used on the internet is called oEmbed.
oEmbed.com describes oEmbed as “ a format for allowing an embedded representation of a URL on third party sites.” It goes on to say, “The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.”
In other words oEmbed is a standardized way of requesting the information necessary to embed something in your app. That something could be Tweets, a Spotify song, a Youtube video, or many other things.
In order to get the information you need from an oEmbed endpoint, all you have to do is request it.
First find the url you need to request to get back this info. I Googled Twitter oEmbed and it gave me a link to the documentation.
I made a request in Postman with the sample url provided to see what comes back:
https://publish.twitter.com/oembed?url=https://twitter.com/i/moments/650667182356082688
As you can see the URL gives us a few things. Most notably, the json that comes back has an attribute called ‘html’ with the html we need.
This is everything you need to include in your app to show a tweet. It even comes with the style tag that will make sure it looks like it should with Twitter’s styles.
And that’s really it. There’s not much more you need to know. Take the HTML and put it somewhere in your app and you are good to go.
Thanks for reading!
