PHPMatters Help You Better Hosting Your PHP-based Sites
How to Add Twitter Follow Button to Your Website

How to Add Twitter Follow Button to Your Website

As Twitter is more and more popular among Internet users, many webmasters choose it as a promotional platform to market their websites. However, this method works out only when you have a large amount of Twitter followers, so the Follow Button needs to be put into use for follower base expansion.

Generally, if people are interested in your account and want to follow you, they need to go for your Twitter page firstly and then click the follow option located at the right side of the page. With this exclusive Twitter button integrated to your website, however, people can follow your account easily with a simple click only, without the need to go for Twitter official site.

To help you understand how to add Twitter Follow Button to you website, we have come out a step by step tutorial in the following.

Get Follow Button Coding

The first step in adding Twitter Follow Button is to get the JavaScript code generated by Twitter development system. Note that each code is exclusively for one account.

To get the code, you need to sign in your Twitter account and the go for this page. This allows you to be the target user of the button, without the possibility to be mixed out with anyone else. After that, you can see a button option as the image showed in below.

button option page

  • The user option requires you to enter your website name behind the @ symbol.
  • Check the boxes before the three choices based on your real needs and preferences.
  • The language option allows you to choose the language as you wish.

You can see a preview section in the right side, along with the needed coding stuff that needs to be copied and pasted into your website.

Customize the Coding

button exampleOne 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 you want to display the count, and the false property means 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 tailoring of your content. You can check the coding stuff from this page.

Paste the Coding to Website

Generally, the button can be placed at anywhere you want within the website. According to our researches, however, the best placement is the sidebar located at either the right hand or the left hand. Instead of configuring the theme file which may cause some errors, we highly suggest you to create the new widget carrying the code.

Simply assume that you set up your site using WordPress. Thus, you need to go to WordPress dashboard < Appearance < Widgets. Then, you can drag the Text widget that can contain the text and HTML, and draw it to the sidebar section that is at the right hand. Note that you can decide the placement as you want by locating the new widget below any tab within the sidebar. new widget

Upon creation, simply paste the code into the empty space and click the save button.

In fact, this is simply the first class of our Twitter series introducing you the most useful methods of how to make use of this platform to better promote your website. More information can be found from the social networking page.