USING TWITTER CARDS AND DISCOVER TAB
Advanced Twitter Marketing for the Code Lover in You!
Twitter.com introduced the new Discover and Connect tabs back in May, it essentially “socialized” the platform more efficiently by advanced options. The Discover tab allows users to view tweets and stories from their connections in one centralized area while the connect tab shows interactions and mentions of your twitter user name.
Then, in an official blog post published on September 28, Twitter announced it had reworked the Discover tab yet again. According to the post, “When you visit the Discover tab on Twitter.com, you’ll see a continuous stream of tweets, which automatically expand to show you the most relevant stories and most engaging photos.” This gets into the second part of today’s post which deals with Twitter Cards and how to get rich media content into your tweets using HTML code on your website.
The Discover tab is essentially “What’s happening now, tailored for you.” and if you get a handle on Twitter Cards you could be serving up photos, videos and relevant tweets to followers who are generally interested in your posts. This is a major leap forward in Advanced Twitter Marketing so lets dive right in to Twitter Cards:
TWITTER CARDS
How to Post Twitter Cards From Your Website:
If you create a little extra HTML code on your website, Twitter can post your tweets with a media rich content including Titles, Description, Pictures and yes even Video. Even if you are viewing them with a Tablet or a Mobile device the Twitter developers have given us the code to Tweet out amazing content full of pics and vids!
To display Twitter Cards with Media Rich Content in your Tweets add this HTML code to the webpage your tweeting about…
Specify the type of card for your content by adding the following HTML to the HEAD section of your page:
Example
meta name="twitter:card" content="summary"[/vc_column_text][vc_column_text css=”.vc_custom_1471351926607{margin-bottom: 20px !important;}”]These are the different Card Properties you can use in your HTML code, utilizing the Meta name Tag:
Card Property Description
twitter:card The card type, which will be one of “summary”, “photo”, or “player”.
twitter:url Canonical URL of the card content.
twitter:title The title of your content as it should appear in the card.
twitter:description A description of the content in a maximum of 200 characters.
twitter:image A URL to the image representing the content.
Card and Content Attribution (Not Required-Additional)
twitter:site @username for the website used in the card footer.
twitter:site:id Same as twitter:site, but the website’s Twitter user ID instead. Note that user ids never change, while @usernames can be changed by the user
twitter:creator @username for the content creator / author.
twitter:creator:id Same as twitter:creator, but the Twitter user’s ID
Values Accepted for meta name “twitter:card”
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.
Example of Twitter Card “Summary” Code on Website:
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"[/vc_column_text][vc_column_text css=”.vc_custom_1471352339200{margin-bottom: 20px !important;}”]If you are using the Twitter Card “Photo” attribute you can have your Photo centered in the middle of the tweet as the focus.
This is the Resulting Twitter Card:
Example of the Twitter Card “Photo” Code on Webstie:
meta name="twitter:card" content="photo" meta name="twitter:site" content="@examplephotosite" meta name="twitter:creator" content="@sippey" meta name="twitter:url" content="http://example.com/photo/a/" meta name="twitter:title" content="Good Morning, San Francisco" meta name="twitter:description" content="Great view this morning" meta name="twitter:image" content="http://example.com/photo/a/image.jpg" meta name="twitter:image:width" content="610" meta name="twitter:image:height" content="610"
This is the Resulting Twitter Card:
Twitter Card (Type:Photo)[/vc_column_text][vc_column_text css=”.vc_custom_1530883672813{margin-bottom: 20px !important;}”]If you are using the Twitter Card “Video” attribute you can have Video embedded right into your tweets…
There are a few more tags that utilized using this Twitter Card option and they are as follows…
twitter:player HTTPS URL to iframe player. This must be a HTTPS URL which does not generate mixed content warnings in a web browser.
twitter:player:width Width of IFRAME specified in twitter:player in pixels
twitter:player:height Height of IFRAME specified in twitter:player in pixels
twitter:image Image to be displayed in place of the player on platforms that don’t support iframes or inline players. You should make this image the same dimensions as your player
(For Mobile & Tablets)
twitter:player:stream URL to raw stream that will be rendered in Twitter’s mobile applications directly. If provided, the stream must be delivered in the MPEG-4 container format (the .mp4 extension). The container can store a mix of audio and video with the following codecs:
Video: H.264, Baseline Profile (BP), Level 3.0, up to 640 x 480 at 30 fps.
Audio: AAC, Low Complexity Profile (LC)
twitter:player:stream:content_type The MIME type/subtype combination that describes the content contained in twitter:player:stream. Takes the form specified in RFC 6381. Currently supported content_type values are those defined in RFC 4337 (MIME Type Registration for MP4).
Example of a simple “Video” Twitter Card, here is the Code for Website:
meta name="twitter:card" content="player" meta name="twitter:site" content="@examplevideosite" meta name="twitter:url" content="http://example.com/watch/a" meta name="twitter:title" content="Example Video" meta name="twitter:description" content="This is a sample video from example.com" meta name="twitter:image" content="http://example.com/keyframe/a.jpg" meta name="twitter:player" content="https://example.com/embed/a" meta name="twitter:player:width" content="435" meta name="twitter:player:height" content="251"
This is the Resulting Twitter Card:
Twitter Card (Type:Video)
Example of a “Video” Twitter Card also providing a URL to a raw stream to be rendered in Twitter’s mobile and tablet applications
meta name="twitter:card" content="player" meta name="twitter:site" content="@foobar" meta name="twitter:url" content="http://example.com/watch/a" meta name="twitter:title" content="Example Video" meta name="twitter:description" content="This is a sample video from example.com" meta name="twitter:image" content="http://example.com/keyframe/a.jpg" meta name="twitter:player" content="https://example.com/embed/a" meta name="twitter:player:width" content="435" meta name="twitter:player:height" content="251" meta name="twitter:player:stream" content="https://example.com/raw-stream/a.mp4" meta name="twitter:player:stream:content_type" content="video/mp4; codecs="avc1.42E01E1, mpa.40.2""
This is the Resulting Twitter Card:
Final Notes & Further Reading:
Was this information helpful to your internet marketing efforts?
Twitter Card (Type: Video Viewed on Tablet or Mobile)
Remember Twitter bot needs to access these files so you would have to configure your robots.txt file to allow for twitterbot to check your code:
Example of Robots.txt
User-agent: Twitterbot
Allow: *
If you want to restrict certian areas you can use this code (this will only allow twitterbot to crawl the images and archives folder)
User-agent: Twitterbot
Disallow: *
Allow: /images
Allow: /archives
Further Reading:
Twitter Cards Development for Web
Twitter Card Preview Tool[/vc_column_text][stm_post_bottom][stm_post_about_author][stm_post_comments][/vc_column][vc_column width=”1/4″ offset=”vc_hidden-sm vc_hidden-xs”][stm_sidebar sidebar=”527″][/vc_column][/vc_row]
