How To Add Twitter Cards In Blogger (Blogspot) Blog

Do you want to add Twitter cards in your Blogger blogs ? Here is how you can add Twitter cards to your Blogger blog. Twitter cards for Blogger is not a new thing, but it looks tough because there is neither any official widget nor any third party widget that helps you in implementing Twitter cards on Blogger blogs. So you just have to add some code manually in order to add Twitter cards to Blogger blogs.

What is Twitter Card?

When you share your blog post link to Facebook or Google+, it display a summary of the post as well as a thumbnail if available. Twitter has also a similar option called Twitter Cards. This twitter cards helps you in showing summary of your blog post as well as thumbnail whenever your blog post link is shared on Twitter. You can see the examples in Techblot Twitter profile or if you want to see the live demo just tweet this post and see this tweet.

When you tweet a link to a Blogger site has twitter card enabled, there is an option to view summary. Whenever an user clicks on the tweet, they will see this summary like the picture given below. See the picture below that show how Twitter cards looks.

How To Add Twitter Cards To Blogger ?

Now if you are ready to add Twitter cards in your Blogger blog, you need to do a little work. So, I don’t want to take your more time, now follow the instructions given below to apply twitter cards in your Blogger blog.

Step 1. Adding Meta Tag Into Blogger Template

• Login to your Blogger Account.
• Navigate to Blogger>> Your Blog>> Dashboard >> Template >>Edit HTML.
• Click somewhere in Blogger Template Editor and press Ctrl + F and search for </head> tag.
• Now paste the following code given below just above the </head> tag.

<!-- Twitter Card --> 
 <meta content='summary' name='twitter:card'/> 
 <meta content='@TechClause' 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.postImageThumbnailUrl' name='twitter:image'/> 
 <!-- /Twitter Card -->

• Don’t forget to replace “Techclause” to your blog twitter handle.
• Now save the template and proceed to next step.

Related articles :- 

1. How to fix blogger template errors
2. How to add facebook like box to blogger
3. How to add blogger to google plus page
4. How to add custom domain to blogger

Step 2. Request For Twitter Card Approval From Twitter

Once you have added these meta tag to your Blogger blog, now you need to get twitter cards approval from twitter. Here is how to do that.

• Go to Twitter Developer site and go to Validate and Apply tag.[Link]
• Put the URL of your any blog post which you have added search description and image and click on the Go button.
• Now let Twitter do next step, Twitter will validate the card markup for your blog link and if everything is Ok, it will show an option to request for approval.
• Now request for approval, this process may take around 5-7 days.
• Once your blog is approved for showing Twitter cards, all tweet of your blog posts will start showing summary.

Congratulations, you have successfully added Twitter cards to your Blogger blog.

Note: Make sure you add search description meta tag and images to your every blog post. It will not show summary of your blog post if it has no meta description tag added to your blog post.

That’s it, this is how you can implement twitter cards to your Blogger blog. Hope you like this tutorial and it help you to show blog post summary in your blog post Tweet. If you faces any problem in implementing twitter cards in blogger blog feel free to ask me via comment box below.