Getting your Blogger site to have Twitter Summary Cards

Getting your Blogger site to have Twitter Summary Cards

Twitter cards are a newish functionality that make it possible for you to attach media experiences to Tweets that link to your content. With a few added lines of HTML to your Blogger template, users who Tweet links to your content will have a "card" added to the Tweet that’s visible to all of their followers.

You might have read one of our recent posts regarding creating Rich Pins for Pinterest on your Blogger blog; the process for Twitter cards is very, very similar.



Step 1: search for this line

Run a search for this line of code in your Template
<b:includable id='post' var='post'>

Step 2: add the following

Below the line you found in Step 1, add the following:

<meta content='summary' name='twitter:card'/>
<meta content='@yourname' name='twitter:site'/>
<meta content='@yourname' name='twitter:creator'/>
<meta content='www.yoursite.com' name='twitter:domain'/>
<meta expr:content='data:post.firstImageUrl' name='twitter:image:src'/>
<meta expr:content='data:post.title' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
<meta expr:content='data:post.sharePostUrl' name='twitter:url'/>

Change @yourname to be your Twitter account handle, and www.yoursite.com to be your site URL.

Step 3: save your template

Congratulations! Test out and submit the new code with the validator and you should be good to go!

Link :  http://www.blogxpertise.com/2014/01/Twitter-summary-card-for-blogger-blog.html