Follow Button

The user interaction flow for the Follow Button was designed to be as streamlined as possible and easy to use for developers, website owners and users. There are two simple Follow Button flows, depending on the user's current state:

• Signed in to twitter.com: When clicking the Follow Button, the user will instantly be following the target user.
• Not signed in to twitter.com: This will open the Intent box and prompt the user to sign in to twitter.com.

You can easily detect user's interactions with your Follow Button using our Web Intents Javascript Events.

The easiest and recommended way to add a Follow Button to your website is to use Javascript. With this method, you can configure the Follow Button using the data attributes (check the Configure section of this page for more info and examples):

Notice how the anchor element has a class of twitter-follow-button. This is required for the Follow Button Javascript to know which anchor elements to convert to buttons. Also note that you specify the user to follow with the profile URL you're linking to (https://twitter.com/twitterapi in this example). That way, the button will still link to the User profile if Javascript is not enabled.

By the way, if you're already using the Tweet Button on the same page, you won't need to re-import the Javascript and your implementation will be as simple as adding the first line of HTML.

There are several properties which allow you to configure the Follow Button behavior and display. The way to modify default properties depends on your Follow Button implementation. Use link data-attributes for the Javascript version:

The size of the button can render in either "medium", which is the default size, or in "large" - which is the larger button. An example of what the button if size is set to large is below.

data-size = size

Javascript Code Example for the Large Follow Button

<a href="https://twitter.com/twitter" class="twitter-follow-button" data-show-count="false" data-lang="en" data-size="large">Follow @twitter</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

The Follow Button is available in English (en), French (fr), German (de), Italian (it), Spanish (es), Korean (ko) and Japanese (ja). To specify the language for the Follow Button, use the lang property and set it to the two letter ISO-639-1 language code.

Javascript Code Example with language set to French:

You can specify the width and the alignment of the Follow Button using the data-width (in pixels or percentage) and data-align (left or right) parameters. Note this is only supported on the Javascript version.

Javascript Code Example (not supported on the IFRAME version):

The user's screen name shows up by default, but you can opt not to show the screen name in the button. You can do this by using the data-show-screen-name" attribute.

Javascript Code Example:

If you prefer, you can implement the Follow Button using an IFRAME, which is actually what our Javascript implementation invokes. When using this method, you must use query string parameters for the //platform.twitter.com/widgets/follow_button.html URL to configure the Follow Button's behavior (check the Configure section of this page for more info and examples):

Note that the screen_name parameter is required.

IFRAME Code Example with language set to French:

Twitter buttons on your site can help us tailor content and suggestions for Twitter users. If you want to opt-out of this feature, set the optional data-dnt parameter to be true. Learn more about tailoring Twitter.

Follow @twitterapi

There are several properties which allow you to configure the Follow Button behavior and display. The way to modify default properties depends on your Follow Button implementation. Use query string parameters for the IFRAME version:

• Which browsers/platforms does the Follow Button support?
• What are the dimensions of the Follow Button?
• How can I render the Follow Button in AJAX loaded content?
• How can I load the Javascript Follow Button asynchronously?
• Is there a limit to the number of Follow buttons I can add per page?
• How can I use the Follow Button only and display the user's screen_name myself?
• What happens if twitter.com has an error or is over capacity?
• Does the Follow Button work over HTTPS?

The Follow Button has been tested for support with the most popular browsers. Browsers which do not support the required javascript features will still function but will only see a default hyperlink. Browsers which have been tested and fully support the Follow Button are:

• Firefox 3, 4
• Chrome
• Safari 4, 5
• Opera 10
• Internet Explorer 6, 7, 8, 9
• Mobile Safari for iPhone/iPad
• Android
• Palm Pre
• Opera Mini

The Follow Button is 20 pixel high. Its width will vary depending on the language you're using, the user screen_name length, and so on… We recommend you make room for the screen_name value, and show_count value if you choose to display it.

Note if you use the JavaScript version of the Follow Button, you can specify the width using the data-width parameter. If you're using the IFRAME version, you can use the style property.

The easiest way to render the button after the DOM has loaded is to use the IFRAME version.

By default, the Follow Button now renders in a non-blocking way (after the rest of the page has loaded). All sample code in this document illustrates how to load the Follow Button asynchronously.

If the number of Follow Buttons on a same page gets overwhelming (i.e. user directory listing) we recommend that you switch to the Follow and Mini-Profile Intent.

The user's screen_name must always be displayed either next to the Follow Button, or within the Follow Button itself. Just like the show_count parameter controls the display of followers count, the show_screen_name parameter controls the display of the user screen_name. Note that if you decide to set the show_screen_name parameter to false, you'll still have to display “manually” which @username the Follow Button is interacting with. In other words, it has to be very clear who the user is going to follow by clicking your Follow Button.

Just like the Tweet Button, the Follow Button is hosted on a high performance content distribution network and is kept separate from twitter.com. This means if twitter.com goes down, your site will not be affected and the button will still display. What could happen in the worst case is when a user presses the Follow Button, the “Following” action wouldn't be triggered.

Yes, the Follow Button works over HTTPS.