Jun 5, 2013

How To: Embed Tweets into Blog Posts

Harry Tattersall Smith
Jun 5th, 2013 - 3 mins read

If you thought the only way to get Tweets into your blog post was to just screen grab them before inserting them in as a JPEG then think again.

Embedding is a far superior way of sharing Tweets as the links remain active, display real-time retweet/follower/favourite counts and enable readers to follow, reply or retweet the original poster all directly from the page on which the Tweet has been embedded.

Although to show you how, first I’ll have to insert a couple of JPEG’s showing you how to get started! To avoid over complicating things I am going to just use one Tweet from the Harkable account about the new logo we’ve designed for the brilliant children’s charity Miracles for their Fifty Artists Fifty Children campaign.

Getting started

First select the Tweet you want to embed into your blog or website.

Click More

At the bottom right hand corner of the Tweet and as pictured above click more and you’ll be presented with a drop down menu giving you the option to E-mail or Embed the Tweet.

 

Click Embed

And you’ll be taken to the following page.

 

 

Copy the code

In the box and paste it into the HTML section of the text editor (In the top right hand corner next to the visual tab in WordPress) that you are using and when published the Tweet will have been reformatted to look this this.

 

 

Note: If you want to include an attached a photo or a video link make sure the include media box is ticked.

You can embed more than just single Tweets but can include whole conversations, tweets with pictures, YouTube links and replies.

 

 

Note: If you want to include replies and the original tweet make sure the include parent Tweet box is ticked.

If you want to include a Twitter conversation without using every Tweet insert the following code into the HTML section of your text editor.

 

Embedding Tweets on WordPress

If you are using WordPress you can simply copy and paste the URL of a tweet into a single line on your blog and it will be reformatted for you. Like this for example.

Editing the height and width of your embedded Tweets

Height is a variable based on the content of the Tweet. However they will generally render at a default width of 500px, but will adjust if the page section into which they are embedded is smaller. This flexibility makes embedding excellent for use both on desktop and mobile devices. However if you are wanting to edit the size, it’s easy to adjust the width code for the link in the HTML section of your text editor.

 

<blockquote class="twitter-tweet" width="350">...</blockquote>

Troubleshooting

If your CMS has an ‘HTML’ or ‘code editing’ mode make sure you are pasting your code directly into that. Otherwise some text editors will attempt to remove the data or simply try to publish the code literally.

Embedding Tweets for Developers

Whilst the previous section is adequate for users just looking to share and distribute content on blogs and websites some designers might want to arrange for Tweets to be embedded  programatically. This can now be easily done through an OEmbed endpoint feature that Twitter now employs.

In order to do  this users must do two things.

1)Take the URL address or ID number of the Tweet they want to render.

2) Make a request to the GET statuses/oembed endpoint, passing the Tweet URL or ID as a query parameter.

For more information on how to use, refer to the oEmbed Discovery documentation.

Want more Information?

If you want to learn more about embedding Tweets then check out the official guide to embedding Tweets on the official Twitter blog here.

 


Harry Tattersall Smith
Jun 5th, 2013 - 3 mins read
Join Our Newsletter
Get 5 must-read links on digital marketing each week, plus any posts from our blog.
No spam ever. Just great content.