Update:The Twitter Cards Validator mentioned has been changed since this blog post was written. The links you need to enable Player Cards remain the same, however the tool no longer automatically generates the meta tags you need. Instead, use this template and input each of the required links…
<meta name="twitter:card" content="player">
<meta name="twitter:site" content="@yourtwitterhandle">
<meta name="twitter:creator" content="@yourtwitterhandle">
<meta name="twitter:title" content="YOUR HEADLINE">
<meta name="twitter:description" content="YOUR DESCRIPTION">
<meta name="twitter:image:src" content="YOUR POSTER FRAME LINK">
<meta name="twitter:player" content="YOUR PLAYER LINK">
<meta name="twitter:player:stream" content="YOUR VIDEO LINK">
<meta name="twitter:player:stream:content_type" content="video/mp4">
<meta name="twitter:player:height" content="324">
<meta name="twitter:player:width" content="576">
<meta name="twitter:domain" content="MYWEBSITE.COM">
Validating your meta tags still works in (broadly) the same way
A few weeks back I showed you how to get your videos displaying in Facebook and I promised I’d write about how you can get your videos showing up directly in the Twitter feed like this:
So here goes!
Setting Up Twitter Player Cards
Twitter refers to content rich tweets as cards. Each card provides a different type of content and has different meta tags associated with it.
To start generating the meta tags for cards, just head over to the Twitter validation tool. Once there, the first thing you’ll be asked is which type of card you’d like to set-up. The one you need for videos is the Player Card.
Now Twitter will automatically generate your meta tags for you. But first you need to give it a few bits of information:
- twitter:site – your twitter username
- twitter:creator – the twitter username of the content creator (note: can be the same as the twitter:site tag you just entered)
- twitter:title – the title of your content
- twitter:description – a description for the content
- twitter:image:src – an image URL; this will be the video’s thumbnail in the Twitter feed
- twitter:player – a secure video player URL
- twitter:player:height and twitter:player:width – the size of your embed in pixels.
You can find all of the video information on your individual video’s page within your vzaar account. Let’s just go through the URLs you’ll need:
This is the poster frame link. If you copy and paste this into your browser you’ll find it redirects to http://resources.vzaar.com/(and then a whole load of numbers and letters).
This is the link you need to enter into the Twitter Validation Tool.
Remember the poster frame link you copied earlier: http://view.vzaar.com/1598227/image. Add an ‘s’ at the end of the ‘http’ to make it secure, and replace ‘image’ with ‘player’. Hey presto! A secure video player URL.
It should look like this: https://view.vzaar.com/xxxx/player (where xxxx) is your video ID.
Now just replace “player” with “video” so it looks like this: https://view.vzaar.com/xxxx/video
Validate Your Meta Tags
Once you’ve entered all the required information Twitter will generate the meta tags you need. Copy and paste these into the html of your site.[Edit: No it won't, use the template above instead :)]
Now go back into the Twitter Validation Tool to check everything is working properly. Enter the URL of the page you have just meta tagged and hit go. If all has gone smoothly you’ll see a little preview to the right of how your page will look when you share it to Twitter.
Request Twitter Approval
Before your Twitter cards will start to work, Twitter needs to authorise them.
Click request approval and then Twitter will ask you for a bit of information about who you are and what you will be using the cards for. And then it’s in their hands.
For us, the approval process took around 2 days.
Once your request does get the Twitter seal of approval you’ll be able to use your player card anywhere on your website. You just need to edit the meta tags to make each card relevant to the video you want to display.
Social sharing via the vzaar video player
vzaar gives you the option to add social sharing buttons to your video player itself.
If you want to enable your viewers to share the twitter card via these buttons there’s one last step you must take (but don’t worry it’s easy).
Just head into your video’s settings and complete the ‘video URL on your site’ field. And you’re all done.
As always, if you have any questions about this we are happy to help. Just drop us a line.
See you next time!