Building A Better Tweet Button For Your Site Content

Andy Beard Posted by

Having criticized the new retweet or “tweet” button that Twitter have introduced, lets see if we can make it better.

This mainly covers WordPress – if you are on another platform, find a geek that uses it to try to do the equivalent, but I doubt this is possible on Blogger.

I should point out there are already implementations out in the wild that are significantly better in some ways, though might not meet all the goals of the Twitter developers.

As an example, in my comments on the last post one of the goals of the Twitter button was for it to work even with javascript switched off. Some existing sharing solutions use an empty anchor link href=”#” – from a SEO perspective that is better – for usability maybe not.

Here is some default code generated by the official Twitter button generator – the data-url is optional if you are using canonical tags and don’t have lots of buttons on the home page of a blog, or within archives – otherwise it is best to be specific.

1 <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://andybeard.eu/2902/7-reasons-not-to-use-the-new-tweet-buttons.html" data-text="7 Reasons Not To Use The New Tweet Buttons" data-count="vertical" data-via="AndyBeard" data-related="seodojo:SEO Training">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

We are going to try to solve a number of issues

Twitter decided to use “data” attributes that are in the HTML5 spec. On one project I am using data attributes with spans which are not in the spec.
What some share widget developers are using is an empty anchor link with no destination.

If Twitter wanted the link to function as well as a defined button if Javascript is turned off, they should have opted to use their implmentation which uses URL parameters.

In my last post criticising the tweet buttons, I have added some test implementations of what is discussed here. Test the 3rd one “With Nothing Defined” – that is a text link as implemented by Twitter, it doesn’t pick up the title.

I should also note that Google have used HTML5 data for their buttons by default, so they suck just as much.

This is their current static text link for sharing

http://twitter.com/share

It picks up the referring URL, but it doesn’t seem to pick up the page title as it is meant to when using a text link (it works with Javascript), and you would somehow need to work out defining rel=”me” in the header which is something I have never even heard of before.

Share This On Twitter

So that is the page you are sending “link love” or “Google Juice” to – a crappy form on a social network – this is going back to 2006 when I was first moaning about plugins doing this.

I was then compelled to make my own version of the Socialble plugin “Antisocial” as the original author refused to add nofollow, and eventually Yoast took the Sociable project over and one of the first official things he did was add nofollow to the links.

If they want the link, there needs to be some content of value on the page.

However we can do something about the link formatting to ensure it passes some useful data.

1 http://twitter.com/share?url=http://andybeard.eu/2902/7-reasons-not-to-use-the-new-tweet-buttons.html&text=7%20Reasons%20Not%20To%20Use%20The%20New%20Tweet%20Buttons&count=vertical&via=AndyBeard&related=seodojo:SEO%20Training

All those parameters have been added to the URL, which has a benefit with W3C validation & content syndication, and when someone clicks through to the form, it has the data filled out.

Whoopie!

Share This On Twitter Dojo Version

So lets take that link code and slap it into the original

1 <a href="http://twitter.com/share?url=http://andybeard.eu/2902/7-reasons-not-to-use-the-new-tweet-buttons.html&text=7%20Reasons%20Not%20To%20Use%20The%20New%20Tweet%20Buttons&count=vertical&via=AndyBeard&related=seodojo:SEO%20Training" class="twitter-share-button" rel="nofollow">You should Tweet This Post</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

I also added a nofollow to the link, but even then it still means Google could opt to take juice away from other links on the same page. Sucks doesn’t it.
However Twitter are also gaining nothing of value to them, and even without it they possibly wouldn’t because of how they messed up their Robots.txt

Part of me still wants to believe that Twitter added this Robots.txt just to block indexation of search results, and had no intention of holding my content to ransom by preventing Google crawling it.

http://twitter.com/robots.txt

#Google Search Engine Robot
User-agent: Googlebot
# Crawl-delay: 10 — Googlebot ignores crawl-delay ftl
Disallow: /*?
Disallow: /*/with_friends

#Yahoo! Search Engine Robot
User-Agent: Slurp
Crawl-delay: 1
Disallow: /*?
Disallow: /*/with_friends

#Microsoft Search Engine Robot
User-Agent: msnbot
Crawl-delay: 10
Disallow: /*?

Disallow: /*/with_friends

