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:
jQuery Mobile 1.3.0 RC1 Released jquerymobile.com/blog/2013/02/0…
— Elizeo Benavidez (@haddnin) February 4, 2013
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).
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.
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>
<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: