Friday, May 17, 2013

How to Add Twitter Cards to Blogger/Blogspot Blogs

Author: Gagan Masoun
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.

Twitter Card - View Summary

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).

Twitter Card

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

Blogger HTML Editor
  • 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:

Twitter Card Markup

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 

Card Validator - Twitter

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
Author - 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 @BlogsDaddyYou can also follow him on Google+.

4 comments:

  1. I am getting error "invalid card type"

    ReplyDelete
    Replies
    1. Have you followed all the steps properly?

      Delete
    2. Yes, except the meta data in posts. Unable to figure out how to do that in new blogger

      Delete
    3. There is no need to add meta data in posts. You have to add meta data in blogger template coding as shown in above image. Are you using default blogger template or customized blogger template? Try again above steps properly if nothing works then contact me with your template file, I will do this for you.

      Thanks
      Gagan

      Delete