Embed an X (Twitter) Post in Webpage
Jun. 28, 2024
To embed an X (Twitter) post in personal blog or website by external link, we can copy the post link and then paste it in website ‘Twitter Publish’1 to get a HTML code snippet. Take a post by Elon Musk, paste its link https://x.com/elonmusk/status/1805804111037919520 to ‘Twitter Publish’1. Next, if choose ‘Embedded Video’ style, we can get HTML code:
1
<blockquote class="twitter-tweet" data-media-max-width="560"><p lang="zxx" dir="ltr"><a href="https://t.co/MnvArHwJRm">pic.twitter.com/MnvArHwJRm</a></p>— Elon Musk (@elonmusk) <a href="https://twitter.com/elonmusk/status/1805804111037919520?ref_src=twsrc%5Etfw">June 26, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
and the effect is:
— Elon Musk (@elonmusk) June 26, 2024
Another display option is ‘Embedded Post’ style:
1
<blockquote class="twitter-tweet"><p lang="zxx" dir="ltr"><a href="https://t.co/MnvArHwJRm">pic.twitter.com/MnvArHwJRm</a></p>— Elon Musk (@elonmusk) <a href="https://twitter.com/elonmusk/status/1805804111037919520?ref_src=twsrc%5Etfw">June 26, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
at this time we have:
— Elon Musk (@elonmusk) June 26, 2024
As can be seen, in the rendering process a JavaScript file named widgets.js is invoked from the twitter CDN, https://platform.twitter.com (actually I’m not sure if it’s right to call it as CDN, but at least I think its function amounts to a CDN).
References