How to integrate twitter cards

Did you know about twitter cards? Here is how to integrate them with

Twitter has recently released twitter cards as a way to display rich content on twitter feeds.

I have created an example to show you how to take advantage of twitter cards to display links to your site in the best possible way. I put this right in to the master snippet in the <head>…</head> section.

If you read the code you will see that I have only enabled twitter cards when there is one item to display.

Then if the item is a product, I display the twitter product card, otherwise I display either a twitter summary card or if the item has photos, a twitter summary card with large image.

This will work quite well for shopping sites or regular content oriented sites.

OK, now to test our awesome twitter cards and apply to be allowed to have our cards displayed on twitter links. Go to the twitter cards validator and sign in to your twitter account. I had a few problems here. Only use Google Chrome for this step, no other browser worked for me. Hopefully by the time you read this, they’ll have all their browser issues sorted out.

Click on “Validate & Apply” and paste in a URL that contains your twitter card. It will fetch your page, check for any errors and if all is good, you will be able to apply to you have your domain “white listed” to appear in twitter’s feeds. Be patient, this step takes a few business days.

When validated, you can paste URLs and get a much richer presence in twitter feeds. Have fun!

Sample Code

by Craig Sullivan

3 Jul 2013