Hot on the heels of the TweetMeme Wordpress plugin, Scott has also done a Windows Live Writer Plugin for the TweetMeme Follow Button. Again, this works the same way as the Retweet Button. Wih this button there are a few options which are all clear and simple to use:

All in all, a job well done.

Download from Live Gallery as usual. Feedback as always to my twitter, @scottisafool.

NOTE: Please note, this plugin will not work if you try publishing to a site where javascript is stripped at publish time. Prime example, wordpress.com.

Thanks to Scott the TweetMeme button is now included as part of their Tweet This plugin for Wordpress.com users.

Wordpress.com blogs don’t let you submit any javascript, which means that Scott’s initial TweetMeme Plugin doesn’t work because the javascript is stripped. Well, he then found out that Wordpress have actually implemented a tag that can be put in a blog post, kind of like the Youtube tag. And just like the Youtube tag, he has created a plugin that works in the same way as the normal TweetMeme plugin, but just puts the Wordpress tag in. The options are pretty similar with some slight differences:

The plugin can be downloaded from Live Gallery. Feedback as always to Scott’s twitter account, @scottisafool.

Download here.

For more reading on this plugin please read Scott’s initial blog post on this topic.

There are currently a large number of users reporting issues with their retweet buttons, where on either all of their pages or some of their pages they are getting the message “URL points to wrong story”.

Please read and perform all the checks in this post before posting that you are experiencing this issue, as it is more often than not a configuration problem on a certain aspect of your site.

Diagnosis

All of the problems I have seen with this issue relate to canonical URLs.

Canonical URLs are usually used for SEO purposes. You can read more about canonical URLs courtesy of Google here.

The majority of problems are when the path section of the canonical URL is being either encoded incorrectly, lowercased, or all the canonical URLs point to one page.

Problem 1: All canonicals point to a single destination

For example, if you have all your canonical URLs set to point to your home page, when you try and tweet from any other page, it will fail. To resolve this, you should update your code or canonical URL plugin’s configuration so that it does not point all the canonical URLs on your site to your homepage. This will solve the “URL points to wrong story” error.

Problem 2: Canonical URL path case

A second example is a correctly encoded path may contain the character “%E2″ – often found in blog post titles when powered by WordPress. However, if you (or the plugin you are using to generate canonical URLs) is lowercasing the path, this will be transformed to “%e2″, which (by definition of the URL RFC) changes the address that the URL points to (paths in URLs are case sensitive). This will confuse the system we use to verify that the short URL in the post is valid, and will cause the “URL points to wrong story” error.

Problem 3: Canonical URL path encoding

A final example is that the path is being incorrectly encoded. For example, a page’s URL may have two query parameters, /?p=123&lang=en (which is a pretty common one). The problem arises when the path is encoded when it should not be, resulting in the canonical URL having an encoding such as this: “/?p=123&lang=en”. This is of course completely different to the page’s original URL, which will again confuse the short URL verifier and cause the “URL points to wrong story” error.

Solutions

If you are comfortable working with your canonical URLs, or you are building the canonical URLs yourself, you can solve this problem by checking that the canonical URL on the page exactly matches that of the page’s URL. If it does not, correct the generating script to ensure that it is encoded correctly.

If you are using a WordPress or similar plugin to generate your canonical URLs (a lot of so-called “SEO” plugins do this) then contact the creator of the plugin to ensure that their canonical URL generation code does not cause the canonical URL to differ from that of the page’s URL.

If you have performed all these actions and checked that your canonical URLs are working correctly, please post in this forum with a link to the exact page that you are having issues with – this allows us to quickly debug a large number of issues – and the name of any SEO-related plugins you are using.

1. What is the Follow Button?
2. I’m seeing a ? instead of my Twitter profile picture, what do I do?
3. How do I change the size of my button?

What is the Follow Button?

The Follow Button is a new and innovative way to provide a simple button to allow your readers to follow you on Twitter. The button includes the ability for your readers to see your reach or influence through Twitter Grader, your engagement through Twitalyzer and your growth through Twitter Counter.

I’m seeing a ? instead of my Twitter profile picture, what do I do?

This means that you haven’t set the source for your button, to set this you need to set your tweetmeme_screen_name. In the Wordpress Plugin this can be done through the TweetMeme/ Settings within admin. Or for the Javascript button you should replace tweetmeme_screen_name = ‘yourtwitterusername’; with your actual username where yourtwitterusername is found.

How do I change the size of my button?

For the standard button and the compact button the size is pre set and cannot be altered. However for the square button you can set the size using the tweetmeme_size = ‘50′; parameter within the Javascript button. In the Wordpress plugin you need to set the size in the TweetMeme/ Settings area within your admin panel.

Still not found the answer to your question? Try our Follow Button Forum.

For larger sites that are using multiple buttons per page we tend them to recommend that they use the IFrame version of the Follow Button.

The follow button can be optimised in the same way the standard tweet button can. This is achieved by not using the follow.js Javascript, but instead to use the iFrame directly.

<iframe src="http://api.tweetmeme.com/v2/follow.js?screen_name=dtsn&style=<type>" frameborder="0" height="<height>" width="<width>"></iframe>

The height and widths of the button for these iFrames are listed below please note that you do not need to define style for the normal button but you do need to define the height & width still:

*The square buttons height and widths should be set to the same as the parameters.

WordPress Plugin

The plugin provides 3 useful features, the biggest of which is the ability to replace the standard comment avatar with a follow button. We also add in a Wordpress sidebar widget and the ability to add the follow button to posts on a per-author basis. You can have the button configured in a variety or styles including our standard view, a compact view and a square view. You need to configure your user details within our settings panel for users to be able to follow you, details on how to do this can be found in our TweetMeme/Settings area within your admin panel.

The Button Options

Normal:

Compact:

Square:

Popup

When you click on the follow button you will get the following popup shown once you are logged in via Twitter OAuth

Settings

Please remember to set your follow button up so that it works as you want it to.

And also remember to include the SideBar Widget!

Download

Please download the Follow Button from the Wordpress Plugin Directory!

Installation

1. Upload the TweetMeme directory to the /wp-content/plugins/ directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. Go to Settings/TweetMeme to configure the button

If you get stuck one of our community, @bluejeansva has created a really good little video to guide you through the process starting with the ReTweet button and going on to the Follow Button.

For some common questions, take a look at our FAQ

The Follow button is for website and blog publishers that want to encourage their audience to follow them on twitter. This button provides the interface to see the follower count of a particular user and a button which upon pressing opens the follow pop-up providing a number of different views and statistics about the user from additional services such as Twitter Grader, Twitalyzer and Twitter Counter.

We have made our button really smart, with one simple piece of JavaScript we can give you the ability for your readers to follow you. Best of all it will work on any web page, anywhere!

If you are using Wordpress please use our WordPress Plugin.

The Code

The Standard Button

For the basic follow button please copy and paste the source code below into your site, remembering to replace yourtwitterusername with your actual twitter username.

<script type="text/javascript">
tweetmeme_screen_name = 'yourtwitterusername';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/follow.js"></script>

Changing the size of the button – Compact Button

The Compact Button

<script type="text/javascript">

tweetmeme_screen_name = 'yourtwitterusername';
tweetmeme_style = 'compact';
</script>

<script type="text/javascript" src="http://tweetmeme.com/i/scripts/follow.js"></script>

The Square Button

We also offer a square version of the TweetMeme Follow button, you also need to remember to include the size of the square in pixels to set the size of the square button. If you do not add a size this will default to 32px by 32px.

<script type="text/javascript">

tweetmeme_screen_name = 'yourtwitterusername';
tweetmeme_style = 'square';
tweetmeme_size = '50';
</script>

<script type="text/javascript" src="http://tweetmeme.com/i/scripts/follow.js"></script>

For some common questions, take a look at our FAQ

If you wish to have the Tweet that is generated by the Retweet Button to include space at the end you can set a variable which sets the minimum. The default for the Button is 19 characters (enough for RT @ and the longest Twitter name (15 characters) – you can adjust this down to 0 or up to 30 depending on how important more space for the Title (or hashtags) is too vs leaving room for users to retweet a Tweet.

If you are using our WordPress Plugin Space support is already included.

Below is an example of how you configure to set the Space.

<script type="text/javascript">
tweetmeme_url = '[YOUR URL]';
tweetmeme_space = '[NO OF CHARACTERS]';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

It is possible to automatically add hashtags to the end of the Tweet that the Retweet Button generates, this gives your story the potential to be picked up by people searching for that particular hashtag. You can add any number of Hashtags (comma separated) and the button will do its best to fit them in.

If you are using our WordPress Plugin you do not need to worry about this as it has full support for Hashtags.

Below is an example of how you configure to include Hashtags.

<script type="text/javascript">
tweetmeme_url = '[YOUR URL]';
tweetmeme_hashtags = '[TAGS COMMA SEPARATED]';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

A few other notes to take into consideration

• Hashtags can only take Alpha-numeric characters and _ or – all other characters will be automatically stripped
• You do not need to supply # – this will be added automatically
• The title of the story will be shortened if you supply too many Hashtags
• The Tweet will always stay within the 140 character limit (unless overridden)

WordPress.com has implemented a ‘shortcode‘ which allows you to very easily use our retweet button

To implement the button simply follow the steps below.

1. Write your post.
2. At the top of the post (or the position you prefer) insert the shortcode [tweetmeme]
3. Publish you post

Furthermore you can alter various settings of the button by extending the shortcode parameters.

If you prefer the compact version of the button you can switch the outlook using the style parameter “compact”.

Example: [tweetmeme style="compact"] – would produce a smaller size TweetMeme button.

You can define your twitter username that will be used in the Retweet message using the source parameter. If you don’t specify one, the default will be “@wordpressdotcom”.

Example: [tweetmeme source="wordpress"] – would produce a message like “RT @wordpress post title – http://shorturl” in Twitter

You can also define the url shortening service that should be used. By default the WordPress internal shortener http://wp.me is used to shorten your urls, but you can also pick any of the following services using the service parameter : ‘wp.me’, ‘bit.ly’, ‘awe.sm’, ‘cli.gs’, ‘digg.com’, ‘is.gd’, ‘tinyurl.com’, ‘tr.im’, ’su.pr’, ‘ow.ly’, ‘lopurls.us’, ‘twurl.nl’

Example: [tweetmeme service="tinyurl.com"] – would create a short url using the tinyurl.com service.

If you already created a short url for your post you can reuse this url providing the alias parameter.

Example: [tweetmeme alias="http://myshorturl.com/abc"] – would produce a message like “RT @tweetmeme post title – http://myshorturl.com/abc” in Twitter

In case you would like to change the style/positioning of the TweetMeme button via the Custom CSS Upgrade you can use the skip_style parameter to prevent additional style parameters to be added to the button. The TweetMeme button is embedded in a div with the css class “tweetmeme-button” and has the css id “tweetmeme-button-post-”.

By default the Button is also added to your RSS feed. If you would like to prevent the static button from showing up in your feeds add hide_in_rss=true as parameter to hide the button in your RSS feed. Please note : it can take a while until the rss feed is updated and your changes are reflected.

In order to keep your blog performance high and 3rd party requests low the buttons are shown only on the single page/post view. If you would like your TweetMeme button also to appear also in category pages or the front page you can use only_single=false as additional parameter to make a button appear not only in single page/post view.

Of course any of these parameters can be combined with each other.