Add Twitter Cards in Blogger Blogs [100% Working]

Add Twitter Cards in Blogger BlogsThe 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.

That’s where twitter card come in. It allows to show more information like; post title and URL, a summary or description, twitter handles of author and website and of course an image.

These are great features as it encourages more visits to your 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 uses Twitter Card. It is simple; consists of a few Meta tags that are extremely easy to implement on any web page.

It’s easy to add twitter card in blogger too. Now; there are several (seven to be exact) types 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”. Backup template and just after <head> paste the following code in the template;

<meta content='summary' name='twitter:card'/>
<meta content='@ihowpc' name='twitter:site'/>
<meta content='@iedunote' 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;

  • Replace image URL with the an image like you like, perhaps your blog’s logo.
  • Replace @ihowpcwith your blog’s or website’s twitter handle or if there in not a separate twitter handle for your blog then put your twitter handle.
  • Replace @iedunotewith 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 careful using the “Summary large image” twitter card for blogger. Make sure;

  • “Summary large image” twitter card for the blogger the first image of 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

Add Twitter Cards in Blogger Blogs

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

  • Go to twitter card validator page and log in with your account.
  • Just select a card type (summary/summary large image); then go to the “Validate and Apply” tab.
  • Try out different URL from your blog. (Home page; Post page)
  • If you followed instructions correctly and it all information will show properly.
  • Click “Request Approval“. In the opened section titled “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 your 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;

<meta content='@iedunote' 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='@ihowpc' 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 delete it; just paste it after, <b:else/> It’s not finished. Now when you are finished writing your post and all that require is to click “publish”. Wait and In the top-left corner 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 to 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.

MoreBlogger /