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 Interaction
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 the Follow Button to your Website
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):
<a href="https://twitter.com/twitterapi" class="twitter-follow-button">Follow @twitterapi</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></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.
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 http://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):
<iframe allowtransparency="true" frameborder="0" scrolling="no"
src="http://platform.twitter.com/widgets/follow_button.html?screen_name=twitterapi"
style="width:300px; height:20px;"></iframe>
Note that the screen_name parameter is required.
Configure your Follow Button
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, and query string parameters for the IFRAME one:
| Javascript (link data-attribute) | IFRAME (query string parameter) | |
|---|---|---|
| User to follow | (in the anchor URL) | screen_name |
| Followers count display | data-show-count | show_count |
| Button color | data-button | button |
| Text color | data-text-color | text_color |
| Link color | data-link-color | link_color |
| Language | data-lang | lang |
| Width | data-width | N/A |
| Alignment | data-align | N/A |
Followers count display
By default, the User's followers count is displayed with the Follow Button. You can hide this number using the show_count property:
| show_count = true (default) |  |
| show_count = false |  |
Javascript Code Example:
<a href="https://twitter.com/twitterapi" class="twitter-follow-button" data-show-count="false">Follow @twitterapi</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
IFRAME Code Example:
<iframe allowtransparency="true" frameborder="0" scrolling="no"
src="http://platform.twitter.com/widgets/follow_button.html?screen_name=twitterapi&show_count=false"
style="width:300px; height:20px;"></iframe>
Button, Text and Link colors
The Follow Button comes with two color schemes (blue and grey). You can use the button property to pick one or the other.
button = blue (default) |
|
button = grey |
 |
Note that using the grey button color scheme will automatically update the text and link colors to work well for a dark background (unless you explicitly define these using the parameters above).
Text color
You can specify your own HEX color code for the text color (Followers count and “Following state”). This is controlled by the text_color property:
text_color = 800080 |
 |
Link color
You can also specify your own HEX color code for the Username link color. This is controlled by the link_color property:
link_color = 800080 |
 |
Code examples
Javascript Code Example:
<a href="https://twitter.com/twitterapi" class="twitter-follow-button" data-button="grey" data-link-color="800080" data-text-color="800080">Follow @twitterapi</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
IFRAME Code Example:
<iframe allowtransparency="true" frameborder="0" scrolling="no"
src="http://platform.twitter.com/widgets/follow_button.html?screen_name=twitterapi&button=grey&link_color=800080&text_color=800080"
style="width:300px; height:20px;"></iframe>
Language
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:
<a href="https://twitter.com/twitterapi" class="twitter-follow-button" data-lang="fr">Follow @twitterapi</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
IFRAME Code Example:
<iframe allowtransparency="true" frameborder="0" scrolling="no"
src="http://platform.twitter.com/widgets/follow_button.html?screen_name=twitterapi&lang=fr"
style="width:300px; height:20px;"></iframe>
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 Javascript version.
Javascript Code Example (not supported on IFRAME version):
<a href="https://twitter.com/twitterapi" class="twitter-follow-button" data-width="300px" data-align="right">Follow @twitterapi</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
Follow Button 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… We recommend you make room for:
- 300 pixels width if you display the Followers count
- 200 pixels width if you hide the Followers count
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?
If you want to render the Follow Button in a non-blocking way (after the rest of the page has loaded), you can dynamically assemble and write out the SCRIPT DOM element like this:
<script type="text/javascript">
(function(){
var twitterWidgets = document.createElement('script');
twitterWidgets.type = 'text/javascript';
twitterWidgets.async = true;
twitterWidgets.src = 'http://platform.twitter.com/widgets.js';
document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
})();
</script>
Then you just have to use the <a> tag(s) to place your Follow Button(s) in your page. For example:
<a href="https://twitter.com/twitterapi" class="twitter-follow-button">Follow @twitterapi</a>
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 next to the Follow Button. 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 Button, the “Following” action wouldn't be triggered.
Does the Follow Button work over HTTPS?
At the moment the Follow Button does not work over SSL. We are looking into making this possible but for the time being we only support HTTP. As an alternative, you can use the Follow and Mini-Profile Intent