Friday, 2 November 2012

How To Implement Twitter Cards

With the shift of the web towards the semantic web and the focus being on data connectivity and its    co relevant display. The web is giving priority to Rich Snippets, HTML 5, microformats and schemas. 


Twitter introduced ‘Twitter Cards’ in June 2012. Twitter displays a summary and a thumbnail image of the post shared on Twitter if the site has integrated ‘Twitter Cards’ by adding the necessary meta data.


There are 3 card types that can be attached to Tweets, each of which has a beautiful consumption experience built for Twitter's web and mobile clients: 

· summary: The default card, which includes a title, description, thumbnail image, and Twitter account attribution. 

· photo: A Tweet sized photo card. 

· player: A Tweet sized video/audio/media player card. 


The summary card can be used for many kinds of web content, from blog posts and news articles, to products and restaurants. 

The card is designed to give the reader a preview of the content before clicking through to your website just like a snippet.


You’ll notice that this card makes use of all of the properties described in the previous section: URL, title, description, and image.


































Card Property

Description

Required

twitter:card

Should be set to a value of "summary"

No. If no twitter:card value is set, we will default to a summary card.

twitter:url

Canonical URL of the card content.

Yes

twitter:title

Title should be concise and will be truncated at 70 characters.

Yes

twitter:description

A description that concisely summarizes the content of the page, as appropriate for presentation within a Tweet. Do not re-use the title text as the description, or use this field to describe the general services provided by the website. Description text will be truncated at the word to 200 characters.

Yes

twitter:image

URL to a unique image representing the content of the page. Do not use a generic image such as your website logo, author photo, or other image that spans multiple pages. Images larger than 120x120px will be resized and cropped square based on longest dimension. Images smaller than 60x60px will not be shown.

No



 If any required fields are omitted, the card may not be shown in the Tweet. Note that the card displays clear attribution for both the website and content creator. Here's the full HTML for the card above: 

<meta name="twitter:card" content="summary"> 
<meta name="twitter:site" content="@nytimes"> 
<meta name="twitter:creator" content="@SarahMaslinNir"> 
<meta name="twitter:url" content="http://www.nytimes.com/2012/02/19/arts/music/amid-police-presence-fans-congregate-for-whitney-houstons-funeral-in-newark.html"> 
<meta name="twitter:title" content="Parade of Fans for Houston’s Funeral"> 
<meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here."> 
<meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg"> 


After this code is added the expanded tweet will appear as follows on Twitter when that particular link is shared: 


tweet summary.png


 


 


 


 


 


 


This kind of  code can be easily added to WordPress for each blogpost . 



In order to add this code for each blogpost in Blogger, follow the following instructions: 

1. Login to Blogger account. 

2. Navigate to Design > Edit HTML 

3. Click on Download Full Template for your security purpose. 

4. Check the Expand Widget Templates box then.. 

5. Add the relevant code in the <head> section of your Blogger template. Enter the following code in the head section i.e above</head>  for every blogpost you want the summary to be displayed.

6. Click on the Save Template button 

7. To check your description you can use the view source in your browser once you have navigated to the post page 



Twitter cards can...



  • Give you control of how your content is displayed with Tweets

  • Drive traffic to your site

  • Increase the number of people following your Twitter accounts through content attribution


Three simple steps to follow ….


2 comments:

  1. Thank you very much for very informative and useful article about Twitter cards.Twitter cards are essentially rich snippets for tweets and I predict they’re going to be important for making your content more portable.


    Custom PHP Development

    ReplyDelete
  2. Bharati Ahuja your post is really informative, i was completely unaware about the twitter cards before read your post, in-spite of it i am regular user of twitter. I think twitter cards are very important for a successful twitter campaign for any business.

    ReplyDelete