Twitter Cards Integration Guide

How To Integrate Twitter Cards In WordPress And Blogger Blog

Sometime you have to say so many thing but you have very less word, same can be happen in case with Twitter. Twitter gives anyone 140 character for status update. If you own a website or blog then you may be using Twitter to share latest article. By default twitter allows you to add 140 character and link in status update, it does not shows the link preview like other social networking site Facebook, Google Plus, LinkedIn shows.

Twitter Cards Integration Guide

Now you can Remove Twitter 140 character limitation with Twitter Cards and your twitter updates will look cool and more engaging. Twitter cards helps you increase twitter follower and at the same time encourage others to click the link.

Benefits of using Twitter Cards

When you tweet a link and if Twitter Cards is enabled for that website then other than 140 character and article link, Twitter will give you option to view summary. Clicking on view summary will show you the link preview with post title, summary, and thumbnail of your post content. I have recently enabled the Twitter Card for Coding Byte and now all my tweets contains link preview. Check one of my tweets below
Integrate Twitter Cards In WordPress and Blogger Blog

Whenever anybody will tweet your account then your twitter account will be mentioned in their tweet and it helps a lot in increasing twitter followers. For example our twitter handle is @codingbyte , so if anyone will tweet our blog link then our handle @codingbyte will be mentioned, so anyone who will see the link check mentioned twitter handle and you may get another follower.

How to Add Twitter Cards in WordPress Blog

The easiest way to add Twitter Cards in your WordPress Blog is to use JM Twitter Cards plugin. In this blog also i am using this plugin, it’s very easy to use and straightforward. To install it go to Plugin menu in wordpress dashboard and  click on Add New and search for JM Twitter Cards, install and activate it. After activation it requires your twitter account information for generating meta tags.

Integrate Twitter Cards In WordPress

Enter your twitter account information in the JM Twitter Cards plugin and click on save.

Now you have done the setting on your wordpress blog, but for link preview to work you need to Validate and Request Domain Approval for Twitter Card and to do that just click on validator button in above picture. Select the type of card you want for your blog, in my case i have selected Summary large image Twitter Card . Now click on validate and apply tab and enter any blog url and click go. For me this is the output for my post 30 Most Frequently Used Linux Commands With Examples
Integrate Twitter Cards in WordPress

As i said i have already applied Twitter Cards for my domain so validator is showing message approved and everything is in green. For you the message will be not approved, now to enable twitter cards for wordpress click on request approval button. If everything will be fine then after sometime you will get confirmation message for appproval. Now whenever you tweet any link a post summary will appear in your tweet.

How to Add Twitter Cards in Blogger Blog

If you are using Google blogger blog then it will not be easy as Setting up Twitter Cards for WordPress because blogger does not support plugins like wordpress.  To add Twitter Cards in blogger you have to add few lines of code in your blogger template manually.  Before editing template remember to backup it first, then click on edit html and add below code just after HEAD opening tag.

<meta content='summary_large_image' name='twitter:card'/>
<meta content='@codingbyte' name='twitter:creator'/>
<meta content='@codingbyte' 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'/>
<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 cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<meta expr:content='data:blog.Url' name='twitter:url'/>

Above code will Add Summary large image Twitter Card for Blogger blog. Before adding the code remember to replace codingbyte twitter handle with yours.

In next step you need to go twitter validator and do the same step which i have explained for wordpress. After confirmation, post summary will be enable for your blogger blog.

So this  is all about Setting Twitter Cards for WordPress and Blogger Blog, i hope you liked the post. Please give your valuable feedaback and suggestion in the comments. Also please like our facebook page and follow us on Twitter for updates.


Leave a Reply

Your email address will not be published. Required fields are marked *