Select Page

Twitter is awesome, no doubt. I’ve been on there since 2007, and with the amazing 59 followers I’ve amassed over the past 7 years, I’ve learned a little bit about how it works.

Facebook gets a lot of the attention when it comes to development, but twitter has been doing some pretty cool things lately. One of these things is called twitter cards.

WTF are twitter cards you might ask? Well, it’s actually a cool way for you to attach media to your tweets instead of manually having to add it yourself. You may have noticed that in the past, if you added a link to vine or imgur or some other service, twitter would automagically grab that media and insert it as an image in your timeline. This was kind of the foundation of twitter cards.

So, twitter now has an cool and simple way for you to get that data from the link into your post without killing your character count. All it requires is that you add the proper meta data on the page you are linking to, and twitter will do the rest.

Right now, there are the following card types available:

You can see how you can leverage these cards to increase your social reach! I’ve started using them for this site to provide a summary when I post a new blog. This way, you can see a brief summary in the twitter timeline without eating up your characters. It also allows you to customize the title and the description as well as add custom images. That’s just one example on how to leverage this new feature.

So, how do you do it? Easy – all you need to do is add the correct meta data to your page, which can be done using their validation tool.

Once you select the proper card type that you want, it will generate the meta data for you, simply copy and paste and insert into your site:

<meta name="twitter:card" content="PLACEHOLDER">
<meta name="twitter:site" content="@site_username">
<meta name="twitter:title" content="Top 10 Things Ever">
<meta name="twitter:description" content="Up than 200 characters.">
<meta name="twitter:creator" content="@creator_username">
<meta name="twitter:image:src" content="http://placekitten.com/250/250">
<meta name="twitter:domain" content="YourDomain.com">
<meta name="twitter:app:name:iphone" content="Vine">
<meta name="twitter:app:name:ipad" content="Vine">
<meta name="twitter:app:name:googleplay" content="Vine">
<meta name="twitter:app:url:iphone" content="vine://v/93582sxlkjf">
<meta name="twitter:app:url:ipad" content="vine://v/93582sxlkjf">
<meta name="twitter:app:url:googleplay" content="http://vine.co/v/93582sxlkjf">
<meta name="twitter:app:id:iphone" content="id592447445">
<meta name="twitter:app:id:ipad" content="id432984038404">
<meta name="twitter:app:id:googleplay" content="co.vine.android">

Once you have validated your code, you will need to have twitter authorize your site. There is a link in the “validate & apply” tab on the validator where you will enter your site details. Twitter will then have to approve your site before allowing you to have access to certain card types. I found with summary and photo cards, validation is almost immediate. I’ve been waiting about a day to get the player card validation approved. I’m going to make that a separate post, because there is more to the player card feature than lets on.

So, take this new found knowledge and go out there and make your twitter timeline the envy of all the cool social media nerds.