The Tweet button generator is a simple, form-based approach to generate HTML markup you may copy-and-paste into your website template.
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.
Twitter may suggest accounts to follow after the author has successfully posted a Tweet. These displayed accounts are influenced by the
related web intent parameters.
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
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>
Tweet text components
text parameter appears pre-selected in a Tweet composer. The Tweet author may easily remove the text with a single delete action.
text parameter may be auto-populated from the webpage’s
<title> element if not explicitly set.
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.
<link rel="canonical" href="https://dev.twitter.com/web/tweet-button">
data-counturl attribute when your shared URL differs from the canonical representation of your page.
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.
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.
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" >
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.
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.
data-size attribute value of
large to display a larger Tweet button.