Adding the Official Tweet button to Blogspot (Blogger)

The Tweet button is now a necessity if you want to connect with the social network. There is a post on jeffbullas.com that shows the relative merits of shares to Facebook versus Twitter shares.
So I wanted this button but a quick browse of Google I found an outdated button from tweetmeme who themselves recommend the Twitter button. To be absolutely honest I found it odd to generate the required text. Anyway this is what you need to do

1. Go to your dashboard and under Design click Edit HTML
2. Click the Expand Widget Templates
3. Search for <div class='post-header-line-1'/>
4. Under this insert the following code

<div style='float:right;padding:4px;'>
<a class='twitter-share-button' data-lang='en' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>

The most important part is the expr:data-url='data:post.url' especially the expr:data. I have noted some snippets leave this out and I don't know how they work as the xml processor engine won't produce a value without the expr: in front of the data-url. Also without data-url all you'll get is the main blog URL and you really want the specific URL of the post. Well, I think so anyway.

6. Save your template and view the blog. You should see the tweet button appear as if by magic.

There are other attributes that are listed on the Twitter Developer page that may be of some use but I haven't looked that closely at it.

I admit this is a quick hack and that the javascript is something but without it all I get is a "Tweet" link. I'm going to try other snippets that I find and see if it is absolutely necessary. Sorry I lost the page that I originally got the code from.