Follow Button

The Follow button is a small button displayed on your websites to help users easily follow a Twitter account. A Follow button consists of two parts: a link to a follow web intent page on Twitter.com and Twitter’s widgets JavaScript to enhance the link with Twitter’s official and easily recognizable Follow button.

The Follow button generator is a simple, form-based approach to generate HTML markup you may copy-and-paste into your website template.

User interaction flow

Selecting the Follow button will pop open a new child window displaying a follow action alongside a profile summary and a few recent Tweets from the account.

The viewer may click on the follow action displayed alongside the profile summary to follow Tweets from the specified account.

A follow event is triggered on your webpage after a Twitter user follows the specified result in the child window.

Logged out flow

A viewer not logged in to Twitter will be prompted to log in to follow the account. A follow action will be triggered as part of the login flow of the follow intent.

How to add a Follow button to your website

1. Create a new anchor element with a twitter-follow-button class to allow Twitter’s widgets JavaScript to discover the element and enhance the link into a Follow button. Set a href attribute value of a Twitter profile URL.

<a class="twitter-follow-button"
  href="https://twitter.com/TwitterDev">
Follow @TwitterDev</a>

2. Customize Follow button parameters using data-* attributes.

<a class="twitter-follow-button"
  href="https://twitter.com/TwitterDev"
  data-size="large">
Follow @TwitterDev</a>

3. Asynchronously load Twitter’s widgets JavaScript using our loading snippet. The JavaScript snippet will check for an existing version of Twitter’s widgets JavaScript on the current page, initialize a function queue to be executed once the widgets JavaScript has loaded, and load the widgets JavaScript asynchronously from Twitter’s CDN.

Button customization

Hide followers count

Hide the number of Twitter accounts following the specified account by setting a data-show-count attribute value of false.

Hide Twitter username

Hide the username from the displayed Follow button by setting a data-show-screen-name attribute value of false.

Display a large button

Add a data-size attribute value of large to display a larger Follow button.