How to Add the Official Twitter Follow Button to Your WordPress Site

Twitter recently introduced its official Follow Button, a piece of news that seemed to slip by much more quietly than its exciting predecessor, the Tweet Button. Maybe you’ve heard about the Follow Button but were not sure what it is or why you might want to use it. Here’s the deal:

The Follow Button is a small widget which allows users to easily follow a Twitter account from any webpage. The Follow Button uses the same implementation model as the Tweet Button, and its integration is just as simple.

The Follow Button saves your users a few clicks. Ordinarily, you might add a link to your Twitter page, where a user would be directed away from your website and would then need to click follow once they get to Twitter. The new Follow Button lets them click “follow” directly on your website, thereby increasing your Twitter following by making it more convenient. The other benefit is that the user stays on your website, instead of disengaging from your content.

Option 1. Get the code from Twitter and paste it into your site.

You can generate your own Follow Button by visiting: http://twitter.com/about/resources/followbutton

The code you get will look something like this:

1
2
<a class="twitter-follow-button" href="http://twitter.com/wpmuorg" data-show-count="false">Follow @wpmuorg</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

However, if you already have the Tweet Button implemented on your site, you won’t need the JavaScript portion. You can simply paste the first line into your site:

1
<a class="twitter-follow-button" href="http://twitter.com/wpmuorg" data-show-count="false">Follow @wpmuorg</a>

Where do I paste the code?

This is entirely up to you. The easiest way is to paste it into a text widget so that it will appear in your sidebar or footer. Another option is to add it to one of your theme’s template files – ie. single.php. You can add it after the loop so that it appears after every blog post.

You can also use the button directly within a WordPress post or page. Simply paste the code into your post editor within content whenever you want to request that people follow you, ie:


You can test the example above to see how it behaves and to make sure you’re up to date on all the latest WordPress news. ;)

Option 2: Use a plugin to add the Follow Button.

You really shouldn’t require a plugin for this, but maybe you just have no idea where to copy and paste the code. No problem, you have a few options to choose from:
Twitter Follow Button Widget is a plugin that gives you the same options that you would have when creating the button on the official Twitter site. Simply input your Twitter info in the widget’s options and click save.

The Twitter Badge Widget was created to display tweets from specific users. The plugin’s developer recently updated it to give the option of displaying the official Follow Button within the badge as well. The handy thing about this plugin is that users, urls and hashtags are all linked from the tweets.

If you want to have the option of using the Follow Button with a shortcode, try the Twitter Follow Button Shortcode and Widget. You’ll have the ability to pop a follow button into any of your posts by adding a shortcode similar to this:

1
[followbutton username='twitter' count='true' lang='en' theme='light'] [followbutton username='yourusername']

As you can see, implementing the Twitter Follow Button on your website is the easiest thing in the world. There’s no excuse not to, as it provides a more dynamic and smooth experience for users who want to follow you and keep interacting with your website. Grab one of these simple solutions and update your site today.

Tags

Comments (8)

  1. you (and others) say: You can add it after the loop so that it appears after every blog post.

    “after the loop” – but what/where is that exactly?? Nobody bothers to clarify that.

    Thanks,
    Newbie

  2. Dear Sarah,

    My developer already added a cute twitter button on the site so I did as instructed without the script but then it came out as separate and not emerged with the cute twitter picture.. How do I emerge the two into one?

Participate