Twitter Cards for Blogger

So, I’ve been seeing people with beautiful Twitter Cards in my Twitter Stream. They make it clear that there is a web page to visit and give a quick preview of what would be found. Something like the one below:

I’ve been wondering how to get one of the cards to appear when I tweet out a link to my latest blog post.  Since I use Blogger, there is not a simple button to click to turn this on.  I had to find a way to paste new code into the HTML code of my blog.  It took some searching from multiple sites to get a completely functional.  This site though was quite helpful.  But, I’d like to walk you through my process and hopefully it helps a few out.

There are a few types of Twitter Cards.  Two that at most frequently see are the basic summary card and the summary card with large image.  Below you can see the layout of each, but realize that they both have the same content pieces.

This is going to look like a lot more work than it will actually be, I just really broke down the steps so that they’d be easier to follow. Ok, here we go.

Eventually, we will paste some code into your Blogger Site. But, first thing we need to do is turn on Descriptions for your site. This may already be done, but be sure to double check this. If not already set-up, we’ll need to do this. The numbered diagram below will help with that.

1. Click on Settings
2. Under Settings, click on Search Preferences
3. In Description, be sure that Yes is selected
4. In the Description Text Box, add a short summary of your site (150 characters maximum).
5. To save your work, click Save Changes

As you saw in the Twitter Cards, a description will appear about your post will appear as a part of the card.  You’ll need to add this to each blog post as you make new posts otherwise the card won’t work. It’ll be quick and painless, though.

1. Click on Search Description on the right hand menu.
2. Add a brief description in the text box you’d like to appear on the Twitter Card.
3. Click Done to save your changes

Now we’re going to actually add the little piece of code to your site. Before we actually add the lines of code, we’ll have you back up your layout.  That way if something really gets messed up for some reason, you can restore the previous version.

1. Click on Theme from the left side menu
2. In the upper right corner click Backup/Restore.  In the pop-up window click Download Theme. Then click Close. (If anything goes really wrong and your site doesn’t work, this is where you would upload that theme the restore it.)
3. Once you’ve got your backup downloaded, click on Edit HTML

Finally we’re going to paste in a few lines of code.

Below are the lines we’ll be pasting in based on what type of card you want. So choose option 1 or option 2.  Note that there is only one change you’ll need to make and that is highlighted in red.  You’ll add the Twitter username you are associating the card with. For example, mine is @mo_physics.

Option 1: Basic Summary Card

<!-- twitter card details -->

<meta content='summary' name='twitter:card'/>

<meta content='@yourtwitterusername' name='twitter:site'/>

<meta expr:content='data:blog.url' name='twitter:url'/>

<meta expr:content='data:blog.pageName' name='twitter:title'/>

<meta expr:content='data:blog.metaDescription' name='twitter:description'/>

<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>

<!-- end twitter card details -->

Option 2: Summary Card with Large Image

<!-- twitter card details -->

<meta content='summary_large_image' name='twitter:card'/>

<meta content='@yourtwitterusername' name='twitter:site'/>

<meta expr:content='data:blog.url' name='twitter:url'/>

<meta expr:content='data:blog.pageName' name='twitter:title'/>

<meta expr:content='data:blog.metaDescription' name='twitter:description'/>

<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>

<!-- end twitter card details -->

Now where will you put this? Let me walk you through this too.

1. We have to find the specific place we need to paste the code. It will be before a line of code that is </head>. To find that place, click inside the code box itself  and then hit control + F (or Command + F on Mac) to bring up the “Find bar”.  In that “find bar”, type in /head.
2. That will show you exactly where </head> is in the code. Remember we are pasting our code in before </head>.
3. Copy the lines of code above and paste them in before </head>. Remember to overwrite @yourtwitterusername to your Twitter username.
4. Finally, hit Save Theme at the top of the page.

Ok, we should be good now.  So we’ll have to see if this worked. Once you’ve got a blog post that has a title, an image, and an added description, we can check it out. We’ll head to the Twitter Card Validator to check it out, so click here.

To check if it works, copy the address of the individual blog post (NOT your blog homepage) and paste it into the textbox. Then, click Preview Card. Hopefully all goes well, and you should see a preview of your card.

I’m not an HTML coder and I could do this by. So, good luck. So if you’re having issues, I might not be much help.  But, give it a try.