Multiple twitter cards on a single webpage

[RobbieGoD316]

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="//platform.twitter.com/widgets.js" 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.

[niall]

Set up an async function queue using our JS loading snippet:
https://dev.twitter.com/web/javascript/loading

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

twttr.ready(function (twttr) {
  twttr.widgets.createTweet(
    "653590130230493184",
    document.getElementById("container")
  );
});

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">

[RobbieGoD316]

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

[niall]