30 16 Useful Twitter Tools for Blogger Wednesday, August 5, 2009 /

Since it's launch back in 2006, Twitter has become a leading pioneer in the world of social media. Bloggers in particular find this service an invaluable tool for syndication, news stories and community conversation.



For this post, I have rounded up 16 of the most useful tools, tips and free resources to help you get the most out of Twitter through your Blogger powered blog.

Display your Latest Tweets

Visitors to your blog may also enjoy reading your Tweets, particularly if they are of relevance to your blog's niche subject.



Here is a selection of the best tools for displaying Twitter updates in your Blogger layout:

The Official Twitter Badges

Twitter provides an animated "Profile" badge which you can use to display your latest updates as a widget in your blog layout:

You can configure the size, colours and number of updates for your badge in the settings, then grab the code which can be pasted in an HTML/JavaScript widget in your Blogger layout page.



Another alternative is the Twitter "MySpace" gadget, which uses Flash to create a different appearance to the gadget:

We can copy the code generated for this widget and paste into an HTML/JavaScript widget in our blog - it's not limited only to MySpace profiles!

Blogger Widgets and Gadgets

Another way to display your Twitter updates is to install a Blogger widget or gadget in your layout. These can be configured to display as few or many Tweets as you choose, and require only your Twitter username to install:



Simple Twitter Updates Widget

This was the first Twitter application I created for use with Blogger blogs and still remains one of the most popular tools on the site! To install, simply fill out the form and click "Add Widget" to install automatically in your layout.



Twitter Gadget for Blogger (EN)

This gadget works in much the same way as the Twitter Updates widget but is simpler to install and can be reconfigured after installation.



Twitter Updates Gadget (ES)

Daniel Ikeda has made a Spanish translation of my Twitter Gadget for easy installation.

TwitSig - Your Tweets in Pictures

TwitSig is an interesting free service which allows you to display your latest Twitter update as an image. You can add this in your layout as either an HTML/JavaScript widget (using the code generated on the TwitSig homepage) or as an Image gadget using one of the alternative backgrounds.



Here's an example of the default Twitsig badge:





This one uses magnets:





Here's another using a fortune cookie:





Visit TwitSig to generate your own updating Twitter updates image.

Add a "Follow Me" Badge

To encourage your blog readers to follow you on Twitter, try adding a "Follow Me" badge which links to your Twitter profile page.

Here are some useful tools and badges which you can use to add a linked "Follow Me" badge to your Blogger layout:

Twitter Follow Badge by Go2Web"0.com

Here's a new and interesting way to add a non-intrusive "follow me" badge to your site, like this:

The badge can be configured for different colour schemes, height from the top of the page and left/right alignment.

To add the badge to your Blogger blog, visit the TwitterFollowBadge page and fill in the form to your requirements. This will generate some JavaScript code which you should add just before the closing </body> tag in your Blogger template. However, in it's native form this code will not display in Blogger!

Instead, we have two options:

1. Paste the JavaScript into an HTML/JavaScript widget instead


2. Replace <-- and --> in the generated code with &lt;-- and --&gt; (this enables the script to function correctly and display the badge in your page)
   
   

TwitterButtons.com

TwitterButtons offers several pages of free "follow" buttons to help your blog readers follow you on Twitter:

Simply add your Twitter ID in the space provided and TwitterButtons will generate the code to add the button of your choice as a linked badge in your layout. Paste the code into an HTML/JavaScript gadget in your layout (or directly in your template if preferred!) and you're all set.

Twitter Buttons by Vincentabry.com

This site offers 31 different styles of Twitter buttons which you can add to your blog. Although the site is not in English, the Twitter buttons are.



To add these to Blogger easily, use your favourite image in a Picture gadget in the layout, then link this to your Twitter profile:

Add "Tweet This" Links to your Blog Posts

Twitter is an excellent service for syndicating blog posts and useful or interesting articles. Help your blog readers share their favourite posts on Twitter by providing a "Tweet This" link for each of your blog posts.



Here are three different ways you could do this:

Add a simple "Tweet This" link

The simplest of all Twitter syndication links is a text link which uses the URL and title of your blog post:

There are of course many ways in which this link could be styled, and where it could be positioned. For now I'll explain the most basic method of installation.



Go to Layout>Edit HTML in your Blogger dashboard and check the "Expand Widget Templates" box.



