Blog Posts which have the summary card added will show a View Summary Option
and when you click on that it will show the actual Twitter Card. If you need to see live demos, check out our Twitter Page .
Why should I add Twitter Cards
How to add Twitter Cards to Blogger
1. Edit your template and add the Twitter card mark-up. - Login to your Blogger account and
and go to Template > Edit HTML
Click somewhere within the Template Editor and press Ctrl + F to search within the template.
Search for </head> and paste the below code just above that . You will have to modify the first @bloggerplugins in the below code with the name of the twitter account which you use for your blog.You can modify the second @bloggerplugins to the name of the blog author’s twitter account. Since I don’t have a separate one, I am using the same at both places but if you have separate accounts, then do use them
<b:if cond='data:blog.pageType == "item"'> <b:if cond='data:blog.postImageUrl'> <b:if cond='data:blog.metaDescription'> <meta content='summary' name='twitter:card'/> <meta content='@bloggerplugins' name='twitter:site'/> <meta content='@bloggerplugins' 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.postImageUrl' name='twitter:image:src'/> <meta expr:content='data:blog.homepageUrl' name='twitter:domain'/> </b:if> </b:if> </b:if>
and Save your template.
2. Next Step is to add Meta Descriptions & images to your Blogger Post – While making a blogger post, make sure that you add a Search Description to it.Also make sure that you have added an image to the post. If you don’t do any of these, the post won’t display a twitter card. Adding a Search Meta Description to your blogger post will also help in improving the way your posts are presented on Search Engines. So make sure that you add it to every post that you make.
3. Final step is to request for approval from Twitter.To do that Go to Twitter Developer Site at https://cards-dev.twitter.com/validator and go to the Validate & Apply tab
Give the URL of your blog post(To which you have added a search description and image) and click on the go button. Twitter will validate the card mark-up and if everything is ok it will show an option to request for approval. Do that and once it gets approved you will get an email from Twitter. This process takes around 5-10 day as of now.
Once approved, all your posts which have an image and search description will start showing twitter cards when you or anyone else shares your post to twitter. This will also reflect to old tweets.
If you have any more queries do let us know via comments or the Forum.
Bigger Featured Images on Twitter.
<meta content='summary' name='twitter:card'/>
<meta content='summary_large_image' name='twitter:card'/>
Once this is done, use the twitter card validator to validate and request access for the 'summary_large_image' card type. When you use the bigger summary card, always make sure that the first image in your post is big enough(atleast 280px in width and 150 px in height).
Last Update : This post was last updated on 17/01/2015 so that the code uses the first image in your post and not the 72px thumbnail of the same.