TwitterScreenShot

A Node CLI tool to make a screenshot of a tweet or a Mastodon toot and create a link. A twitter embed can add extra weight in JavaScript in a page, this allows you to create a static image of a tweet from its URL, and a link to it, which is much lighter.

The script creates a .png and a .webp of the image, and returns the html for them in an <picture> tag.

There are downsides though, with this being a static image, the number of likes and retweets are not updated (unless you ran the script again!), and commenting / retweet links are not interactive.

Upgrading from 0.1.x

If you are updating, there are a couple of new dependencies to support Mastodon, so you will need to run npm install again after downloading the files.

Install

Download the files from git, you can clone them, see guide or download the zip file (click the green code button and click Download Zip), or just click on the latest release and download the files.

run npm install

copy config.js.default to config.js and amend to suit

Whatever folder you specify for imgDir needs to exist, and also needs contain a further folder called named unopt:

tweetimg/
|__unopt/

config

All configuration is done in the config.js file.

• imgDir default tweetimg/ - The directory the screenshot of the tweet will be generated in, the filenames will always be {tweet_id}.png & {tweet_id}.webp.
• lightDark default light - Set to dark to create snapshot in twitter's dark mode.
• background default #ffffff - Background colour of the tweet snapshot.
• outputHtml default true - Allowed values are true and false. If true, the script will return html with a <a> link and <picture> <img> tag.
• imgURL default http://example.com/tweetimg/ - The url to prepend to the src attribute in the <img> tag.
• classNames default '' - a string of class names to add to the class attribute of the <img> tag.
• lazyload default true - Allowed values are true and false. If true, the script will add lazyload="true" to the <img> tag.

Usage for Tweets

node gettweet url={tweet_url here} bg={valid color} --dark|--light --nothread

• url - Required - The url of the tweet, copy this from the browser bar
• bg - Optional - override the page background colour set in ./config.js.
• --dark - Optional - force dark mode, overrides the setting in ./config.js.
• --light - Optional - force light mode, overrides the setting in ./config.js.
• --nothread - Optional - show just the individual tweet, not the conversation.

example:

node gettweet url=https://twitter.com/davewsmart/status/1364211090968707072

output

<a href="https://twitter.com/davewsmart/status/1364211090968707072" target="_blank" rel="noopener">
   <picture>
       <source type="image/webp" srcset="https://example.com/tweetimg/1364211090968707072.webp">
       <img src="https://example.com/tweetimg/1364211090968707072.png" loading="lazy" class="" width="550" height="380" alt="Dave Smart on Twitter: &quot;'tiz me! Talking! At #brightonSEO! I'm giddy as a kipper! Sign up from the grand total of free at the link!&quot; / Twitter"/>
   </picture>
</a>

Usage for Mastodon Toots

node getmastodon url={toot url here} bg={valid color}

• url - Required - The url of the tweet, copy this from the browser bar
• bg - Optional - override the page background colour set in ./config.js (only relevant if you set --rounded).
• --rounded - Optional - add a border radius to the embed, overrides the setting in ./config.js.
• --square - Optional - enforces no border radius to the embed, overrides the setting in ./config.js.

example:

node getmastodon url=https://seocommunity.social/web/@dwsmart/109302205479552500

Get the toot url

Click on the ... link in the toot, and choose Copy link to post from the menu.

output

<a href="https://seocommunity.social/web/@dwsmart/109302205479552500" target="_blank" rel="noopener">
   <picture>
       <source type="image/webp" srcset="https://tamethebots.com/tweetimg/seocommunity_social_109302205479552500.webp">
       <img src="https://tamethebots.com/tweetimg/seocommunity_social_109302205479552500.png" loading="lazy" class="" width="400" height="545" alt="Quick update to 
https://tamethebots.com/tools/fetch-render It now blocks WebSocket connections when rendering as Googlebot or BingBot, to simulate what they do, an edge case, but one I kept forgetting to add"/>
   </picture>
</a>

Some Great Alternatives

Use Hugo as a CMS? John Muller (@JohnMu on twitter) has an excellent integrated solution static-social-posts on github & more info on his blog post John also updated this to support for Mastodon, see their blog post here

Perhaps prefer an SVG? Try Terence Eden's (@edent on twitter) Tweet2SVG on gitlab, a php driven solution.