Screenshots: Still the Best Way to Embed Tweets in Web Pages

Published in: CSS - Embed - screenshots - Twitter

Twitter ScreenshotsTwitter has a new online tool – Blackbird Pie – that, they say, will make it easy for users to embed individual tweets in their web pages and blogs.

You just have to paste the full address (URL) of any public tweet and BlackBird Pie will generate a HTML version of that tweet complete with clickable hyperlinks, profile pictures and a timestamp when that tweet was first published.

Some Reasons to Avoid Blackbird Pie

Earlier you had to use screen capture tools to embed tweets in web pages but with the new Blackbird Pie tool, screen grabs are no longer necessary? Right.

Well, there are quite a few limitations with HTML tweets that you should know:

#1. HTML tweets generated by Blackbird Pie use inline CSS styles that are not supported by some blogging clients. That means you cannot embed an HTML tweet inside your blog post.

#2. Even if CSS styles are allowed by your blog software, the embedded tweets will look horrible in Google Reader and other online RSS readers. That’s because most newsreaders ignore CSS formatting styles.

#3. Here’s another big reason why you should avoid using static HTML tweets.

The code generated by Blackbird Pie contains the profile image of the person who initially wrote that tweet. Now if he decides to change his profile picture later, there’s a possibility that your embedded code will break as the picture URL used in the tweet will now return a 404.

Embed Tweets as ‘Clickable’ Screenshot Images

If you are to embed a ‘tweet’ in your website such that it looks just like the actual web version, the best way would be that you capture a screenshot of the tweet and embed it as a static image.

However, instead of using the Print-Screen key to capture static screenshots of tweets, here are some tools that make capturing tweets simple.

#1. Kwout – Kwout may look like any other web-based screen capture tool but there’s something very unique about this service.

Kwout will capture a screenshot of your Twitter messages as an image map so all the hyperlinks in the screenshot are preserved and remain clickable even when the tweet in embedded on another page. Here’s a live example.

#2. QuoteURL – With Quote URL, you can combine multiple tweets and capture them as a single screenshot as shown below. 

What’s good about the Quote URL service is that it also provide a short permalink (see example) for all your collected tweets so it’s much easier for you to share the conversation via email.


#3. Twonvo – Type the ID of any Twitter message in the input box and Twonvo will generate a linear view of the entire Twitter conversation that you can grab with one go.

To find the status ID of any Twitter conversation, click on the timestamp (‘about 1 hour ago’) part of a tweet and simply copy the ID from the status URL. You should use the status ID of the last update in the discussion to get the full conversation.

screenshot of twitter conversations

Here are some more screen capture tools that you may use with Twitter. And here’s a detailed guide on how to embed anything in web pages.

📮  Subscribe to our Email Newsletter for Google tips and tutorials!
Published in: CSS - Embed - screenshots - Twitter

Looking for something? Find here!

Meet the Author

Web Geek, Google Developer Expert
Amit Agarwal

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. He is the developer of Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory

Get in touch

Google Add-ons

Do more with your Gmail and GSuite account

We build bespoke solutions that use the capabilities and the features of Google Workspace for automating business processes and driving work productivity.

  1. Mail Merge with Attachments
    Send personalized email to your Google Contact with a Google Sheet and Gmail
  2. Save Emails and Attachments
    Download email messages and file attachments from Gmail to your Google Drive
  3. Google Forms Email Notifications
    Send email notifications to multiple people when a new Google Form is submitted
  4. Document Studio
    Create beautiful pixel perfect documents merging data from Google Sheets and Google Forms
  5. Creator Studio for Google Slides
    Turn your Google Slides presentations into animated GIFs and videos for uploading to YouTube