You can easily embed tweets in your website by adding a little HTML snippet to your site’s template. The embedded tweets are interactive in the sense that they’ve a follow button, they show live retweet counts, and you also use CSS to change the formatting of tweets.

Now CSS does help you control the tweet’s appearance but you may be surprised to know that it is also possible to change the other elements of an embedded tweet. For instance, you may modify the actual text of the tweet. The favorite & retweet counts can be altered as well. Let me illustrate that with an example:

This is the original tweet:

Tweet

This is the same tweet, but altered with JavaScript:

<div id="tweet"></div>
<script>
  twttr.ready(function () {
    twttr.widgets
      .createTweet('459047195434819584', document.getElementById('tweet'), {
        conversation: 'none', // or all
        cards: 'hidden' // hidden or visible
      })
      .then(function (el) {
        var e = el.contentDocument;
        var html = e.querySelector('.Tweet-text');
        html.innerHTML = '[How-to Guide] ' + html.innerHTML;
        e.querySelector('.FollowButton').style.display = 'none';
        e.querySelector('.TweetAction--retweet .TweetAction-stat').innerHTML = '123';
        e.querySelector('.TweetAction--favorite .TweetAction-stat').innerHTML = '999';
        e.querySelector('.dt-updated').innerHTML = 'Contact the author of this tweet at amit@labnol.org';
      });
  });
</script>

Notice any difference? Well, there are quite a few.

The altered tweet uses a different font family, there’s minimal Twitter branding, the favorite & retweet numbers are made up, some extra words were appended to the tweet itself and the date has been replaced with custom text. And it is not a fake screenshot.

Also see: Learn Coding Online

How to Alter an Embedded Tweet

Twitter allows you embed tweets with JavaScript and when you take this route, you not only gain control over how the tweets are rendered but also over what’s rendered inside the tweet.

Here’s the complete JavaScript snippet that allows use to modify most of the elements of an embedded tweet.

<div id="tweet"></div>

<script src="https://platform.twitter.com/widgets.js"></script>

<script>
  twttr.ready(function () {
    twttr.widgets
      .createTweet(
        // Replace this with the Tweet ID
        'TWEET ID',
        document.getElementById('tweet')
      )
      .then(function (el) {
        var e = el.contentDocument;

        // Change the tweet text
        var html = e.querySelector('.Tweet-text');
        html.innerHTML = '[How-to Guide] ' + html.innerHTML;

        // Hide the Follow Button
        e.querySelector('.FollowButton').style.display = 'none';

        // Change the retweet count
        e.querySelector('.TweetAction--retweet .TweetAction-stat').innerHTML = '123';

        // Change the favorites count
        e.querySelector('.TweetAction--favorite .TweetAction-stat').innerHTML = '999';

        // Replace the date with text
        e.querySelector('.dt-updated').innerHTML = 'Contact the author of this tweet at amit@labnol.org';
      });
  });
</script>

You pass the tweet ID (line #11) and also specify the DIV element where the tweet will be rendered.

After the tweet is rendered, you can use standard DOM methods to change the various inner elements based on class names. For instance, you can change the innerHTML property of the element with the Tweet-text class to modify the tweet text. Similarly, if you set the display property of class FollowButton to none, the follow button is hidden.

Fake tweets are known to have crashed markets so the next time you come across an embedded tweet with unbelievable retweets or favorites, it may be a good idea to verify the numbers.