Set-up Twitter for Websites

The easiest way to create a Twitter for Websites widget — a Tweet button, Follow button, embedded Tweet or timeline — is to use our configuration tools, then copy and paste the generated HTML code into the template for your site.

• Create a Tweet or Follow Button
• Create an Embedded Timeline (note, you should be logged-in to the Twitter web interface for this link to work)

Embedded Tweets can be copied from the “•••” (More) menu of any Tweet.

For best performance and reliability, include the widgets.js script in your template

Include Twitter’s widgets JavaScript once in your page template for optimal web page performance and to enable tracking of Twitter widget JavaScript events.

If your site is using multiple widgets you can set up Twitter widgets in your pages once, which will make your site faster, and widgets such as embedded Tweets will be more reliable for authors when using content management systems.

<script>window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);

  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };

  return t;
}(document, "script", "twitter-wjs"));</script>

The above snippet optimizes loading Twitter’s widgets JavaScript by:

1. Assign a HTML element ID of twitter-wjs to easily identify if the JavaScript file already exists on the page. Exit early if the ID already exists.
2. Asynchronously load Twitter’s widget JavaScript.
3. Initialize an asynchronous function queue to hold functions dependent on Twitter’s widgets JavaScript until the script is available.

Include this snippet before any other JavaScript on your page which may depend on the twttr.ready asynchronous function queue.

Ignore script tags from embeds

If you include the Twitter JavaScript loader on every page you do not need to include the <script> element generated by a button configurator, embedded Tweet, or embedded Timeline tool. You can delete the extra <script> HTML from generated markup.

If you use the oEmbed API to include Tweets in your content, you can generate embed codes that don’t include the <script> element by passing omit_script=true in the query string.