What's WP
Find Everything Related to WordPress - Best Tutoriasl on WordPress!
How to Add a Twitter Follow Button in WordPress?

How to Add a Twitter Follow Button in WordPress?

This tutorial introduces the detailed steps on how to add a Twitter follow button in WordPress websites. At the end of article, readers can learn the method to combine WordPress with Twitter to promote them in a more effective way.

WordPress is the most famous blogging system and content management system welcomed by more than 60 million websites. Twitter is an online social networking and microblogging service that gains 500+ million registered users who post 340 million tweets per day. Both WordPress and Twitter are widely used by users. Why not combine them together to market interactively?

Frankly speaking, you can make it by adding a Twitter follow button in WordPress websites. Twitter follow button is a lightweight widget which can allow users to follow your Twitter account with a click on the button. Generally, you need to add a link to your Twitter page so that users can be directed to your Twitter profile, and click follow button to follow you. By adding a Follow button on your WordPress site, they can follow you directly within a click and learn more about you through the new window opened after the click. Thereby, this will increase the convenience and make you have more Twitter followers.

Add Twitter Follow Button to WordPress

Background Information

Twitter also never stops the steps to extend the functionalities. From the beginning, only official tweet button could be used. With the passage of time, however, you are given the possibility to add Twitter follow button. In fact, the implementation model of follow button is the same as that of the official tweet button. But the former one is much easier to integrate. This can be the best explanation of how Twitter continues to better at customer service.

Add a Twitter Follow Button in WordPress

In below, we carefully introduce the steps of adding a Twitter follow button in WordPress websites. The process is very easy to handle, and you can completely worry-free to follow it.

Generate A Follow Button Code

Go to the Twitter button page, choose a button as Follow and generate a code. Or, you can simply copy the below code.

<a href="http://twitter.com/whatswp" class="twitter-follow-button" data-show-count="true">Follow @WordPressHostingReview</a>

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

However, if you have implemented the Tweet button on your website already, you don’t need the JavaScript portion. You can just paste the first line into your website.

<a href="http://twitter.com/whatswp" class="twitter-follow-button" data-show-count="true">Follow @WordPressHostingReview</a>

Paste the Code Into WordPress Site

Actually, you can paste the code in your WordPress theme anywhere as you like. The easiest and most widely used way is to paste it into a widget so that it can appear in the sidebar or footer. You can make this easily. Log into WordPress dashboard, go to Appearance, select Widgets and add a text widget to your sidebar. At last, you need to paste the code above into it. Look at the screenshot as the following.

Add Twitter Follow Button

On the other hand, you can achieve this function by adding a plugin. Twitter Follow Button Widget is one of the plugins which help you create a Twitter follow button on your website. It comes along with an exclusive widget which only requires you to input your Twitter information and click on the save button. However, in our personal experience, it’s not necessary at all because thing are too simple. After all, too many installed plugins will add a burden to your website.

You are done if you don’t mind the button appearance. However, if you want to beautify it or customize it to match your website style, you can learn about the below part.

Customize the Coding

One of the greatest benefits of adding the button using the JavaScript is that you can make some modifications with the help of data attributes.

  • Follower Count Display – You can decide this aspect using the attribute of “data-show-count = ”. The true property means that you want to display the count, and the false property means that you want to hide it.
  • Size – The attribute deciding button size is “data-size = ”. Note that you can only choose between medium (the default option) and large.
  • Width – You can decide this based on your website design. The attribute is “data-width = ”.
  • Alignment – To decide this aspect, you can use the attribute of “data-align = ”.
  • User Name Display – By default, the Follow Button displays your user name or website name, but you can disable it using “data-show-screen-name = false”.

These are the most basic options for customizing the Follow Button. In fact, you can also decide whether to use an IFRAME or whether to display the function of Twitter tailored to your content. You can check the coding stuff from the Twitter official webiste.


Joyce is a professional writer & SEOer who loves trying new things and sharing the experience through blogging. She loves clean design, playing with different WordPress themes, SEO, etc. Very often, you could find her in various WordPress event as invited speakers.