How to integrate Twitter Card with Blogger

Whenever you share your blog post on Facebook or Google+, they display a summary of the post content with a thumbnail if available but when you share same post on Twitter, its list only post title and post URL. Twitter has no direct method to share a blog post with summary and thumbnail but we can use “Twitter Cards” to similar solution. Twitter has different types of Cards so in this tutorial will help you to add a summary card to your Blogger blog posts.

When you add a summary card successfully, Blog Posts will show a “View Summary” Option.

Integrate Twitter Card:

1. Go to your Dashboard on Blogger

2. Click on >> Template

3. Click on >> Edit HTML

4. Search for <head>

5. Place the below code anywhere in <head> section.

<meta content='summary_large_image' name='twitter:card'/> <meta content='@Twitter User Name' name='twitter:site'/> <meta content='@Twitter Author' name='twitter:creator'/><b:if cond='data:blog.pageType == "index"'><meta expr:content='data:blog.url' name='twitter:url'/><meta expr:content='data:blog.pageTitle' name='twitter:title'/><b:else/><meta expr:content='data:blog.homepageUrl' name='twitter:url'/><meta expr:content='data:blog.pageName' name='twitter:title'/></b:if><b:if cond='data:blog.metaDescription != ""'><meta expr:content='data:blog.metaDescription' name='twitter:description'/></b:if>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTU1Rjwxy0BAMlRKFgb6RkBWNxnNZMdIwaB8VUmK9EK5mUBg6c5FNDdI8DMMQcPu9fUfsTAVDvZXtUP4X9L4iwA64R9fzs_UclYX2tWq9u6Nb7DhGbEfd-8NqLJN1y2DkLrmRoOp5Lep0/w140-h38-p/llogo.PNG' name='twitter:image'/><meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>

And Save your template.
After that submit a request for approval of your card from Twitter. To do that Go to Twitter Developer Site at https://dev.twitter.com/docs/cards/validation/validator and type blog URL in “Card URL” text box and click Preview button. This will show a log message: