Beruflich Dokumente
Kultur Dokumente
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 .
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
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.
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
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>
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>
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>
05/04/12
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.
https://dev.twitter.com/docs/follow-button
4/5
05/04/12
Tags
Twitter for Websites (24) Javascript (39) widgets (24)
API Te rms
API Status
Blog
Docume ntation
https://dev.twitter.com/docs/follow-button
5/5