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.

How to integrate Twitter Card with Blogger

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.

<!--Twitter
Card LabLance.Com-->  <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 ==
&quot;index&quot;'><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 != &quot;&quot;'><meta
expr:content='data:blog.metaDescription' name='twitter:description'/></b:if>
<meta
content='https://lh6.googleusercontent.com/-Uw9dsIi2uBQ/VEvVLBEmAZI/AAAAAAAACco/MhiiQjyH3s4/w140-h38-p/llogo.PNG'
name='twitter:image'/><meta
expr:content='data:blog.homepageUrl' name='twitter:domain'/><!--End
Twitter Card-->

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:

INFO:  Page fetched successfully
INFO:  20 metatags were found
INFO:  twitter:card = summary_large_image tag found
INFO:  Card loaded successfully

Now click request for approval button, wait
for few second and after that refresh your page and check preview again you done.

LEAVE A REPLY

Please enter your comment!
Please enter your name here