Tweet Button
The Tweet button is a small button displayed on your website to help viewers easily share your content on Twitter. A Tweet Button consists of two parts: a link to a Tweet composer on Twitter.com and Twitter’s widgets JavaScript to enhance the link with Twitter’s official and easily recognizable Tweet button.
The Tweet button generator is a simple, form-based approach to generate HTML markup you may copy-and-paste into your website template.
Do you develop an iOS or Android application? Add a Tweet composer to your application using Twitter Kit for iOS or Android.
Tweet creation flow
Selecting the Tweet button will pop open a new child window with a Tweet composer pre-populated with the values you define in button markup or extracted from the page.
![Screenshot of a Twitter composer pre-populated with web intent values](http://web.archive.org./web/20150814013004im_/https://g.twimg.com/dev/documentation/image/tweet-intent-composer_0.png)
Twitter may suggest accounts to follow after the author has successfully posted a Tweet. These displayed accounts are influenced by the via
and related
web intent parameters.
![Screenshot of a Tweet web intent confirmation page with related account follow suggestions](http://web.archive.org./web/20150814013004im_/https://g.twimg.com/dev/documentation/image/tweet-intent-posted.png)
A tweet
event is triggered on your webpage after a Tweet is published. No information about the final content of the Tweet is passed to the parent webpage.
How to add a Tweet button to your website
1. Create a new anchor element with a twitter-share-button
class to allow Twitter’s widgets JavaScript to discover the element and enhance the link into a Tweet button. Set a href
attribute value of https://twitter.com/intent/tweet
to create a link to the Twitter web intent composer.
<a class="twitter-share-button" href="https://twitter.com/intent/tweet"> Tweet</a>
2. Pre-populate Tweet text and suggest related accounts by customizing Tweet web intent query parameters.
<a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=Hello%20world"> Tweet</a>
3. Customize Tweet button parameters using data-* attributes.
<a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=Hello%20world" data-size="large"> Tweet</a>
4. Asynchronously load Twitter’s widgets JavaScript using our loading snippet. The JavaScript snippet will check for an existing version of Twitter’s widgets JavaScript on the current page, initialize a function queue to be executed once the widgets JavaScript has loaded, and load the widgets JavaScript asynchronously from Twitter’s CDN.
Tweet text components
text
A text
parameter appears pre-selected in a Tweet composer. The Tweet author may easily remove the text with a single delete action.
The text
parameter may be auto-populated from the webpage’s <title>
element if not explicitly set.
url
The url
parameter contains an absolute HTTP or HTTPS URL to be shared on Twitter. The shared URL will be shortened by Twitter’s t.co service in a published Tweet. A Twitter Card may be appear for a shared URL.
The url
parameter may be auto-populated from a canonical link element (<link rel="canonical">
) or the location.href
of the page when not explicitly set.
<link rel="canonical" href="https://dev.twitter.com/web/tweet-button">
Set a data-counturl
attribute when your shared URL differs from the canonical representation of your page.
hashtags
Add a comma-separated list of hashtags
to a Tweet using the hashtags
parameter. Omit a preceding “#” from each hashtag; the Tweet composer will automatically add the proper space-separated hashtag by language.
via
Attribute the source of a Tweet to a Twitter username using the via
parameter. The attribution will appear in a Tweet as ” via @username” translated into the language of the Tweet author.
A via
parameter may be auto-populated from a link or anchor element linked to a Twitter profile page with a me
relationship token.
<link rel="me" href="https://twitter.com/twitterdev" >
Button customization
Tweet count
The Tweet button displays a count of the number of times a URL has been shared in Tweets. You may wish to set a separate count URL from the URL to be shared using the counturl
data attribute.
<a class="twitter-share-button" href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fdev.twitter.com%2Fweb%2Ftweet-button%3Fsrc%3Dtwitter" data-counturl="https://dev.twitter.com/web/tweet-button"> Tweet</a>
The Tweet count displays to the right of the Tweet button by default (left in right-to-left languages). Set a count
value of none
to hide the Tweet count or vertical
to display a count above the button.
data-count value | result |
---|---|
horizontal | Tweet |
vertical | Tweet |
none | Tweet |
Note: If your count does not seem to increase correctly, make sure your server supports HTTP HEAD requests, as described in this Tweet button FAQ entry.
Size
Add a data-size
attribute value of large
to display a larger Tweet button.
data-size | result |
---|---|
default | Tweet |
large | Tweet |