# Every bot that might possibly read and respect this file.
User-agent: *
Disallow: /*?
Disallow: /*/with_friends
Disallow: /oauth
Disallow: /1/oauth

The 4th line down blocks any URL which has a parameter in it. It is a side effect of messing it up or being greedy (or incompetent) – various SEOs would describe it different ways.

Sometimes Google allows blocked URLs to accumulate PageRank – sometimes they don’t – in a case where that PageRank might end up somewhere that isn’t a benefit to Google depending on how they handle their “reset vector”, they may discount the juice.

I don’t know the order Google process the link graph – it is quite possible there would be a difference between linking to a page blocked with robots.txt, and linking to the same page using nofollow – that difference could be for both sites – Google has no intention of enlightening us on this.

This is especially so as the page has no unique or relevant content – the static text link does not display any of the information that is available from the widget, and neither does the connected page.

In my opinion the page should be merged with the search results for references to the URL – that would then be a worthwhile page to index especially if it also included all the threaded conversation.
There is no logical reason to have 2 actions from the same button – the destination page should have both the tweet form and the search.
If it was on a real permalink, that is something of value to be indexed.

I actually have no idea whether Twitter even care about SEO – the actions they take seem almost random – search other than on their own brand accounts for less than 2% of their web traffic according to Alexa.

The Javascript

The Next Web have posted some async javascript code. It makes sense to use it, but as you should have the javascript for the Twitter widgets loading at the bottom of all your pages, it doesn’t really make a huge amount of difference.

At this time Twitter are loading the javascript from a CDN, so it shouldn’t be affected by fail whale.
If Akamai dies, you might as well stop browsing as half the internet will die with it.

01 <script type="text/javascript">
02 //async script, twitter button fashiolista.com style
03 (function() {
04 var s = document.createElement('SCRIPT');
05 var c = document.getElementsByTagName('script')[0];
06 s.type = 'text/javascript';
07 s.async = true;
08 s.src = 'http://platform.twitter.com/widgets.js';
09 c.parentNode.insertBefore(s, c);
10 })();
11 </script >

If you have this code in the footer of every page, then all you need to load a button is a static link, or one created using PHP if you are using WordPress.

I am not going to create a whole WordPress plugin here… so how about a quick WordPress shortcode.

There are tons of Tweet Button plugins appearing, but I haven’t seen any that do a decent link implementation which is essential for a shortcode – after all blog posts get syndicated… and javascript generally gets stripped out.

01 <?php
02 // Usage tweet rel="scobleizer:Tech Geek" or tweet rel="mashable:Tech Blog"
03 function mytweet($atts) {
04 extract(shortcode_atts(array(
05         "rel" => 'seodojo:SEO Training'
06     ), $atts));
07 $via = "AndyBeard";
08 $url = urlencode(get_permalink());
09 // Different Themes & Plugins implement titles in different ways - find a way to code this that works for you
10 $tweettitle = urlencode(the_title("", "", false));
11 $related = urlencode($atts['rel']); // this should maybe be defined in some custom meta
12  
13 $code = '<a href="http://twitter.com/share?url=' . $url . '&text=' . $tweettitle . '&count=vertical&via=' . $via . '&related=' . $related . '" class="twitter-share-button" rel="nofollow">You should Tweet This Post</a>';
14 return $code;
15 }
16 add_shortcode("tweet", "mytweet");
17 ?>

To use this it would be something like

[tweet rel="seodojo:SEO training"]

That comes out like this

Really to be useful it should include a dynamic graphical image so when content gets syndicated there is some social proof with the link… but at least the link will now work when it is syndicated.

I still need to work out what data-counturl that I spotted on techcrunch is for. I am assuming that it can be used to set a canonical URL, while the URL used for each Tweet could be different (based on source, affiliate, membership status etc)

If you click this link, you will be taken to this same page, but residing at a slightly different URL. Tweetmeme makes a mess of URLs like this.
http://andybeard.eu/2907/better-twitter-tweet-button.html?mysource=12345

The new Twitter buttons and Topsy seem to get it right on the landing pages, I need to do more testing on tweeted URLs.

Originally published at andybeard.eu

About the Author: Andy Beard - Niche Marketing - Blog search engine perfomance, Wordpress and general niche and affiliate marketing tips.