Twitch: Embedding Twitch on Twitter.

Quick guide on how to embed Twitch.tv live stream player on Twitter.

Follow these steps to get your stream embedded inside Twitter.

Step 1.

Create a html file with the basic Twitter card player meta data in the header section.

Example:

<html>
<head>
<meta name="twitter:image" content="PUT_URL_TO_LOGO_192x192_HERE" />
<meta name="twitter:card" content="player" />
<meta name="twitter:title" content="My Live stream" />
<meta name="twitter:description" content="Today's live stream will focus on awesome. Click play to watch now!" />
<meta name="twitter:player" content="https://player.twitch.tv/?channel=PUT_UR_TWITCH_CHANNEL_ID_HERE&html5&muted=true&quality=mobile&parent=twitter.com&parent=cards-frame.twitter.com&parent=cards-dev.twitter.com&parent=tweetdeck.twitter.com" />
<meta name="twitter:player:width" content="360" />
<meta name="twitter:player:height" content="200" />
<title>Live Stream Twitter Card</title>
</head>
<body>
This is a test page for Twitter Player Card
</body>
</html>

Make sure to input the correct and wanted values in the sections. You will want to change many of the values here under title, description and image. Once you complete this upload it to your website.

Step 2.

Go to Twitter's Card Validator, enter the URL of the page you uploaded to your website and preview the card to see if its working correctly. If all is setup correctly you will then need to submit for approval. Twitters Player Card is not available for use until they review it and enable it for your website.

For more information on Twitter Player Card and approval guides make sure to check out their documentation here.

Step 3.

Once your player card is validated and your website is white listed for player card use you can then take that URL created for the player card and post it to Twitter.

Here is a example of a tweet with Twitch Live stream embedded on Twitter.

And that's pretty much all there is to getting your live stream on twitter. If you have any questions or comments fill free to post here, on twitter or on the live stream.

Other / Advanced Options

For advanced users some additional recommendations to use when created a file. Twitter has a cache mechanism which will not save old card meta data if the URL has been submitted recently. If you use one file and change the title, description the tweets will refresh with the latest title and description. To get around this you can use "QueryStrings", this will take a tiny bit of programming to setup but once its done it will fix the caching issue.