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.
By using the Follow Button, you agree to the Developer Rules of the 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 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" data-show-count="false" data-lang="en">Follow @twitterapi</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>
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 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:
Javascript (link data-attribute) | |
---|---|
User to follow | (in the anchor URL) |
Followers count display | data-show-count |
Language | data-lang |
Width | data-width |
Alignment | data-align |
Show Screen Name | data-show-screen-name |
Size | data-size |
Opt Out | data-dnt |
Followers count display
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
<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>
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 with language set to French:
<a href="https://twitter.com/twitterapi" class="twitter-follow-button" data-lang="fr">Follow @twitterapi</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="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-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):
<a href="https://twitter.com/twitterapi" class="twitter-follow-button" data-width="300px" data-align="right">Follow @twitterapi</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="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-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:
<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>
<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>
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):
<iframe allowtransparency="true" frameborder="0" scrolling="no"
src="//platform.twitter.com/widgets/follow_button.html?screen_name=twitterapi"
style="width:300px; height:20px;"></iframe>
Note that the screen_name parameter is required.
IFRAME Code Example with language set to French:
<iframe allowtransparency="true" frameborder="0" scrolling="no"
src="//platform.twitter.com/widgets/follow_button.html?screen_name=twitterapi&lang=fr"
style="width:300px; height:20px;"></iframe>
Opt-out of tailoring Twitter
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.
<a href="https://twitter.com/twitterapi" class="twitter-follow-button" data-dnt="true">Follow @twitterapi</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>
Configure your iFrame 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 query string parameters for the IFRAME version:
Query string parameter | Example | |
---|---|---|
User to follow | screen_name | screen_name=twitterapi |
Followers count display | show_count | show_count=true |
Language | lang | lang=en |
Size | Not Supported | |
Width | Not Supported | |
Alignment | Not Supported | |
Show Screen Name | show_screen_name | show_screen_name=true |
Opt Out | dnt | dnt=true |
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, 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 Button, the “Following” action wouldn't be triggered.
Does the Follow Button work over HTTPS?
Yes, the Follow Button works over HTTPS.