SlideShare a Scribd company logo

Social Developers London - Twitter Cards Update

•
•
Angus Fox
Angus Fox

This document provides information about Twitter Cards and how to implement them. Twitter Cards allow websites to attach rich media experiences like images and videos to tweets linking to their content. The summary discusses Twitter Cards types like photo, gallery and product cards. It also outlines the HTML meta tags needed to set up a Twitter Card and get it approved by Twitter. Developers are advised to use HTTPS, provide accessible content across platforms and not auto-play media within cards.

Related slideshows

.Social Mobile App – Be Socialized to Manifold Social Media by Single App
.Social Mobile App – Be Socialized to Manifold Social Media by Single App.Social Mobile App – Be Socialized to Manifold Social Media by Single App
.Social Mobile App – Be Socialized to Manifold Social Media by Single App
 
Accessibility of Twitter
Accessibility of TwitterAccessibility of Twitter
Accessibility of Twitter
 
Tweetdeck tutorial
Tweetdeck tutorial Tweetdeck tutorial
Tweetdeck tutorial
 
1 of 19
Angus Fox Deputy Secretary, Social Developers London Director, Multizone Limited Twitter: @nuxnix This talk draws on information from dev.twitter.com but is in no way endorsed by Twitter Corporation  #justsaying
Twitter Cards help you richly represent your content within Tweets across the web and on mobile devices. This gives users greater context and insight into the URLs shared on Twitter, which in turn allows Twitter to send more engaged traffic to your site or app. Source: dev.twitter.com
The first place to start is at dev.twitter.com Automatic Validation
Twitter cards make it  As a developer, Twitter possible for you to attach cards can... media experiences to  Give you control of how Tweets that link to your your content is displayed content. Simply add a few with Tweets lines of HTML to your  Drive traffic to your site webpages, and users who  Increase the number of people following your Tweet links to your content Twitter accounts through will have a "card" added to content attribution the Tweet that’s visible to all of their followers.
CREATING THE CONTENT AUTOMATIC APPROVAL 1. Choose the type of card  Summary Card to implement.  Default card, including a 2. Add the meta-tags to title, description, thumbnail, a your page and test your nd Twitter account attribution. markup with the preview  Photo Card tool.  A Tweet sized photo card. 3. Run your URLs against  Gallery Card the validator tool to be  A Tweet card geared toward approved. highlighting a collection of photos.
Copy and paste into the <head> of your site. <meta name="twitter:card" content="summary"/> <meta name="twitter:site" content="@multizone"/> <meta name="twitter:creator" content="@nuxnix"/> <meta name="twitter:url" content="http://www.multizone.co.uk/news/blog/155-build- with-twitter-blog-for-the-talk-at-social-developers- london.html"/> <meta name="twitter:title" content="Blog post for the talk at Social Developers London"/> <meta name="twitter:description" content="To build with Twitter, the first place to start is at dev.twitter.com, a walkthrough of Embedded Timelines, Twitter Cards, Embedded Tweets, the Tweet Button and the Follow Button"> <meta name="twitter:image" content="http://photos3.meetupstatic.com/photos/event/c/4/d/ 8/global_167810392.jpeg"/> http://www.multizone.co.uk/news/blog/155-build-with-twitter-blog- for-the-talk-at-social-developers-london.html
Social Developers London - Twitter Cards Update
Account Name Account Twitter Tweet Title Image Author Name Author Twitter Description
The first place to start is at dev.twitter.com Special Validation
 App Card These Card types are not  A Tweet card for yet widely available, providing a profile of an though they should be application. within the next few  Player Card weeks.  A Tweet sized video/audio/media At this time, they player card. require special approval.  Product Card  A Tweet card to better represent product content.
 As a website owner you must opt-in to have cards displayed for your domain, and Twitter must approve the integration. To be considered, please follow these steps:  Read the documentation and add the appropriate markup to your domain.  Test your markup with thepreview tool  Once the markup is implemented, fill out the form and include a link to a representative page containing markup “As we roll out this new feature to users and publishers, we are looking for sites with great content and those that drive active discussion and activity on Twitter. Expect a few weeks for turn- around time. You will receive an email message with the confirmation or rejection notice.”
Thank you for applying to participate in Twitter Cards. We will review your application and get back to you in 5- 10 business days.
Social Developers London - Twitter Cards Update
Date: Thu, 14 Mar 2013 From: Twitter Card Support <twitter-card-support@twitter.com> Subject: Twitter Cards -Your submission has been approved! Hello multizone, Your request to be included in Twitter Cards has been approved. We've activated Summary and Photo cards for www.multizone.co.uk. If you would like to have more domains approved, please fill out the form at https://dev.twitter.com/form/participate-twitter-cards again. Thanks, The Twitter Cards Team (This is an unmonitored email account. Please direct questions to the following support thread: https://dev.twitter.com/discussions/cards/help)
 Only available for the iOS and Android  twitter:card ▪ Must be set to a value of "app"  twitter:description ▪ You can use this as a more concise description than what you may have on the app store. This field has a maximum of 200 characters.  twitter:app:id:iphone ▪ String value, and should be the numeric representation of your app ID in the App Store (.i.e. "307234931").  twitter:app:id:ipad ▪ String value, should be the numeric representation of your app ID in the App Store (.i.e. "307234931").  twitter:app:id:googleplay ▪ String value, and should be the numeric representation of your app ID in the App Store (.i.e. "307234931").
 Twitter for iPhone and Android as well as twitter.com and mobile.twitter.com  Platform capabilities mean player cards work differently on each client
DO: DO NOT:  Build a responsive and equivalent experience that  Generate mixed content browser works within all Twitter Clients. Cards that do not warnings. All Twitter clients use work in all Twitter clients listed above will not be HTTPS, and you must not break the approved. lock of the browser.  Test your experience on the native browsers of Twitter Clients before submitting for approval.  Automatically play content.  Provide a raw stream to video and audio content  Require users to sign-in to your when possible. experience.  Use HTTPS for your iframe, stream, and all assets  Commingle sharing features from within your card. other networks inside your player.  Use wmode=opaque if utilizing Flash for the  Set twitter:player to point directly at twitter.com experience, so that the player renders a .swf movie file. at the correct z-index.  Link to a HTML page which falls back to mobile friendly content in case Flash is not available.
 The product card is a great way to better represent retail items on Twitter, and to drive sales. This Card type is designed to showcase your products via an image, a description, and allow you to highlight two other key details about your product.  These fields are strings and can be used to show the price, list availability, list sizes, etc. This will require adding some new markup tags to your pages, which we will cover below.
Presentations are available from Slideshare Slides http://www.slideshare.net/nuxnix A twitter card enabled tweet https://twitter.com/multizone/statu s/316240613450330114

More Related Content

Social Developers London - Twitter Cards Update

  • 1. Angus Fox Deputy Secretary, Social Developers London Director, Multizone Limited Twitter: @nuxnix This talk draws on information from dev.twitter.com but is in no way endorsed by Twitter Corporation  #justsaying
  • 2. Twitter Cards help you richly represent your content within Tweets across the web and on mobile devices. This gives users greater context and insight into the URLs shared on Twitter, which in turn allows Twitter to send more engaged traffic to your site or app. Source: dev.twitter.com
  • 3. The first place to start is at dev.twitter.com Automatic Validation
  • 4. Twitter cards make it  As a developer, Twitter possible for you to attach cards can... media experiences to  Give you control of how Tweets that link to your your content is displayed content. Simply add a few with Tweets lines of HTML to your  Drive traffic to your site webpages, and users who  Increase the number of people following your Tweet links to your content Twitter accounts through will have a "card" added to content attribution the Tweet that’s visible to all of their followers.
  • 5. CREATING THE CONTENT AUTOMATIC APPROVAL 1. Choose the type of card  Summary Card to implement.  Default card, including a 2. Add the meta-tags to title, description, thumbnail, a your page and test your nd Twitter account attribution. markup with the preview  Photo Card tool.  A Tweet sized photo card. 3. Run your URLs against  Gallery Card the validator tool to be  A Tweet card geared toward approved. highlighting a collection of photos.
  • 6. Copy and paste into the <head> of your site. <meta name="twitter:card" content="summary"/> <meta name="twitter:site" content="@multizone"/> <meta name="twitter:creator" content="@nuxnix"/> <meta name="twitter:url" content="http://www.multizone.co.uk/news/blog/155-build- with-twitter-blog-for-the-talk-at-social-developers- london.html"/> <meta name="twitter:title" content="Blog post for the talk at Social Developers London"/> <meta name="twitter:description" content="To build with Twitter, the first place to start is at dev.twitter.com, a walkthrough of Embedded Timelines, Twitter Cards, Embedded Tweets, the Tweet Button and the Follow Button"> <meta name="twitter:image" content="http://photos3.meetupstatic.com/photos/event/c/4/d/ 8/global_167810392.jpeg"/> http://www.multizone.co.uk/news/blog/155-build-with-twitter-blog- for-the-talk-at-social-developers-london.html
  • 8. Account Name Account Twitter Tweet Title Image Author Name Author Twitter Description
  • 9. The first place to start is at dev.twitter.com Special Validation
  • 10. App Card These Card types are not  A Tweet card for yet widely available, providing a profile of an though they should be application. within the next few  Player Card weeks.  A Tweet sized video/audio/media At this time, they player card. require special approval.  Product Card  A Tweet card to better represent product content.
  • 11. As a website owner you must opt-in to have cards displayed for your domain, and Twitter must approve the integration. To be considered, please follow these steps:  Read the documentation and add the appropriate markup to your domain.  Test your markup with thepreview tool  Once the markup is implemented, fill out the form and include a link to a representative page containing markup “As we roll out this new feature to users and publishers, we are looking for sites with great content and those that drive active discussion and activity on Twitter. Expect a few weeks for turn- around time. You will receive an email message with the confirmation or rejection notice.”
  • 12. Thank you for applying to participate in Twitter Cards. We will review your application and get back to you in 5- 10 business days.
  • 14. Date: Thu, 14 Mar 2013 From: Twitter Card Support <twitter-card-support@twitter.com> Subject: Twitter Cards -Your submission has been approved! Hello multizone, Your request to be included in Twitter Cards has been approved. We've activated Summary and Photo cards for www.multizone.co.uk. If you would like to have more domains approved, please fill out the form at https://dev.twitter.com/form/participate-twitter-cards again. Thanks, The Twitter Cards Team (This is an unmonitored email account. Please direct questions to the following support thread: https://dev.twitter.com/discussions/cards/help)
  • 15. Only available for the iOS and Android  twitter:card ▪ Must be set to a value of "app"  twitter:description ▪ You can use this as a more concise description than what you may have on the app store. This field has a maximum of 200 characters.  twitter:app:id:iphone ▪ String value, and should be the numeric representation of your app ID in the App Store (.i.e. "307234931").  twitter:app:id:ipad ▪ String value, should be the numeric representation of your app ID in the App Store (.i.e. "307234931").  twitter:app:id:googleplay ▪ String value, and should be the numeric representation of your app ID in the App Store (.i.e. "307234931").
  • 16. Twitter for iPhone and Android as well as twitter.com and mobile.twitter.com  Platform capabilities mean player cards work differently on each client
  • 17. DO: DO NOT:  Build a responsive and equivalent experience that  Generate mixed content browser works within all Twitter Clients. Cards that do not warnings. All Twitter clients use work in all Twitter clients listed above will not be HTTPS, and you must not break the approved. lock of the browser.  Test your experience on the native browsers of Twitter Clients before submitting for approval.  Automatically play content.  Provide a raw stream to video and audio content  Require users to sign-in to your when possible. experience.  Use HTTPS for your iframe, stream, and all assets  Commingle sharing features from within your card. other networks inside your player.  Use wmode=opaque if utilizing Flash for the  Set twitter:player to point directly at twitter.com experience, so that the player renders a .swf movie file. at the correct z-index.  Link to a HTML page which falls back to mobile friendly content in case Flash is not available.
  • 18. The product card is a great way to better represent retail items on Twitter, and to drive sales. This Card type is designed to showcase your products via an image, a description, and allow you to highlight two other key details about your product.  These fields are strings and can be used to show the price, list availability, list sizes, etc. This will require adding some new markup tags to your pages, which we will cover below.
  • 19. Presentations are available from Slideshare Slides http://www.slideshare.net/nuxnix A twitter card enabled tweet https://twitter.com/multizone/statu s/316240613450330114

Editor's Notes

  1. Simply add a few lines of HTML to your webpages, and users who Tweet links to your content will have a &quot;card&quot; added to the Tweet that’s visible to all of their followers.