14 August 2010

Tweet Button for Blogger with Analytics tags

After Twitter starting moving more and more into the territory of third-party clients, by offering official mobile apps and an URL shortener, I guess an official “Tweet” button was the next logical move. Especially since Facebook has a similar feature with the ‘Like’ button. Aside from the cleaner look – in my opinion anyway –, the Tweet button comes with some nice extras. It can be installed as an iFrame or a simple link without using JavaScript.

Introducing the Tweet Button! Learn how to use Twitter's Tweet Button and add it to your website

Another advantage is the better customizability compared to TweetMeme, going as far as personalized styling to match your site. You can choose the text to appear in the tweet, @-mention yourself and recommend another Twitter account to the visitor after he shares the link.

One thing I tried to do with TweetMeme, with little success, is to add Google Analytics tracking tags to the shared link, like you can do with the Google Buzz sharing button. The TweetMeme script would strip all the extra parameters in the URL after encountering a question mark, making the tags useless. You could use the stats from bit.ly for tracking – even with the official Tweet button –, but I think it’s more comfortable to have all the information in one place. With the Twitter button it is easy to customize the shared link by following the instructions from the supplemental documentation. Here is an example code for Blogger; replace the words in italics with your Twitter account(s) and Analytics tags:

<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<div> <a class='twitter-share-button'
data-count='horizontal'
data-related='EXDE601E:Twitter account'
data-via='EXDE601E'
expr:data-text='data:post.title'
expr:data-url='data:post.url + &quot;?utm_source=TweetButton&amp;utm_medium=Twitter&quot;'
href='http://twitter.com/share'>Tweet</a>
</div>

You might want to use different Twitter accounts for the related and via parameters; I don’t see it mentioned in the documentation, but in my experience, if you use the same account for both, the recommendation won’t show up after tweeting. Which does make some sense, because you already recommend that account by @-mentioning it in the tweet.

On the down side, with TweetMeme you could modify the code to generate hashtags from your Blogger labels, something that the Tweet button can’t do. Or at least I didn’t manage to get it working. The counter is also far less accurate that the one from TweetMeme and it gets worse as you go back further in time. Hopefully this will start to improve, as the two companies work together on the new DataSift project. Tweet Button vs TweetMeme counter

The list of disadvantages could go on, as you can see in this article. Probably the most worrying though remains the famously poor uptime of Twitter; it struck the button (and Firefox users) within a day of the launch. It remains Twitter’s biggest unsolved problem and it should be on the top priority list, next to improved search, it they want to sustain the growth and adoption of the network.

Update: After Blogger introduced redirection to country-specific domains, you should consider using canonical URLs in the Twitter share button code.

2 comments:

Bo's Coffee Digital Brewer said...

Hi there, where in the code is the Google Analytics ID? Or is it not necessary to put it in this snippet of code since it's already elsewhere on the page?

George B. Moga said...

Hi! If the Google Analytics script (which also includes the ID) is running on your site/blog, it's not necessary to add it again here.
Every time someone loads the URL with those custom parameters, the GA script runs and records the custom parameters in your statistics.

Post a Comment