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.

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.

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.

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.