Twitter Cards for Blogger

This post is outdated. Twitter cards and Blogger have both changed since this was posted in 2012. I recommend this tutorial from my friends at Blogger Xpertise for current Twitter card markup.

Have you noticed lately that some Tweets have a little something extra? Like my Tweets, for example?

These "expandable" Tweets are enhanced with the new Twitter Cards. Twitter Cards show more detail about your posts to give readers a little preview of what they'll see when they click your link. And, the cards work when anyone Tweets a link to your post — not just you. So, if someone else Tweets a link to your blog post, their Tweet will have all the preview details, too!

Today I'm going to share the exact markup I used and the steps I took to get Twitter Cards working for me on Blogger.

Before we get started, there are a few things you should know about Twitter Cards:

There are Three Types of Twitter Cards

In this tutorial I'm going to focus on making a summary card. Summary cards show the title of your blog post, a thumbnail image, a short description of your post, and your Twitter handle. The other two card types — photo and player — are not included in this tutorial, but you can learn more about them from the official Twitter Cards documentation.

Twitter Cards are a New Feature

Twitter added this feature in June, so it's still quite new. Like most new things, these cards are a little quirky. Not everyone will see the cards all of the time or on every browser/mobile platform. Twitter knows this and they're working on it.

They Don't Work Instantly

You have to add the Twitter cards markup to your template, then submit your blog to Twitter for acceptance. After you submit your blog you'll have to wait an unspecified period of time until the cards activate. Some people get an email from Twitter when their cards start working, others don't. I didn't; I just happened to notice that my cards were working about 2 weeks after I submitted my application.

Note: The Dynamic Views template behaves unpredictably if you alter its meta tags. If you'd like to use Twitter cards for your blog, choose a different Blogger template.

As long as you're cool with those caveats, we can get into how to set up Twitter Cards on Blogger!

Step One: Get Your Blog Posts Ready for Twitter Cards

Twitter Cards use your post's Search Description as your summary, so you'll want to make sure that you've filled it in on each post. I posted an in-depth tutorial on how to enable and use the Search Description feature in this post: All About Blogger Search Features.

Step Two: Back Up Your Template

Do not skip this step. You're going to add the Twitter Cards markup directly to your template, so before we do anything else you need to back that template up! Go to "Template" and click the "Backup/Restore" button in the upper right corner. On the next screen, click "Download full template" and save the .xml file. If anything goes wrong while you're adding the Twitter Cards markup you can restore your blog with your backup file.

Step Three: Add the Twitter Cards Markup

Now that you've backed up your template (you did that, right?), click the "Edit HTML" button beneath your "Live on blog" screenshot.

Once you've opened up your template, place your cursor over the code and click once. Open a search box by pressing ctrl-f if you're on a PC, or command-f if you're on a Mac. Type </head> in the search box that appears in the upper right corner of your template code, then press enter. Your template will jump to the </head> tag and highlight the tag in yellow.

Enter this markup directly above the </head> tag:

Before you save your template, change YOUR-TWITTER-NAME to your actual Twitter name.

Once you've done that, click the "Save template" button.

Step Four: Test Your Markup

Twitter has a testing tool for checking your Twitter Card markup here.

On the tester page, enter the URL of one of your posts (NOT your home page, Twitter Cards only work on post pages) and click "Preview Card". You'll see a demo Tweet with your card attached.

Step Five: Submit Your Twitter Cards Application

Once you've confirmed that your markup is working, you'll need to submit your blog for approval. To get started, click the "apply to participate" link on this page (3rd paragraph). When Twitter gets your application, they'll check your markup and approve you (provided everything is in the right place). They may contact you to let you know you've been approved, or you may just suddenly see your cards working, like I did. I don't know what happens if you don't get approved — probably nothing.

Twitter Cards Support

You can find out more about how the cards work and the different types of options available in the official documentation for Twitter Cards. If you have questions, you may also be able to get help on Twitter's developer forum, which has an active Twitter Cards board.