Thursday, July 30, 2015

How to Implement a Twitter Card for Blogger.








In order to add Twitter Cards in Blogger you have to add a few lines of code to your template. Before editing the template remember to back it up first, then click on edit html, and copy the below code after the <head> opening tag.








The Code:


<meta content='summary_large_image' name='twitter:card'/>
<meta content='@IcebergGem' name='twitter:creator'/>
<meta content='@IcebergGem' name='twitter:site'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta name="twitter:url" expr:content='data:blog.url' />
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/>
<b:else/>
<meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='Image URL' name='twitter:image:src'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
<meta expr:content='data:blog.Url' name='twitter:url'/>





The above code will Add Summary large image Twitter Card. Before adding the code remember replace my IcebergGem twitter handle with yours.



Next, you need to go Twitter Validator ( https://cards-dev.twitter.com/validator ) to test the code. And please make sure all of your Blog posts have a search description and your Blog/Website in general has a search description or it will not work.