Friday, 22 August 2014

How to Add Twitter Cards in Blogger and WordPress

Add Twitter cards and get approved in blogger and WordPress. Learn the significance of twitter cards for social presence of your blog.

Add Twitter Cards in blogger and Wordpress



Twitter Cards can be understand easily if we compare these codes with Schema code that we add to optimized for search engines. Twitter cards are some piece of code that gives opportunity for blogger to share their article more effectively and efficiently since these tweets included with image and article snippets other than 140 characters that twitter provides.

You can understand twitter cards by below example of tweets, after optimization of cards in template code, “View summary” options are added automatically in your tweets you share on twitter account. These cards allow readers to read about article within the twitter platform on beforehand.

Add Twitter Cards in blogger and Wordpress

This card allows user to share image and snippets in their tweets as well. This optimization increase you twitter traffic significantly. And getting approved your blog is also quite easy, to make sure to get approved without any hitch you should apply twitter cards in most of your popular article.

This article is divided in three parts, first include the selection of cards and applying cards in blogger. Second part includes applying in websites and last part includes validating and getting approved.

1: Choosing Twitter Cards and applying in blogger.


There are seven different types of cards or you can say seven options are available for optimization, though it is recommended for blogger using BlogSpot to use “summary_large_image” card in your blog and this is the card I will be using for my example. Though you can choose any cards depending upon your content you publish and they are as follows.(link)

  • Summary Card: Default Card, including a title, description, thumbnail, and Twitter account attribution.
  • Summary Card with Large Image: Similar to a Summary Card, but with a prominently featured image.
  • Photo Card: A Card with a photo only.
  • Gallery Card: A Card highlighting a collection of four photos.
  • App Card: A Card to detail a mobile app with direct download.
  • Player Card: A Card to provide video/audio/media.
  • Product Card: A Card optimized for product information.

First search for <head> and paste the following code below it. I Have enclosed this cards in “item” condition so that it run in post pages only and that what is required.

Make sure to change “@BlogEutectics” with your twitter ID. In “site” add your website twitter account ID and in place of “creator” add your personal twitter account ID. Since I use “@BlogEutectics” ID for personal as well as for my blog therefore I have used the same for both.

<b:if cond='data:blog.pageType == "item"'>
<meta content='summary_large_image' name='twitter:card'/>
<b:else/>
<meta content='summary' name='twitter:card'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<b:else/>
<meta expr:content='data:blog.title' name='twitter:title'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<meta content='@BlogEutectics' name='twitter:site'/>
<meta content='@BlogEutectics' name='twitter:creator'/>

<b:if cond='data:blog.pageType == "item"'>
<meta content='435' name='twitter:image:width'/>
<meta content='375' name='twitter:image:height'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' name='twitter:image:src'/>
<b:else/>
<meta expr:content='data:blog.blogspotFaviconUrl' name='twitter:image:src'/>
</b:if>
</b:if>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>

For more information you can read their docs file here. Since we have “expr” in content of Meta tag, the respective data will get added automatically.

Also make sure in your blogger account your search Meta tag options are enabled and you should write description on every post whenever you post a new article in search descriptions. Also First image you place in a blog post is appeared in your tweets summary snippet.

Enabled Meta Tag in blogger

add search description in blogger

Adding Twitter Cards in website or WordPress.


Since there are no official WordPress twitter cards plugin therefore you have to add manually in all your new posts. Add the following code inside in head after adding some content respectively.
<meta content='summary_large_image' name='twitter:card'/>
<meta content='your-website' name='twitter:domain'/>
<meta content='@twitterID' name='twitter:site'/>
<meta content='@twitterID' name='twitter:creator'/>
<meta content='Your article title' name='twitter:title'/>
<meta content='URL of image' name='twitter:image:src'/>
<meta content='URL of article' name='twitter:url'/>
<meta content='Description of article' name='twitter:description'/>

Since all the meta added manually in hosted blogger or wordpress, this user have ability to add different cards types including videos and app review (for more information click here.)

Plugins that may works (choose according to reviews)


Validating Twitter Cards:


It is Necessary to validate your website or blog your codes before it started appearing in your tweets. Go to this link and validate by adding your optimized article URL as shown in image.

Twitter cards validator

Though I have seen some complaining against the validating time required by twitter to validate your website, but in my case everything went very smooth and got notified in email address of successful process instantly within seconds.

Hope this article helps you to add this small code in your blog. If face any problem just comment.
We are always here for help.

8 Discussion

  1. Hi,

    Thank you for the code, it worked a treat. I do have one question; how do I go about creating a card for individual blog pages?

    My cards work for posts, but I have a seperate page which I'd like to worth with cards.

    Kind regards,
    BombVapes

    ReplyDelete
  2. as many as i visit this blog i can find some fantastic information . Thanks for sharing knowledge . best wishes to be guided
    Jobs
    nasihnetwork

    ReplyDelete
  3. as many as i visit this blog i can find some fantastic information . Thanks for sharing knowledge . best wishes to be guided
    Jobs
    nasihnetwork

    ReplyDelete
  4. Your method for adding wonderful thanks for share it display twitter feed on website.

    ReplyDelete

Note : All comments will be moderated. Do Not Spam.