How to add "Tweet This" links to your Blogger Template (with short URLs)

Twitter has become one of the most popular ever syndication and networking tools for bloggers. A few readers have asked if it is possible to add a "Tweet This" link to our Blogger templates, and while this was possible, I had not discovered a method of automatically shortening the URL of our blog posts until now.



Luckily for us, Bit.ly have created a JavaScript-based solution which shortens the URL to just a few characters and enables bloggers to add a Tweet This link configured for their posts. In this tutorial, I'll explain how you can add this to your Blogger template so your readers can Tweet your posts to their Twitter followers, enabling your Blogger posts to be syndicated to a wider audience.

Editing your template to add the Twitter links

First of all, you should make a full back-up of your existing template (which you can later restore if you make a mistake in the coding). To do this, go to Layout>Edit HTML in your Blogger dashboard and click on the "Download full template" link near the top of the page. Save your template to a location on your computer which you can easily access later.



Next, go back to the Layout>Edit HTML page and ensure you have checked the "Expand widget templates" box. The place where we need to add the Twitter code is contained within the Blog Posts widget.



Search for this section in your Blogger template code (or similar):

<div class='post-footer-line post-footer-line-1'>

If you cannot find this exact line of code, search for 'post-footer' instead. Alternatively, you can add your code immediately after the <p><data:post.body/></p> line.



Just after the 'post-footer' line you have located, paste the following section of code:

<b:if cond='data:blog.pageType == "item"'><span style='float: left; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbieXEkn2kJmhyPt36OxRmhYdLwjkMvfvNRAhrHQIz1Ef8dKvNorYgbuQDc3KqsLZRHER8VlfNlJudNQdgxU5FB8lYVyHRHSEIWAH7_XOIoP41LvGD7EU8gPzde3lY9iUX9KjPy49ToYFx/s128/twitter-16x16.png) left no-repeat; padding-left: 20px;'><script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&amp;login=tweettrackjs&amp;apiKey=R_7e9987b2fd13d7e4e881f9cbb168f523' type='text/javascript'/>

<script charset='utf-8' src='http://s.bit.ly/TweetAndTrack.js?v=1.01' type='text/javascript'/>

<a expr:onclick='"return TweetAndTrack.open(this, \"" + data:post.url + "\");"' href='#'>

<span style='display:none;'>I'm reading: <data:post.title/></span>Tweet this!</a></span></b:if>

Preview the changes to your blog template to make sure you have not made any errors in adding the code. If all is well, the preview page should load (though you will ne unable to see the Twitter link on the preview page).



Finally you can save your template. Now when you view an item page on your blog, you will see a link in the post-footer section which looks like this:



I'm reading: Blogger BusterTweet this!





This link automatically generates a Bit.ly shortened URL for your post. When a reader clicks on this link, they are taken to Twitter.com (where they can log in if required) with a pre-filled Tweet which appears like this:

http://bit.ly/url I'm reading: [title-of-blog-post]

If you would prefer the prefilled Tweet to say something other than "I'm reading", you can edit this phrase in the code you add to your Blogger template. Readers can edit this pre-filled Tweet before updating if required.



I hope you will enjoy using this Twitter syndication link in your own Blogger templates. Please try this out for yourself to see how it works and feel free to leave your comments below.

A Simple Flickr Photostream Widget for Blogger

After posting about Roy Tanck's animated Flickr widget, I realized that I'd never actually written up a tutorial for the simple Flickr Photostream widget which I use in many of my premium templates.



This version of the Flickr Photostream is a static widget designed to display thumbnails of your most recent Flickr uploads, and can be added quickly to your Blogger layout using a one-click installer. It's an ideal solution of you prefer a simpler method to display your Flickr photos which does not slow down page-loading time. You can see an example of how this widget could appear below:

www.flickr.com

To add this widget to your Blogger blog, you will need to have your Flickr user or group ID which may look something like this: 8191003@N02



The simplest way you get your Flickr ID is to use idGettr (opens in a new window), where you paste the URL of your Flickr Photostream in the box so idGettr can discover your ID for you.



Once you have your Flickr ID you can use the form below to add your own simple Flickr Photostream widget to your Blogger blog:







I hope you enjoy using this widget for your Blogger blogs! Please feel free to leave your comments below.





Image credit: Flickr badge by Poolie via Flickr Creative Commons.

Blogumus for your Flickr Photos!

Get this widget at roytanck.com

If you enjoyed using Blogumus - the animated flash-based widget to display your blog labels - then I'm sure you'll love Roy Tanck's latest widget creation: an animated, cloud style Flickr widget! You can see an example of this in action on the left which uses my Flickr Photostream.



Roy's widget is very easy to customize and add to your blog. Simply visit the Flickr Widget page and use the form to add your Flickr photostream feed URL, then choose the dimensions and background color for your widget.



Once you're done, press the "Generate code snippet" button to be presented with a preview of your widget and the code. You can then paste this code into an HTML/JavaScript widget in your sidebar, or even directly into a blog post (as I have done here).



Roy Tanck created the original WP-Cumulus widget upon which my Blogumus widget is based. He has done a fantastic job in creating this widget. It uses a much smaller file size than the Blogumus/WP-Cumulus widget and doesn't hog nearly as much of your computer memory!



I hope you enjoy using this widget to enhance your own Blogger powered blogs! Let us know what you think about Roy's Flickr widget by leaving your comments below.