Social Developers London - Twitter Cards UpdatePresentation Transcript
Angus FoxDeputy Secretary, Social Developers LondonDirector, Multizone LimitedTwitter: @nuxnix This talk draws on information from dev.twitter.com but is in no way endorsed by Twitter Corporation #justsaying
Twitter Cards help yourichly represent yourcontent within Tweetsacross the web and onmobile devices. This givesusers greater context andinsight into the URLsshared on Twitter, which inturn allows Twitter to sendmore engaged traffic toyour 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, Twitterpossible for you to attach cards can...media experiences to Give you control of howTweets that link to your your content is displayedcontent. Simply add a few with Tweetslines of HTML to your Drive traffic to your sitewebpages, and users who Increase the number of people following yourTweet links to your content Twitter accounts throughwill have a "card" added to content attributionthe Tweet that’s visible toall of their followers.
CREATING THE CONTENT AUTOMATIC APPROVAL1. Choose the type of card Summary Card to implement. Default card, including a2. 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 talkat Social Developers London"/><meta name="twitter:description" content="To build withTwitter, the first place to start is at dev.twitter.com, awalkthrough of Embedded Timelines, Twitter Cards, EmbeddedTweets, 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
Account NameAccount Twitter Tweet Title Image Author NameAuthor 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 arelooking for sites with great content and those that drive activediscussion and activity on Twitter. Expect a few weeks for turn-around time. You will receive an email message with the confirmationor rejection notice.”
Thank you for applying to participatein Twitter Cards. We will review yourapplication and get back to you in 5-10 business days.
Date: Thu, 14 Mar 2013From: Twitter Card Support <email@example.com>Subject: Twitter Cards -Your submission has been approved!Hello multizone,Your request to be included in Twitter Cards has been approved.Weve activated Summary and Photo cards for www.multizone.co.uk.If you would like to have more domains approved, please fill out the format https://dev.twitter.com/form/participate-twitter-cards again.Thanks, The Twitter Cards Team(This is an unmonitored email account. Please direct questions tothe 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 SlideshareSlideshttp://www.slideshare.net/nuxnixA twitter card enabled tweethttps://twitter.com/multizone/status/316240613450330114