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.
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 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:
However
if the message has been deleted from Twitter, your readers will see this instead:
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
Related Articles:
Installing 3rd party HTML into BloggerOther Twitter gadgetsWhat is RSS / Subscribe to PostsGiving your blog an email subscription optionGetting your posts right before you show them to your readers
Chevrolet Classic
Chevrolet Prisma
Renault Logan
