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 publish.twitter.com website provides a simple, form-based approach to generate HTML markup for a Tweet button 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.
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="/web/tweet-button">
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"
>