How to put a working Twitter message into your blog

This article shows how you can embed a fully-featured message from Twitter, right inside your blog, which lets visitors re-tweet, favour it - and follow you in Twitter.

Showing Twitter messages: copied text vs full-featured tweets

If you're reading Twitter, and see a tweet that you want to blog about, it's easy to copy-and-paste the content into a blog post or a gadget. This brings the text and the links (and photos etc) that are part of it - like this:

California drowning out the window side. instagr.am/p/LLXlAexc3m

But the embedable-tweets feature makes it almost as easy to show the actual tweet inside a post (or in a gadget in your header, footer or sidebar). And if you use this feature, your readers will be able to use the Twitter features that go with a tweet:

View photos / videos, in the same way that they can in Twitter
Reply, retweet or favor the Tweet
Follow the tweet's author with a single click
Click on the author’s @username to see their Twitter profile page,
See the date in the lower left corner of the Tweet
See replies, retweets and favorites on the tweet's Details page.

To do this, you just need to get the HTML-embed code for the tweet from Twitter, and install it into your blog.

How to get the code to display the embeddable Tweet

Open the expanded view of of the tweet, by clicking on either the word "expand" immediately under it, or the time-indicator on the right hand side if you can't see "expand".

Go to the perma-link page for the message, by clicking on Details in the extended view.

On the webpage that opens, click Embed this Tweet, which you can find at the bottom of the page. (Notice that the URL for the tweet is showing in the address bar at the top of the screen.

Copy the code from the HTML tab of the box that opens. At the moment, I recommend choosing an alignment, because without it, the code hasn't been working - hopefully this will change soon). It will look something like this:

<blockquote class="twitter-tweet tw-align-center"><p>These buttons dont fly-in, hover, shine, zoom, slide, pop out of egg-shells, sing songs or wash dishes.<a href="http://t.co/MAKJPf5X" title="http://bit.ly/JPNn04">bit.ly/JPNn04</a> via@BloggerHAT</p>— Blogger HintsAndTips (@BloggerHAT) <a href="https://twitter.com/BloggerHAT/status/202068733534011392" data-datetime="2012-05-14T16:11:54+00:00">May 14, 2012</a></blockquote>

<script src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

If you have other Twitter widgets etc anywhere else on your blog, then you need to leave out the last line, ie

<script src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

How to put the embeddable Tweet into your blog

Write the rest of your blog post. (Maybe put in some marker text to show where it's going to go).

Put this code into your blog in the same way as any other external HTML.

Hint: When putting HTML into a post, I usually write the post first, then put something like "XXXXX" where I want the tweet to go. Then I switch to the HTML view, use Ctrl/F to search for XXXXX (or whatever I used), so I know where to put the code.

If you've put it into a post, then you need to publish the post immediately from the HTML view:

Do not go back to Compose mode.
Do not Preview the post before you publish it

What about if you accidentally Preview or use Compose-mode - or edit the post again?

If you go back to the WYSIYIG / Compose mode, or if you use Blogger's preview function, then the <p> and </p> tags around the tweet-contents are removed - this is a feature of how Blogger's post-editor works.

If this happens (or if you edit the post again after publishing it) you need to go back to Edit HTML mode, and add them in again.

Just to be clear where these tags go, I've highlighted them in this code example:

<blockquote class="twitter-tweet tw-align-center"><p>These buttons dont fly-in, hover, shine, zoom, slide, pop out of egg-shells, sing songs or wash dishes.<a href="http://t.co/MAKJPf5X" title="http://bit.ly/JPNn04">bit.ly/JPNn04</a> via@BloggerHAT</p>— Blogger HintsAndTips (@BloggerHAT) <a href="https://twitter.com/BloggerHAT/status/202068733534011392" data-datetime="2012-05-14T16:11:54+00:00">May 14, 2012</a></blockquote>

If you use a test-blog to get your posts right before you publish them in your blog, then you should also double-check the <p> </p> tags in Edit HTML mode as the last thing you do before publishing the post in your for-real blog.

What your readers will see

Web-browser visitors

While the message that you have embedded is still in Twitter, then visitors to your blog on a web-browser see it (the tweet) displayed along with the date it was posted, the author's Twitter ID, and links for replying, re-tweeting and favouring the message - like this:

These buttons dont fly-in, hover, shine, zoom, slide, pop out of egg-shells, sing songs or wash dishes.bit.ly/JPNn04 via@BloggerHAT
— Blogger HintsAndTips (@BloggerHAT) May 14, 2012

However if the message has been deleted from Twitter, your readers will see this instead:

What happens when an embedded tweet is deleted?I guess this is the best way to find out:-)
— Blogger HintsAndTips (@BloggerHAT) May 30, 2012

Effectively, if the message not in Twitter any more, the content is still shown, but the extra features aren't available.

RSS-feed readers:

Visitors who read your blog through an RSS-subscription will see .... coming soon, when I've seen what this post looks like in my reader!

Email subscribers:

Readers who see your blog via email subscription .... coming soon, when I've seen what this post looks like in my email

Installing 3rd party HTML into Blogger

Other Twitter gadgets

What is RSS / Subscribe to Posts

Giving your blog an email subscription option

Getting your posts right before you show them to your readers

Pages

Monday, June 11, 2012