Get Qi Theme with 150 superbly designed WordPress demos

Get Qi Theme
Qi Theme
Sign up for our newsletter and be the first to get all the latest Qode news and updates.
BACK TO TOP

How to Add the Official Twitter Follow Button in WordPress

How to Add the Official Twitter Follow Button in WordPress

Visits are the bread and butter of any website, and, as if there was ever any doubt, social media are a good way of getting them. If you have an established presence on Twitter, chances are you keep your followers updated with the latest developments on your website. But it goes both ways: you can convert a chance visitor to your website into a Twitter follower by installing a Twitter follow button on your WordPress website.

You might want to display your Twitter feed on your website, but that may clutter your layout. Of course, you could just add a link to your Twitter profile, but adding Twitter’s official button has a distinct advantage: people are used to seeing it and know it instantly. And using Twitter’s own tools makes installing a follow button even easier than embedding your Facebook page feed.

But before we get into the nitty-gritty, let us take some time to discuss why you should open this avenue to your website visitors.

What Is the Official Twitter Follow Button

In the simplest of terms, the official Twitter follow button is a link towards a Twitter profile which is presented to the website user as a button.

It is rendered in Twitter’s trademark light blue (hex code #1da1f2) with the bird icon and the Twitter user name of a profile. You can obtain it easily for any profile, not just yours, using Twitter’s own tools.

You will have seen it around. It looks something like this:

Follow Button

Why You Should Add the Official Twitter Follow Button to Your Website

If you are an internet user of a certain age, you must have noticed how the internet has changed as of late. A lot of the features we took for granted in the early days: bulletin boards, forums, and chatrooms have all but died off, but have users stopped using the internet to have conversations? Not at all. They’ve migrated towards social media.

Social media are a great way of engaging with your visitors, users, subscribers or customers (whichever applies) in a faster and more direct way. These engagements make your activities more visible, leading to more visits to your website; that is, serving your website’s original purpose. And the easiest way to an interested follower on Twitter is to introduce the official Twitter follow button to your WordPress website – a chance visitor is likely interested in your content and will happily follow you on social media. Furthermore, using Twitter’s official button will make your own website look more trustworthy.

Qode Themes: Top Picks
Bridge New Banner
Bridge

Creative Multi-Purpose WordPress Theme

Stockholm WordPress Theme
Stockholm

A Genuinely Multi-Concept Theme

Startit WordPress Theme
Startit

Fresh Startup Business Theme

How to Add the Official Twitter Follow Button in WordPress

As we are about to show you, adding the official Twitter button is quick and easy, and doesn’t require you to do any coding or even install a plugin. What you do need to do is get your button code from Twitter’s publishing tools website.

This tool will let you use a great deal of Twitter content on your website, but we are interested in the follow button. We will enter our Twitter URL, https://twitter.com/QodeInteractive, into the field and hit enter. You can, of course, use any account URL you wish to get the follow button for.

Insert Link

Next, click on Twitter Buttons to open additional options.

Twitter Buttons

Finally, the button you need is the Follow Button, so click that.

Follow Button Twitter

And, in just a few clicks, you have the HTML code for the button you need. Click Copy Code to copy it.

Copy Code

The next thing you need to do is introduce this code to your website. This piece of HTML can be used anywhere on your website. We will show you how to introduce this button as part of a post, but you can use it as the main part of an HTML widget, Gutenberg block or Elementor element wherever you like.

We have started by creating a simple text post and populating it with some randomly generated text. In order to add a button to this page, we will first add an HTML block. Simply click the plus sign and select a Custom HTML block from the menu. If you are using Elementor, you need to use the HTML element, while for a Classic editor user, all you need to do is paste your code wherever you want it while editing your website in HTML view.

Add HTML Block

Next, paste the code for the button into the block’s field. We will also add paragraph tags <p> and </p> before and after the code to make it in line with the left margin of the text. You might or might not need to do this depending on the theme you are using.

Paste Code p tag

And there you have it, you have successfully embedded your official Twitter follow button.

Follow Button Preview

How to Customize the Official Twitter Follow Button

That only covers the basic version of the button. There are several things you may want to try if you want to make your button appear different.

First, let‘s take a look at the code of the button in your HTML block. You will find the data-show-count parameter is set to “false“. If you set it to true, you will show the number of current followers next to the button.

Show Count

This is what it will look like to the visitor.

Show Count Preview

But that is not all. Back on Twitter‘s publishing tools site, you will find the link on which you will be able to set customization options. Click it.

Customization

Here you will find a checkbox to Hide Username, which will only leave the Follow text on the button if checked and the Large Button checkbox which will present a larger version of the button.

Next down, you will find the language drop-down menu. You can use it to select the language in which the follow text is displayed.

Finally, there is the Opt-out of tailoring Twitter button. When checked, this button prevents Twitter from using your widgets to tailor the user experience of other users. For more details, you can check out Twitter‘s privacy guidelines.

In Conclusion

As you have seen, adding an official Twitter follow button to your WordPress website is quick and easy. If you are an active Twitter user, there is no reason not to connect your website and your Twitter profile, and engage with your website visitors on social media. It is a valuable step towards building your social following and your website at the same time.

Post your comment

Comments0