Multiple twitter cards on a single webpage



I thought I saw somewhere in the twitter documentation there was “best practice” advice for setting up twitter and displaying multiple twitter cards on a single page. Can someone post a link to this best practice page?

Currently, for each twitter card I want to load, I am outputting this line of code with them.

<script async src="//" charset="utf-8"></script>
<script async charset="utf-8">twttr.widgets.createTweet("'.{tweetID}.'",document.getElementById("tweet-container"),{ linkColor: "#55acee"});</script>

And so I am pretty sure there is probably a better way of doing this so I can just load the widget.js once. Thanks in advance.


Set up an async function queue using our JS loading snippet:

Wrap each JavaScript factory function in a function passed to twttr.ready.

twttr.ready(function (twttr) {

If you are setting the same link color in multiple widgets you are better off adding a meta element to the page.

<meta name="twitter:widgets:link-color" content="#55acee">


Thank you! That’s what I was looking for.