How to add a twitter follow button to your WordPress website

By | February 25, 2015

If you’re trying to grow your Twitter following, you should make it easy for your website visitors to follow you. A good way to do that, is by adding a follow button to your website. Here’s how to do just that.

If you’d rather watch than read:

For more detailed instructions and extra tips, read the rest of this article.

Making the Twitter follow button

Go to https://about.twitter.com/resources/buttons. On this page you can generate buttons you can add to your WordPress website.

On this page you’ll see four different buttons you can add to your website. Choose the second one; the follow button.

How-to-add-a-Twitter-follow-button-to-your-WordPress-Website

Button options

On the left, you have a couple of button options to choose from. On the right, you’ll find the code to implement the button to your website with the current options, with a preview of what it’ll look like.

How-to-add-a-Twitter-follow-button-to-your-WordPress-Website-button-options

User: If you’re logged in to Twitter, your twitter handle is automatically filled in. If not, fill out your twitter handle. Your Twitter handle is just the part after the ‘@’. For example, mine is just ‘IMstartpage’.

Show username: By default, this box is checked, and your button will have your username on it. In my example, that means it shows ‘Follow @IMstartpage’. Because most of the other social buttons don’t have your name on it, I like to use the button without my username, so the button looks the best next to my other social buttons.

Twitter-follow-button-with-username-and-withoud

Button with username, and without username.

Normal and large button: By default, the normal sized button is used. If you want to use a larger button, check the checkbox in front of the text ‘Large button’. It’s not clearly stated anywhere, but the normal sized button is 20 pixels, and the large one is 28 pixels. Since all other social follow buttons have a 20 pixels option, I use the small button.

Twitter-follow-buttons-normal-and-large

Normal and large follow buttons

 Opt-out of tailoring Twitter: By default, this is unchecked, so Twitter tailoring is on. When tailoring is on, the code in your twitter button tracks the visitors to your website, and Twitter might then go on to suggest the visitors to follow you later.

This means that, for instance, your account might show up in the ‘Who to follow’ box that is shown in the top right on twitter:

Twitter-button-twitter-tailoring-who-to-follow

If you want to maximize your amount of followers, leave this checkbox unchecked.

Language: By default, this is on ‘Automatic’, which means the language on the button changes depending on the location of the visitor to your site. If you only want it to show up in one language, click on the drop-down menu, and select your language of choice.

Adding the button to your WordPress website

Copy your Twitter follow button code.

Twitter-follow-button-copy-code

You can place the twitter follow button anywhere on your site, as long as it allows you to add HTML. In my example, I’m going to add the Twitter follow button to the sidebar.

In WordPress, click ‘Appearance’, then ‘Customize’. You can add HTML code to a ‘Text’ widget.

Paste the code to the text box, and click ‘Save & Publish’.

Add-Twitter-follow-button-to-WordPress-sidebar

Done! In my case, the result looks like this:

Add-Twitter-follow-button-to-WordPress-sidebar-result

Hidden option – show Twitter follower count!

If you want to show the current amount of followers next to your follow button, you can do so by making a manual edit to the code. By default, your code disables the follower count, with data-show-count=”false“. Simply change this part of the code to data-show-count=”true“.

Full code example with activated follower count:

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<a href="https://twitter.com/IMstartpage" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false">Follow @IMstartpage</a>

Links

Get the button code https://about.twitter.com/resources/buttons

Other social buttons:
How to add a Facebook Page like button to your WordPress website
How to add a Google Plus follow button to WordPress

One thought on “How to add a twitter follow button to your WordPress website

Leave a Reply

Your email address will not be published. Required fields are marked *

*