Embedded Tweets can be Easily Faked
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.
Amit Agarwal
Google Developer Expert, Google Cloud Champion
Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India.
Amit has developed several popular Google add-ons including Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory