I Design + Develop + Support WordPress websites

How to: Add the new Twitter follow button to WordPress

Twitter just came out with what I would describe as their version of the Facebook “like” button. It lets you add a button that your site visitors can push to follow your twitter account without ever leaving your site. To get this button onto your WordPress website, all you have to do is paste the following code where you’d like the button to appear:

<a href="http://twitter.com/terranb" class="twitter-follow-button">Follow @TerranB</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

This will give you a button that looks like this:

This will display a styled twitter follow button if you’re not following me, or a checkmark and the word “following” if you are followed by my twitter name. Go ahead and try it!

A couple of things to note

  1. You will of course want to change any reference to “TerranB” to your own twitter name
  2. If you’re adding this to the content area of your post make sure to paste it while in the HTML, not the Visual editor
  3. If you want to put the button in a widget area, just use a text widget

Advanced configuration

For those of you who are never satisfied with the “out of the box” styling and formatting twitter offers a number of custom configuration options for their new follow button.

Hide your follower count

By default the number of followers you have will be shown. To remove this add data-show-count=”false” to the link like so:

<a href="http://twitter.com/terranb" class="twitter-follow-button" data-show-count="false">Follow @TerranB</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
You’ll end up with a button like this:

Button, Text, and Follower Count Colors

You can also change the colors of the the follow button, the link to your twitter profile, and the follower count text by adding data-button=”color” (blue or grey), data-link-color=”hex code”, and data-text-color=”hex code” to the link respecitively. All together it would be something like this:

<a href="http://twitter.com/terranb" class="twitter-follow-button" data-button="grey" data-link-color="00FF00" data-text-color="FF0000">Follow @TerranB</a> 
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
This would get you a button that looks like this:

Other customizations

There are a number of other customizations available including the language used, alignment of the button, and Whether or not to display the user name with the button. It’s important to note that Twitter is very explicit in saying that it must be very clear what user the visitor will be following if they click the button, so if you choose to remove your username, you’ll have to display it yourself manually, so you should really only do this if you you’re unable to your username how you want with the Twitter supplied code. You can find out how to do all this, and anything else you want to know about the twitter follow button here

Won’t work on WordPress.com

Unfortunately for those of you using blogs hosted at wordpress.com, this code won’t work for because wordpress doesn’t allow the use of javascript citing security concerns.

If you’d like some help switching over to a self host WordPress website, just shoot me an email!

Will you use the Follow Button?

So what do you think? Are you going to use the new Twitter follow button on your WordPress site? Or are you going to stick with “old fashioned” links and the classic “t” twitter icon? Why or why not?

Speak Your Mind