Then using your browser search function, locate the following line of code (or similar):

<div class='post-footer'>

Immediately after this line, paste the following section of code:

<a expr:href='"http://twitter.com/home?status=Reading " + data:post.title + " @YOUR-TWITTER-USERNAME " + data:post.url' title='Tweet it on Twitter'>Tweet This</a>

Be sure to replace "YOUR-TWITTER-USERNAME" with your own username!



Then save your template. This will add a "Tweet This" link in the post-footer section beneath each blog post. Readers can click this link to post a pre-filled template "Tweet" like this:

Image based "Tweet This" Link

If you'd prefer to use a stylish button or larger image link, you can simply replace the text from the previous example with an image tag, like this:

<a expr:href='"http://twitter.com/home?status=Reading " + data:post.title + " @YOUR-TWITTER-USERNAME " + data:post.url' title='Tweet it on Twitter'><img src="http://image-host.com/your-image-link.jpg" alt="Tweet This" /></a>

Here's a great example of this effect on PSDrecipes:

Using Short URLs in "Tweet This" Links

Many of us use lengthy domain names which take up much of Twitter's 140 character limit for the tweeting of posts. 



A while ago I posted a tutorial explaining how to enable short URLs for "Tweet This" links using Bit.ly. This explains how to add a similar text/button/combination link for each of your Blogger posts which adds a shortnened URL to the Twitter post template instead of the regular, lengthier one.

Enable "Tweetbacks" in your template

Our Blogger templates already support "Backlinks" (known as "Links to this post" in Blogger). However, these backlinks don't display links generated on Twitter which usually include shortened URLs.



Dan Zarella's original "Tweetbacks" script is JavaScript based and can be used in Blogger templates to display tweets about your post. It is very easy to install and requires no customization (unless you wish to style how the tweetbacks are displayed).



To add "Tweetbacks" to your Blogger blog, simply copy the code below and paste this in your template where you would like the Tweetbacks to appear:

<script src="http://danzarrella.com/tb.js"></script>

The simplest installation is to paste this code into an HTML/JavaScript widget in your Blogger layout. This will display Tweetbacks on every page of your blog, and will show the Tweetbacks attributed to each individual page.



Another possibility is to add Tweetbacks beneath the "Links to this post" section of your template, effectively grouping these tweets with backlinks to each individual post.



To achieve this, go to Layout>Edit HTML and check the "Expand widget templates" box. Then search for the following line in your template:

<b:includable id='backlinks' var='post'>

Immediately after this line, paste the following section of code:

<h4>Tweetbacks<h4>

<script src="http://danzarrella.com/tb.js"></script>

This will add Tweetbacks with the appropriate title just above the "Links to this post" section of your layout.

 

Note: you must configure "Backlinks" to "Show" in the Settings>Comments section of your dashboard to enable this method to work.

Add TwitPic Updates to your Sidebar

TwitPic enables us to share images to Twitter, which can be posted by phone, using the TwitPic API or directly from the TwitPic site.



I've developed a gadget which you can use to display your recent TwitPic updates in your Blogger layout which is easy to install and can be configured to your needs:

Use this link to add TwitPic Updates to your Blogger blog.

Add "Real Time" Twitter Updates

Being a fast, virtually instantaneous stream of updates on any given subject, many of us like to keep up with references, news and re-tweets in real-time, rather than having to update or revisit Twitter search at periodic intervals.



Here are two highly useful gadgets for blogger which can be used to display real-time updates in your actual blog layout:

Twitter Search

Developed by 32Hours.com, this gadget offers a stream of updates for a given search term, hash tag or username.



Simply add the gadget to your blog and change the terms for search after installation (your readers can use this too!):

Visit this page on 32Hours.com to learn more about this gadget and install in your Blogger layout.

Juitter Gadget - real time updates with configurable search terms

Based on the excellent Juitter JQuery plugin by Rodrigo Fante, this gadget enables real-time Twitter updates based on the search terms you specify on installation. You can choose to display tweetbacks referencing your Twitter username, a particular search term and even combinations of terms:

This gadget does not contain ads or added links, and can be configured to display exactly as you want.



Click here to add this Juitter gadget to your blog.

Have I missed anything out?

I hope I've provided a good round-up of Twitter tools which you can use to "Twitterize" your Blogger powered blog. If you feel I've missed out any Blogger-enabled tools, please feel free to let me know about these in the comments below.