Twitter Cards launch for Channel 9
These days, Twitter is one of the big social media channels for people talking about development, including Channel 9. Recently Twitter added a new feature, Twitter Cards, and it seemed like a perfect fit for our content ... especially the 'Player Card', which is designed to display video content. We have video content, people like to tweet about it... perfect!
To get these cards to work for our content seemingly involves just providing the right meta tags:
<meta name="twitter:card" content="player"/> <meta name="twitter:site" content="@ch9"/> <meta name="twitter:title" content="Defrag Tools: #74 - Windows 8.1 - Frame.GetNavigationState Crash (Channel 9)"/> <meta name="twitter:description" content="In this episode of Defrag Tools,&nbsp;Andrew Richards and Chad Beeder&nbsp;walk you through a common issue in Windows Store applications that use Frame.GetNavigationState. We&nbsp;use a Windows Store "/> <meta name="twitter:image:src" content="https://sec.ch9.ms/ch9/6d7f/0a2d335b-c067-44bd-8f71-fb03837b6d7f/DefragTools74_960.jpg"/> <meta name="twitter:player" content="https://channel9.msdn.com/Shows/Defrag-Tools/Defrag-Tools-74-Windows-81-FrameGetNavigationState-Crash/player"/> <meta name="twitter:player:stream" content="https://sec.ch9.ms/ch9/6d7f/0a2d335b-c067-44bd-8f71-fb03837b6d7f/DefragTools74_mid.mp4"/> <meta name="twitter:player:stream:content_type" content="video/mp4"/> <meta name="twitter:player:height" content="288"> <meta name="twitter:player:width" content="512">
If you check out the values of those tags though, the real trick to making this happen was to get secure (SSL) links for every resource that we reference. Channel 9 is easy, but our CDN URLs (media.ch9.ms for example) were not available over SSL. I could have fallen back to a direct link to our blob storage, where all our videos and images are stored, but I like the CDN and the whole idea of offloading traffic onto a massive global network of edge nodes, so we had a new CDN rewrite setup (sec.ch9.ms) that does work with SSL. Boom, Twitter Cards implemented!
The end result, when someone tweets about one of our videos, this is what you see on twitter.com:
And, if you are using one of Twitter's mobile apps, you'll see the media in there as well!
So... tweet some videos and checkout the inline player ... or go to our twitter feed and watch some videos there. Exciting times!