Interactive by Nature

How To Embed A Tweet

I read a lot of blogs and often see an embedded tweet and think… how did they do that? Well, I figured it out and I’m going to share this simple process with you. It’s literally just a matter copying a little HTML and pasting it in your blog or web page. If you don’t know what I’m talking about, the embedded tweet looks like this:

This is great because the embedded tweet comes fully equip with Reply, Retweet and Favorite options. It also gives you the option to follow the person that owns the embedded tweet. Any images posted in the tweet will display as well. It’s basically the fully featured tweet that you would see on Twitter or other Twitter applications like TweetDeck.

Finding The Code

We’ve all retweeted someone or favorited a tweet right? While on the twitter website, if you hover over a tweet, you’ll see the options Reply, Retweet and Favorite. Have you ever noticed the 3 little dots followed by the word “More”? If you click on “More”, you’ll get two options Email Tweet and Embed Tweet (figure 1).

Tweet Options

figure 1

Clicking on “Embed Tweet” will launch a dialog box with the HTML embed code and a prieview of what the embedded tweet will look like (figure 2). Simply copy the code and paste it into your blog or web page where you would like to see the embedded tweet.

Embed Tweet Dialog

figure 2

Embedded Tweet Control

Below are a couple of options for controlling how the embedded tweet will display. You can find a full list of options here.

Width and Height

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

Alignment

<blockquote class="twitter-tweet" align="left">…</blockquote>

I nice little secret for WordPress users. If you copy and paste the URL of the tweet into your post in WordPress admin, it will embed the tweet exactly as it shows above. Here’s an example of the snippet:

https://twitter.com/haddnin/status/298513078679633920

Leave a Comment