How To add Twitter Cards in Blogger Blogs

Twitter card is a great addition from twitter and it is warmly embraced by the webmasters. When you tweet a web page link; sometimes 140 characters are just not enough for one to really encourage the follows and other on twitter to click the link and read it.

Thats where twitter card come in. It allow to show more information like; post title and URL, a summery or description, twitter handles of author and website and of course an image.

These are great features as it encourage more visits to you website or blog post from twitter. And blogger users should use this feature. Just posting in the blog is not enough; you should also make the sharing or tweeting of the post url easy for visitors or readers.

 

Other social media’s use Open Graph while twitter use Twitter Card. It is simple; consists of a few Meta tags that are extremely easy to implement on any webpage.

It’s easy to add twitter card in blogger too. Now; there are several (seven to be exact) type of twitter cards but you will only need “Summary” or “Summary large image” any for blogger posts.

“Summary” Twitter Card for Blogger

For these you will need to go to template tab of you blogger dashboard and click “Edit HTML”. Back up template and just after <head> paste the following code in the template;

<meta content='summary' name='twitter:card'/>
<meta content='@techinfoknow' name='twitter:site'/>
<meta content='@minhazmuntasir' name='twitter:creator'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.canonicalUrl' name="twitter: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.canonicalUrl' name='twitter:url'/>

Now, in this code you need to;

  • Peplace Image URL with image like you like, perhaps your blog’s logo.
  • Replace @techinfoknow with your blog’s or website’s twitter handle or if there in not a seperate twitter handle for your blog than put your twitter handle.
  • Replace @minhazmuntasir with your (author) twitter handle.
  • Make sure the images are at least 120x120px in size.
  • Make sure the Meta description of the post or blog is properly used.

Save the template. If you want a “Summary large image” twitter card then read below;

“Summary large image” Twitter Card for Blogger

For a “Summary large image” Twitter Card for Blogger the code is exactly same with only one change. Replace the first line of the above code with this one;

<meta name="twitter:card" content="summary_large_image">

But, you will have to be carefull using the “Summary large image” twitter card for blogger. Make sure;

  • “Summary large image” twitter card for blogger the first image of the the post in large enough. Image size should be at least at least 280px in width and at least 150px in height but must be less than 1MB in size.
  • The tittle of the post should be concise and if not it will be automatically shortened at 70 characters when the links are tweeted.
  • Make sure the meta description of the post or blog is properly used.

Validate and Request Domain Approval for Twitter Card for Blogger

 

After you used those codes and saved the template, follow these listed instructions below;

  • Go to twitter card validator page and log in with you account.
  • Just select a card type (summary/summary large image); then go to the “Validate and Apply” tab.
  • Try out different URL from you blog. (Home page; Post page)
  • If you followed instrcutions correctly and it all information will show properly.
  • Click “Request Approval“. In the opened section tittled “Request Domain Approval”; give proper information in the form and Click “Request Approval”.

That’s it you are done; you have successfully implemented twitter card into you blogger blog.

Twitter Card In Case of a Multi-author Blogger Blog

When you start you blogging journey you do start alone but as the journey progresses you will find many. Most blogger blogs have multiple authors to post. And also many blogger blogs allow Guest Posting. But unfortunately if you use the above code(s) you will not be able to satisfy all the authors in your blogger blog. But there is a way. It is not pretty but effective in doing the job.

For this you need to find this line in the code code;

<meta content='@minhazmuntasir' name='twitter:creator'/>

and just delete and save. Or you could replace the entire code with this;

<meta content='summary' name='twitter:card'/>
<meta content='@techinfoknow' name='twitter:site'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.canonicalUrl' name="twitter: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'/>
<meta content='@techinfoknow' name='twitter:creator'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>

Make the required replacement according to above instructions. As you see we did not deleted it; just paste it after <b:else/>. It’s not finished. Now when you are finished writing your post and all thats require is to click “publish”. Wait and In the top-left conner of the post editor click “HTML“. After all the codes there paste this in the end;

<div style='display:none,visibility:none'>
<meta content='@edudotarticles' name='twitter:creator'/>
</div>

But Do not switch back to “Compose” part in the post editor, if you do the code will disappear. As you are done writing and editing; after pasting the code just hit “Publish“. Now it will work.

Bear in mind every time you go back to edit a post in the “Compose” the code will disappear from the post editor and you will have insert it again. Do not encode this code.

Now visit the published post and view the source code (keyboard shortcut:Crtl+U) and look for the code you inserted and also can use the card validator. If you find it then it’s definitely working.

You can change data:blog.canonicalUrl to data:blog.url; if you do not want to add ?m=1, ?m=1 or others in the shared url on twitter. But you can not avoid them if you have turned on the mobile version for your blog in ‘Template‘ section of your blogger dashboard.
Hoping all this information on twitter card use in blogger helped blog.

Do share this; comment to let me know how this is working for you; especially about the multi-author twitter card solution.