Follow Button | Twitter Developers

05/04/12

developers
Home Document at ion

Search

API Health

Blog

Discussions

Documentation

Sign in

T weet

Follow Button
Updated on Wed, 2012-02-01 15:30 By using t he Follow But t on, you agree t o t he Developer Rules of t he Road.

Overview
The Follow Button is a small widget which allows users to easily follow a Twitter account from any webpage. The Follow Button uses the same implementation model as the Tweet Button, and its integration is just as simple.

This documentation page is for developers and users who wish to build their own Follow Buttons. If you are looking for a quick way to build a Follow Button for your website, you can visit our Follow Button Configuration Page .

User Int eract ion

User interaction flow
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.

Detect user interaction

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

Add t he Follow But t on t o your Websit e

There are two ways you can add the Follow Button to your webpage.

Using Javascript
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): 1. <a href="https://twitter.com/twitterapi" class="twitter-follow-button"
data-show-count="false" data-lang="en">Follow @twitterapi</a>
https://dev.twitter.com/docs/follow-button 1/5

Follow Button | Twitter Developers

05/04/12

2. <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" wjs");</script>

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.

Configure your Follow But t on

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: Javascript (link data-attribute) User t o f ollow Followers count display Language Widt h Alignment Show Screen Name Size (in the anchor URL) data-show-count data-lang data-width data-align data-show-screen-name data-size

Followers count display

By default, the User's followers count is not displayed with the Follow Button. You can enable the display of this number using the data-show-count attribute: data-show-count = true data-show-count = false (default)

Javascript Code Example: 1. <a href="https://twitter.com/twitterapi" class="twitter-follow-button"

data-show-count="false" data-lang="en">Follow @twitterapi</a>

2. <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" wjs");</script>

Button Size
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 1. <a href="https://twitter.com/twitter" class="twitter-follow-button" data-show-count="false"
data-lang="en" data-size="large">Follow @twitter</a>

2. <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" wjs");</script>

Language
https://dev.twitter.com/docs/follow-button 2/5

Follow Button | Twitter Developers

05/04/12

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: 1. <a href="https://twitter.com/twitterapi" class="twitter-follow-button"
data-lang="fr">Follow @twitterapi</a>

2. <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="http://platform.twitter.com/widgets.j wjs");</script>

Width and alignment

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): 1. <a href="https://twitter.com/twitterapi" class="twitter-follow-button" data-width="300px"
data-align="right">Follow @twitterapi</a>

2. <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="http://platform.twitter.com/widgets.j wjs");</script>

Show Screen Name

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: 1. <a href="https://twitter.com/twitter" class="twitter-follow-button" data-show-count="false"
data-show-screen-name="false" data-lang="en">Follow @Twitter</a>

2. <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" wjs");</script>

Using an IFRAME
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): 1. <iframe allowtransparency="true" frameborder="0" scrolling="no" 2. src="//platform.twitter.com/widgets/follow_button.html?screen_name=twitterapi" 3. style="width:300px; height:20px;"></iframe> Note that the screen_name parameter is required. IFRAME Code Example with language set to French: 1. <iframe allowtransparency="true" frameborder="0" scrolling="no" 2. src="//platform.twitter.com/widgets/follow_button.html?screen_name=twitterapi&lang=fr" 3. style="width:300px; height:20px;"></iframe>

Configure your iFrame Follow But t on

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: IFRAME (query string parameter) User t o f ollow Followers count display Language Size Widt h
https://dev.twitter.com/docs/follow-button

screen_name show_count lang Not Supported Not Supported

3/5

Follow Button | Twitter Developers

05/04/12

Widt h Alignment Show Screen Name

Not Supported Not Supported show_screen_name

Follow But t on FAQ

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?

Which browsers/platforms does the Follow Button support?

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

What are the dimensions of the Follow Button?

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.

How can I render the Follow Button in AJAX loaded content?

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

How can I load the Javascript Follow Button asynchronously?

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.

Is there a limit to the number of Follow buttons I can add per page?
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.

How can I use the Follow Button only and display the user' s screen_name myself?
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.

What happens if twitter.com has an error or is over capacity?

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

https://dev.twitter.com/docs/follow-button

4/5

Follow Button | Twitter Developers

05/04/12

Button, the Following action wouldn't be triggered.

Does the Follow Button work over HTTPS?

Yes, the Follow Button works over HTTPS.

Tags
Twitter for Websites (24) Javascript (39) widgets (24)

Fo llo w @t wit t erapi

API Te rms

API Status

Blog

Dis cus s ions

Docume ntation

A Drupal community s ite s upporte d by Acquia

https://dev.twitter.com/docs/follow-button

5/5