Twitter Widgets Webpage Properties¶
Websites can set widget preferences across their entire website by including <meta>
and <link>
elements in every page for interpretation by Twitter’s widget JavaScript before creating a new widget or button.
Widget settings specified in a <meta>
may be overridden at the individual widget level. Order of precedence:
- web intent link query parameter
- widget attribute
- widget ID stored preference (embedded timelines only)
- meta or link element
Disable DOM scan for widgets and buttons¶
Twitter’s widgets JavaScript scans document.body
after initialization to locate buttons, widgets, and web intents for enhancement. Disable this scan if Twitter content is only loaded via JavaScript factory functions or if you prefer to directly call Twitter’s loader on a smaller fragment of the page.
<meta
name="twitter:widgets:autoload"
content="off">
Canonical link¶
The Tweet Button uses the canonical link relation of the page expressed in a <link>
as the shared URL if the URL property is not set in the button markup.
Add a canonical link in the <head>
section of your webpage.
<link
rel="canonical"
href="/">
Identify the Twitter profile of the page¶
Populate the via
property of a Tweet Button by linking to your Twitter profile page with a me
link relationship token.
Set a me
link relationship in the <head>
section of your webpage.
<link
rel="me"
href="https://twitter.com/TwitterDev">
You may also set a me
relationship from an anchor element on your page, such as a Follow Button.
<a
class="twitter-follow-button"
rel="me"
href="https://twitter.com/TwitterDev">
Follow @TwitterDev
</a>
Theme¶
Override the default light
theme preference for an Embedded Tweet or an Embedded Timeline.
<meta
name="twitter:widgets:theme"
content="dark">
Default view
Sunsets don't get much better than this one over @GrandTetonNPS. #nature #sunset pic.twitter.com/YuKy2rcjyU
— US Dept of Interior (@Interior) May 5, 2014
theme = dark
Sunsets don't get much better than this one over @GrandTetonNPS. #nature #sunset pic.twitter.com/YuKy2rcjyU
— US Dept of Interior (@Interior) May 5, 2014
Link color¶
Specify a hexadecimal color value for Tweet links displayed in an Embedded Tweet or an Embedded Timeline.
<meta
name="twitter:widgets:link-color"
content="#ff00ff">
Border color¶
Specify a border color for any Embedded Timelines displayed on the page.
<meta
name="twitter:widgets:border-color"
content="#ff00ff">
Do not track¶
Twitter may use website impression data to tailor Twitter experiences including suggesting accounts to follow. Your website can choose to opt-out your audience from tailored experiences informed by the content of your site by setting dnt=on
.
<meta
name="twitter:dnt"
content="on">
Disable functionality which may trigger Content Security Policy warnings¶
An Embedded Tweet or Embedded Timeline may display with restricted capabilities when a Content Security Policy restricts inline loading of Twitter. Set csp=on
to disable functionality which could display Content Security Policy warnings on your site.
<meta
name="twitter:widgets:csp"
content="on">