'How to embed a tweet on a page if I only know it's ID?

Given a simple ID like: 807811447862468608

How can I embed it on my page?

I've looked at other questions on StackOverflow but they require the entire tweet HTML to be present. I'm just trying to save the reference to the tweet and let the widget pick up on it.

javascripthtmltwitter


Solution 1:[1]

So here's a trick - if you only know the Tweet ID, it doesn't matter the user ID you put in the Twitter URL, you'll actually get the link to the Tweet you want.

e.g. https://twitter.com/andypiper/statuses/807811447862468608 will still show you the actual original Tweet, even though I did not send it. It is of course shown with the correct original author attribution, but this is a handy shortcut if all you have is a Tweet ID.

Knowing this information, you have two options to embed your Tweet in a page:

  1. Go to publish.twitter.com and paste in the URL above - it will show you a Tweet embed, and provide the markup code

  2. Programmatically, call Twitter's oEmbed API. Here's an example of doing so using Twitter's twurl tool. You can use the resulting html value from the JSON response to embed the Tweet into your page. Again, notice that I used my Twitter handle, but the actual Tweet ID, and the resulting output refers to the original Tweet from the original poster.

$ twurl -H publish.twitter.com "/oembed?url=https://twitter.com/andypiper/status/807811447862468608"

{
  "url": "https:\/\/twitter.com\/tiagopog\/status\/807811447862468608",
  "author_name": "Tiago Guedes",
  "author_url": "https:\/\/twitter.com\/tiagopog",
  "html": "\u003Cblockquote class=\"twitter-tweet\"\u003E\u003Cp lang=\"en\" dir=\"ltr\"\u003EI will never forget my first HTTP request measured in µs :-) \u003Ca href=\"https:\/\/twitter.com\/hashtag\/elixir?src=hash\"\u003E#elixir\u003C\/a\u003E \u003Ca href=\"https:\/\/twitter.com\/hashtag\/phoenix?src=hash\"\u003E#phoenix\u003C\/a\u003E\u003C\/p\u003E— Tiago Guedes (@tiagopog) \u003Ca href=\"https:\/\/twitter.com\/tiagopog\/status\/807811447862468608\"\u003EDecember 11, 2016\u003C\/a\u003E\u003C\/blockquote\u003E\n\u003Cscript async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"\u003E\u003C\/script\u003E",
  "width": 550,
  "height": null,
  "type": "rich",
  "cache_age": "3153600000",
  "provider_name": "Twitter",
  "provider_url": "https:\/\/twitter.com",
  "version": "1.0"
}

Solution 2:[2]

Simply use this tagging

<blockquote class="twitter-tweet">
  <a href="https://twitter.com/x/status/807811447862468608"></a> 
</blockquote>

and load the twitter widget script

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

and the tweets will be embedded in your page

Solution 3:[3]

Came across this question while programmatically implementing tweet by ID in 2021.

public colorScheme = 'light';

// get prefers-color-scheme for tweet embed
this.colorScheme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';

// Setup Tweet
(<any>window).twttr.widgets.createTweet(this.tweetId, document.getElementById('tweet'), {
    theme: this.colorScheme,
    dnt: true
}).then( function( el ) {
    console.log('Tweet added.');
});

You'll need to be loading widgets.js on your webpage

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

And obviously have <div id="tweet"> in your HTML.

UPDATE: if you're having trouble in vanilla JS you probably need to run this logic after twttr.ready

twttr.ready(
  function (twttr) {
     ...
  }
)

Solution 4:[4]

Check this solution. You need only embedded link or id 

//Twitter JS  <script src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

let twitterShareTweetLink = 'https://twitter.com/Google/status/1164236418622926849';
let tweetRegex = /^https?:\/\/twitter\.com\/(?:#!\/)?(\w+)\/status(es)?\/([0-9]{19})/
let id = twitterShareTweetLink.match(tweetRegex)[3];
$('#tweetDIV').append(`<div class="tweet" id="${id}"></div>`);
var tweets = $(".tweet");
    $(tweets).each(function(t, tweet) {
        $(this).html('');
        var id = $(this).attr('id');
        twttr.widgets.createTweet(
            id, tweet, {
                conversation: 'all', // or all
                cards: 'visible', // or visible 
                linkColor: '#cc0000', // default is blue
                theme: 'light' // or dark
            });
        $(this).removeClass('tweet');

    });

Solution 5:[5]

If you're using React, you can use npm library react-tweet-embed.

Using this, you can show your tweet as:

<TweetEmbed id= {YourTweetID} />

This is the simplest way of incorporating a tweet in your website.

If you're not using React, then you can simply use this code snippet to embed tweet in your website.

Here's a link to working Jsfiddle.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Pedro
Solution 3
Solution 4 Rishabh Rawat
Solution 5 Aditya Rohilla

Related Questions