How to Display Official Follow Button on Your WordPress Website

The Follow Button is a small widget which allows people to easily follow a Twitter account from whatever they are. The Follow Button is extremely simple to integrate.

In today’s article, I going to show you how do that step by step without the help of any plugin or third party tool.

 

First Step. Twitter Publish

Visit official Twitter Publish webpage. Scroll to the “Or browse your options” section right below the seach section. Choose Twitter Buttons.

Visit Twitter Publish website

In the opened dialog box, choose the type of button you want to add. I’m choosing “Follow” button.

Choose button type

Type your Twitter “@handle” in the field of the opened popup form.

Type your twitter handle

Click a blue Preview button to see your Follow button.

Twitter Follow Button code to paste

The code you see below:

<a href="https://twitter.com/alex_vitori?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">
Follow @alex_vitori
</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

would render in this button:

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

At this moment you have two options:

  1. Copy the code and implement it on your website, thus you need to click the “Copy Code” button.
  2. Dive inside “Customization options” to fine-tune your Twitter Follow Button.

Since we are already on the Twitter Publish website, let’s take a look at the options Twitter offers us to change and improve the appearance and functionality of the official Twitter Follow Button.

Second Step. Customize Your Twitter Follow Button

In order to make up your button, you need to click on “set customization options”:

Twitter Follow Customization options

Next, you are able to change three parameters:

  1. Hide/Show your Twitter handle (username):
    Hide twitter button username
  2. Make your Twitter Follow Button large:
    Make your twitter button large
  3. Change the language of the word “Follow” :
    Twitter Button change Language

Click the Update button to apply the changes and copy the code of your button. Twitter saves all the Customization Options via HTML data attributes. This is how the large button without Username would look like in your code:

<a href="https://twitter.com/alex_vitori?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-size="large" data-show-screen-name="false" data-show-count="false">Follow @alex_vitori</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Third Step. Add the Twitter code to the site

This the last and simplest step of our tutorial. You can add the code wherever you want on you site, just paste it inside “Text” portion of your Visual Editor. In the example below, I am using Text Widget to display the button.

Text Widget

As you can see, implementing the Twitter Follow Button on your website is no-brainer. 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.

Leave a Reply

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

join our newsletter

Subscribe to the weekly newsletter: