Adding a Tweet button to your Blog

This article is about Twitter's tweet-this button, and how you can use it to let your readers tweet your posts.

It's aimed at Google Blogger users, but most of it applies to other blogging (eg Wordpress, TypePad, etc) and website tools.

Background

Often bloggers want to give readers a tool to share the blog-post that they are reading via Twitter, on the readers own Twitter account.   I call this way of linking your blog to the social networking sites "Look what s/he said" (ref: Linking your Blog and the Social Networks).

Your readers could just copy-and-paste a hyperlink to your page, but it's clunky: they have to start up Twitter, themselves, and some won't know that Twitter automatically shortens links.

There are various 3rd-party widgets to put a "twitter-ish" icon on your blog, set up so that when a reader clicks it, the current page it is automatically tweeted.   But I've explained before why I don't like third party gadgets for Facebook, from both a security and maintainability point-of-view, and the same reasons apply to Twitter.

Google have social-media buttons which can be shown at the bottom of each post.   They're an improvement on the 3rd party gadgets, but I don't like the way they look, and the lack of options to customize them, so I usually turn off.

A better approach: Twitter's official Tweet button
Twitter now offer a share button on their resources page. (You don't need to be logged in to twitter - or even have a Twitter account yourself - to use it.)

This lets you customise the layout and (optionally) suggest two Twitter accounts that your readers might like to follow in future. You install HTML code provided anywhere in your blog (etc).

You can see an example of this gadget at the top and bottom of this article, in my custom social sharing bar.

Follow these steps install a Tweet button on your Blog as a gadget:

1 Go to the Twitter resources page.
(You don't have to be logged in to Twitter to do this - in fact, you don't even have to have a Twitter account.)

2 Select Tweet Button

3 Set the options you want. Currently there are separate (horiztontal) tabs for

Counter: none, horizontal or vertical.

Tweet-text: either the title of the page the gadget is on (by default) or some other text that you enter.

URL: The page that the button is on, or some other URL that you enter.
Important: If you want readers to tweet about individual posts, not your whole blog, then put some text that you will find and change later (eg FIX-UP-URL) here. See the section below about Twittering Posts vs your Whole Blog for more information about this.

Language: the language that the button is in on your website

4 Recommend people (Twitter accounts) to follow - if you enter a Twitter account here, then it will be suggested to readers who click on your gadget. You can suggest up to two accounts. If you are logged in to Twitter when you make this gadget, then your account will be automatically filled in here, but you can change it.

5 Preview your button (don't click anything, just check it out in the bottom left of the window - notice that it tells you the size, in pixels, of the button you've selected)

6 Copy the HTML from the box.

7 Go to Blogger, and add the HTML to your blog, using one of the standard options for adding externally-sourced HTML to your blog.

Except - if you chosen the post-specific-URL option in step 3, you must

Change: data-url='FIX-UP-URL' to expr:data-url='data:post.url'

and make sure you add the code to a post-specific place in your blog.

8 Save the change and the view your blog. Test the new gadget (does it look right, does the right thing happen when you click it).

Twittering a post vs your whole blog:

If you put a Tweet button into your own blog as a gadget, then what is shared is your whole blog, not the particular Post that is being read.

For example http://blogger-hints-and-tips.blogspot.com (this blog)

instead of http://blogger-hints-and-tips.blogspot.com/2010/04/tools-for-linking-blogger-and-social.html (a post)

But if you want your readers to tweet individual posts, you need the Tweet-button to appear with EVERY post. This is because some screens show multiple Posts, and unless the button is linked to a specific post it doesn't have a specific URL to share. Unfortunately it's true even if you have your blog set up so that only one Post shows at a time. It is a bit harder than adding it as a gadget, because you need to edit your template and put the code into a post specific location. This article explains the options for locations that are inside posts, and where to put the code.

What your readers see

When a reader clicks the NUMBER in your Tweet gadget:

They are taken to a screen showing the results of searching for your post/blog in Twitter: if other people have Tweeted the same post, they will be able to see who tweeted it, and what replies were generated.

When a reader clicks the BUTTON in your Tweet gadget:

They'll be asked to log in to Twitter, unless they're already logged in.

Then they see a window where they can

see the shortened link and text that they're going to be sharing, and
change it, and
choose whether to follow the recommended Twitter account(s)

The shortened link is to either the page that they were viewing when they clicked the button, or another URL (if you chose Custom URL when you were setting up the gadget). The text is the title of the post, or some other text if you entered some when you were settin gup the gadget.

Both the text and the shortened-URL can be changed by the reader before they share the Tweet.