Add Twitter Cards to a Blogger blog
Simple step-by-step tutorial to add Twitter cards to your Blogger blog – the 1-minute implementation guide for Blogger, code snippet included.
You might have noticed on some (or many) websites: when their blog posts are tweeted, they show additional links at the bottom of the tweet like “View Summary” or “View Photo” etc. What’s that? And how can I do that with my Blogger blog?
Its Twitter Cards, that allow you to do the same thing with your blog, but with Blogger you need to do some extra work to make it work perfectly. Lets cut that extra work by following this short-simple guide to get it done in under 2 minutes.
Edit HTML of your Blogger template, and search for <head> tag in it. Copy and paste the below given code snippet just below it:
<b:if cond='data:blog.pageType == "item"'> <b:if cond='data:blog.metaDescription'> <meta content='summary' name='twitter:card'/> <meta content='@techably' name='twitter:site'/> <meta content='@techably' name='twitter:creator'/> <meta expr:content='data:blog.pageName' name='twitter:title'/> <meta expr:content='data:blog.metaDescription' name='twitter:description'/> <b:if cond='data:blog.postImageThumbnailUrl'> <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image:src' /> </b:if> </b:if> </b:if>
Save the template. All done!
Important notes
- Make sure you’ve replaced
@techablywith your own or your blog’s Twitter username. - Always try uploading at least one image to your Blog posts to make it available as a thumbnail in Twitter Cards.
You can also test if Twitter Cards are working fine on your blog or not, by using this Validation tool. Or tweet a post from your blog in order to test the same. Tell us about your implementation of this tutorial by commenting here or tweeting at @techably. Cheers!