How to Add Twitter Cards to Blogger/Blogspot Blogs

Twitter cards allows you to show a summary of the blog post and also a thumbnail if available similar to Facebook or Google+. Twitter has come up with six different types of cards that can be attached to Tweets and this short tutorial will help you in adding a summary card to your Blogger posts.

Just add a short code to your blog template, and users tweet your articles will have a "Twitter Card" added to the Tweet that’s visible to all of their followers. When anyone click on Expand story, able to see blog post description, thumbnail and much more.

Your content which have the summary card added will show a View Summary option (see above screenshot) and when you click on that it will show the Twitter Card. (See below screenshot).

Want to see live demos? Check out our Twitter Page

How to add Twitter Cards to Blogger

The first thing you need to do is to login into your Blogger account. After logging into your account, you need to edit your template by go to Template > Edit HTML

• Press Ctrl + F & search </head>
• Paste the below code just above </head>

Remember Notes: Replace the first blogsdaddy in the below code with the username of the twitter account which you use for your blog.You can replace the 2nd desicomments to the name of the blog author’s twitter account. If you don’t have a separate one, then use the same at both places.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<b:if cond='data:blog.metaDescription'>
<meta content='summary' name='twitter:card'/>
<meta content='blogsdaddy' name='twitter:site'/>
<meta content='desicomments' name='twitter:creator'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image:src'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
</b:if>
</b:if>
</b:if>

It will look like this:

Congratulations: Save your template and you have just finished first step successfully.

Next Step is to add Meta Descriptions & images to your Blogger Post – Please add meta tags properly to your blog posts while writing a new one. Follow the given posts so that you can learn more about meta description or titles.

1. Add Meta Tags To Blogger Blog Posts Automatically
2. How To Tag Images In Blogger Blog To Drive Traffic?

Last Step Request For Approval From Twitter: For the approval just go to Twitter Developer Website at https://dev.twitter.com/docs/cards/validation/validator and sign in with your twitter account. Choose "Summary" option from Card Catalog. Now, go to the Validate & Apply tab 

Enter URL of your blog post (To which you have added a search description and image) to validate  and hit Go button. If all things done exactly then Twitter will validate the card markup and it will give an option to request for approval. 

Show Me Your Twitter Cards!

Once you cards approved, all your blog posts will start working. You can see cards in old tweets also. Tweet at me with a link to one of your posts so I can see your Twitter card! If you're facing any problem then ask me via comments. Stay Blessed :)

Author - Gagan Masoun is the owner of Blogs Daddy Blog. Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can follow him on twitter @BlogsDaddy. You can also follow him on Google+.