Mention Button

A mention button is a special type of Tweet button to encourage a new Tweet focused on an interaction between the user and a mentioned account. A Tweet beginning with @username do not appear on the author’s timeline in the default view; the Tweet will only appear in the home timeline of the author’s followers if the viewer follows both the author and the mentioned user. Read more about @replies and @mentions.

The mention button generator is a simple, form-based approach to generate HTML markup you may copy-and-paste into your website template.

How to add a mention button to your website

1. Create a new anchor element with a twitter-mention-button class to allow Twitter’s widgets JavaScript to discover the element and enhance the link into a mention 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-mention-button"
  href="https://twitter.com/intent/tweet">
Tweet</a>

2. Add the username of the mentioned account as a screen_name query parameter value and a component of the anchor element’s inner text.

<a class="twitter-mention-button"
  href="https://twitter.com/intent/tweet?screen_name=TwitterDev">
Tweet to @TwitterDev</a>

3. 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.

JavaScript factory function

Twitter’s widget JavaScript library supports dynamic insertion of a mention button using the twttr.widgets.createMentionButton function. Pass a username, target container element, and the same options supported by the Tweet button JavaScript factory function.

twttr.widgets.createMentionButton(
  "TwitterDev",
  document.getElementById("container"),
  {
    size:"large"
  }
);