How to Embed a Tweet on a Blog Post

How to Embed a Tweet on a Blog Post

Twitter is a great way to keep an eye on what’s going on in the world. Because it’s instant and can be quite personal, it can also be a great way to pick up on some key insights into the lives and opinions of celebrities, business owners, game developers and more.

For example, some of the team behind Top Gear will often leak when the next season is going to start long before it’s officially announced on their website.

As these messages are usually straight from the horse’s mouth, they can be great reference material for a blog post. When discussing the particular ‘tweet’, you can simply type out the content of the message into your blog post but it’s a lot more visually appealing, and can appear to be more trustworthy, if you actually display the tweet itself within your post.

By the way, I feel like I’ve been using a lot of capital letters recently so for the purposes of this post I’m going to type tweet with a small ‘t’. This may or may not be correct. Sue me.

There are two methods to display a tweet in your blog. One is through taking a screenshot of that tweet and uploading that to your blog. This can help you to future-proof the tweet as it will be stored as your own image so even if that person then removes their tweet, you’ll still have a copy.

The second method is to use Twitter’s tools to embed the tweet in your post. This allows for a greater deal of interaction with the tweet itself – known as ‘web intents‘. In some ways, this can be quicker and easier than taking a screenshot and uploading an image at the correct dimensions. Here’s how this looks:


Twitter often play around with their design and layout but the following gives you an idea of how to embed a tweet as at February 2012.

As an example, I’ll use a tweet from the fantastic Stephen Fry who is currently filming in New Zealand and, right about now, raving about how awesome our country is.

Step 1. Open the Tweet

On a Twitter user’s update stream, you can hover over a particular tweet to display a few options – reply, retweet, favorite, and finally, open.

Stephen Fry in New Zealand

Clicking on open expands the tweet window to display information about how and when the tweet was posted, as well as the conversation that took place in regards to that tweet (predominantly the people that clicked on ‘reply’ on that specific tweet – see why Twitter wants you to use its own reply and retweet buttons rather than compose your own tweets from scratch?). Quick tip: when clicking on ‘open’, if you open it in a new tab/window instead you’ll skip the next step.

With celebrities like Stephen Fry, you’ll generally see a lot of responses from other people and, occasionally, maybe even a follow up comment by the legend himself.

Stephen Fry's Flat White

In this view, you’ll see a link called ‘Details’. Click that and you’ll be taken to the full URL specifically for the tweet. This should look something like this:

https://twitter.com/#!/stephenfry/status/170252353688182785

From this new view, you can see that the ‘Details’ link has changed to an ‘Embed this Tweet’ option. Click that.

Step 2. Choose Your Embed Options and Code

Click ‘Embed this Tweet’ and you’ll be given a few options as per the below screenshot.

Embed a Tweet

Once you’ve selected an alignment, there are three options to embed the tweet within your blog post.

HTML

To be honest, this option can be the most future-proof option of the three as the tweet’s text is physically copied to your blog and, using Javascript, is simply presented in a nice way. Once you have this on your blog, the only content that is pulled from the actual tweet each time the page is loaded is the current Twitter profile photo. If Stephen Fry were to delete his tweet, the message itself should still remain on your blog post.

Disclaimer – I’m basing this assumption simply on an understanding of the code and I’m pretty confident that it’s the case. For that reason, I basically can’t be bothered testing it! If you’ve found that the embedded code is somehow broken when the user deletes their tweet, do let me know in the comments below!

The HTML code provided by Twitter includes the code for the tweet itself, as well as the JavaScript code that renders the tweet n the correct format. Simply copy the code, jump to the HTML view of your blog’s new post window and paste the code where you want the tweet to appear.

If embedding tweets in your blog post is going to be a fairly regular activity, you can instead take the script section of the code and paste it into a new line near the top of your websites header. This then runs the script every time the blog is loaded. It’s also a little tidier and a bit cleaner for Google to keep your script tags in the header of your website rather than half-way down the post itself.

To do this in a wordpress.org blog, jump into the ‘Appearance’ menu item, then ‘Editor’, click on the ‘header’ option and paste the script line into that file. If you see some other script tags near the top of your file, paste it just under those.

Quick tip: Even if you don’t want to mess with your header file, be aware that you only need to post the script section of the code once in your blog post. So if you’re embedding two or three tweets in one post, just delete the script section of the code from all but one of the tweets.

Shortcode

This option provides you with a special tidy shortcode version which ‘speaks’ to certain blog providers, like WordPress.com, and magically tells the blog how to display the tweet.

All you need to do is paste the shortcode, which looks like the below, into your blog post and WordPress will take care of the rest.

[tweet https://twitter.com/stephenfry/status/170252353688182785]

As you can see, this doesn’t actually work in this blog post (unless I’ve since changed something!) because this is a self-hosted wordpress.org blog rather than a free wordpress.com blog. Also note that the only content you have copied across to your blog is the URL of the tweet so, again, if the Twitter user deletes that tweet we can assume that it will no longer display on your blog.

Link

This option is actually a bit bollocks. All it does is provide you with the full URL of the tweet. If you are viewing this option on the Twitter website, the chances are that you’re already at that website address and so already have the full URL.

For that reason, you can basically ignore this option.

You’re done.

That’s pretty much it. You’re done. Be sure to preview your blog post before it goes live and make sure that the tweet is properly embedded.

More Examples and a Free Tip:

It can be hard to trawl back through a user’s tweets to find that specific update you saw them mention a few days back, so make use of the ‘favourite’ function to save the tweet for later use.

Here’s a few more examples from my own favourites. Note that if the tweet includes a Twitter photo (hosted on Photobucket or similar), the photo will be included when embedded. You can also see that if the tweet you are embedding is a reply, the original tweet will also be embedded.

 

 

 

 

 

Note: for more advanced coders, there are a few more options for displaying tweets on your website. View the full list from Twitter themselves.

Featured image credit: Simon Pegg photo taken by Gage Skidmore.