Saturday, November 21, 2015

How to Install Twitter Cards on Blogger

This blog uses affiliate links. Basically, I make a small commission when you use these links, at no additional cost to you.

What is hyperlexia? Get the free Hyperlexia Handbook to learn more!

I mentioned recently how Twitter cards can help your blog work harder by showing large photo links on Twitter every single time someone shares your blog post. Because let's face it, photos on Twitter are more likely to be retweeted and shared than just text only tweets.

However, when I first tried installing the large summary Twitter cards on my Blogger template, I had trouble actually finding a tutorial that worked. Of course, there seems to be lots of tutorials to help Wordpress users, but so few for Blogger users. I tried two or three different ones with zero success. I finally found one that works, not just on my blog, but on Frugal Autism Deals as well. So here's how to install Twitter cards on Blogger.

How to install Twitter cards on Blogger from And Next Comes L

Important: Always back up your template before making changes to HTML. Find out how to back up your template on Blogger here.

How to Install Twitter Cards on Blogger

1. Go to the Template section in the Blogger dashboard.

2. Click on Edit HTML.

3. Click anywhere inside the HTML box and press CTRL+F. Search for:


4. Insert the following code before </head> code:

<meta content='summary_large_image' name='twitter:card'/><meta content='@andnextcomesl' name='twitter:site'/><meta content='@andnextcomesl' name='twitter:creator'/><b:if cond='data:blog.pageType == &quot;item&quot;'><meta expr:content='data:blog.pageName' name='twitter:title'/><b:else/><meta expr:content='data:blog.pageTitle' name='twitter:title'/></b:if><b:if cond='data:blog.metaDescription'><meta expr:content='data:blog.metaDescription' name='twitter:description'/><b:else/><meta expr:content='data:post.snippet' name='twitter:description'/></b:if><b:if cond='data:blog.postImageUrl'><meta expr:content='data:blog.postImageUrl' name='twitter:image'/><b:else/><meta content='' name='twitter:image'/></b:if>
<b:if cond='data:blog.postImageThumbnailUrl'><meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/><b:else/><meta content='' property='og:image'/></b:if>

5. Replace the Twitter handle (highlighted in green) with your own handle.

6. Replace the images (highlighted in orange) with your own image URL. This image shows if the post doesn't have a photo in it.

7. Click on Save Template.

8. Make sure your code is working properly by validating your Twitter card with the Twitter Card Validator. Just paste any blog post URL into the validator. You should get something similar to this:

How to install Twitter cards on Blogger from And Next Comes L


Browse these popular categories

Hyperlexia Autism Anxiety Hypernumeracy ADHD Sensory processing Social stories Speech & language Emotions & self-regulation Sensory bin ideas I spy games Kids activities & crafts
What is hyperlexia? Get the free Hyperlexia Handbook to learn more!


Post a comment