smbtv presentation
DESCRIPTION
A presentation on integration social media into an existing site and using social media to market to end-users.TRANSCRIPT
Social MediaMatthew Gerrior @MatthewGerriorLead Software Engineer @greanetree
● Allows users to share your content or tell their friends about your content without having to navigate away from your site
● Include your Twitter account in the Tweet using the "via" parameter, driving people to visit your Twitter account
● Recommend up to two additional Twitter accounts that the user may be interested in following
TwitterTweet Button
TwitterTweet Button
TwitterTweet Button
Make your own: http://bit.ly/12Noi1R
● Allows you to embed a specific Tweet in any given page, maintaining the Twitter look and feel if desired
● Provides the same rich media experience that users would find in their Timeline
● Allows users to follow the Tweeter, reply, retweet, and favorite the Tweet all without leaving your site
TwitterEmbedded Tweets
TwitterEmbedded Tweets
Additional Information:http://bit.ly/YZWl2q
● Embed a timeline of your own tweets, or those of any public user
● Embed a timeline of your favorite tweets, or the favorite tweets of any public user
● Embed a timeline of tweets from a list of users (great for a site that wants to promote many local businesses)
● Embed a timeline for hashtags or other search results
TwitterEmbedded Timelines
TwitterEmbedded Timelines
Create your own:http://bit.ly/10GcYH1
Additional Information / Customization:http://bit.ly/17n4d3q
Twitter Cards● Allow rich media from your website to be
embedded directly in Tweets● Approval required for specific cards● Implemented by adding metadata to the
page markup.
Twitter CardsWhat is metadata?
Metadata is data about data.
Example:<meta name="keywords" content="HTML,CSS,XML,JavaScript">
Twitter Cards● Summary Card● Large Image Summary Card● Photo Card● Gallery Card● App Card● Player Card● Product Card
Twitter Cards
● Great for Blog Posts and Articles● Allows users to preview your content without
having to leave their timeline● Allows for site and content creator attribution
within the Tweet, increasing number of users viewing your Twitter Account
Summary Card
Twitter CardsSummary Card
Desktop Mobile
Example Metadata
Additional Information: http://bit.ly/ZAoHVR
Twitter CardsSummary Card
<!-- Card Type (optional for summary cards) --><meta name="twitter:card" content="summary"><!-- Twitter Account for Website (optional) --><meta name="twitter:site" content="@nytimes"><!-- Twitter Account for Content Creator (optional) --><meta name="twitter:creator" content="@SarahMaslinNir"><!-- Title (required) --><meta name="twitter:title" content="Parade of Fans for Houston’s Funeral"><!-- Description (required) --><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."><!-- Image (optional) --><meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-article.jpg">
● Similar to Summary Card, but provides more emphasis on the image
● Requirements are the same as the Summary Card, except images should be at least 280px wide and 150px tall
Twitter CardsLarge Image Summary Card
Twitter CardsLarge Image Summary Card
Desktop Mobile
Example Metadata:
Twitter CardsLarge Image Summary Card
<!-- Card Type (required) --><meta name="twitter:card" content="summary_large_image"><!-- Title (required) --><meta name="twitter:title" content="Parade of Fans for Houston’s Funeral"><!-- Description (required) --><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."><!-- Image (optional) --><meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">
Additional Information: http://bit.ly/ZTx3Cv
● Use when your image should be the center of attention
● Useful for image sharing sites such as Flickr and Instagram
● Useful for photography studios or other businesses where the main content is photographs
Twitter CardsPhoto Card
Twitter CardsPhoto CardDesktop Mobile
Example Metadata:<!-- Card Type (required) --><meta name="twitter:card" content="photo"><!-- Title (optional) --><meta name="twitter:title" content="Good Morning, San Francisco"><!-- Description (optional) --><meta name="twitter:description" content="Great view this morning"><!-- Image (required) --><meta name="twitter:image" content="http://example.com/photo/a/image.jpg"><!-- Image Width (recommended) --><meta name="twitter:image:width" content="610"><!-- Image Height (recommended) --><meta name="twitter:image:height" content="610">
Additional Information: http://bit.ly/14ljALK
Twitter CardsPhoto Card
● Similar to Photo Card but allows you to display four photos in the Tweet
● Great for Blog Posts or Articles that revolve around a group of photos
Twitter CardsGallery Card
Twitter CardsGallery CardDesktop Mobile
Example Metadata:
Twitter CardsGallery Card
<!-- Card Type (required) --><meta name="twitter:card" content="gallery"><!-- Title (optional) --><meta name="twitter:title" content="Hack Week"><!-- Description (optional) --><meta name="twitter:description" content="A look at Hack Week at Twitter HQ (@twoffice) and all of our offices around the world."><!-- First Photo in Gallery (required) --><meta name="twitter:image0" content="http://farm9.staticflickr.com/8236/8383176221_44f50afaba_b.jpg"><!-- Second Photo in Gallery (required) --><meta name="twitter:image1" content="http://farm9.staticflickr.com/8186/8393798794_3a3d27a621_c.jpg"><!-- Third Photo in Gallery (required) --><meta name="twitter:image2" content="http://farm9.staticflickr.com/8189/8384260164_511782a797_c.jpg"><!-- Fourth Photo in Gallery (required) --><meta name="twitter:image3" content="http://farm9.staticflickr.com/8188/8383177259_f927f13d81_b.jpg">Additional Information: http://bit.ly/120pOtJ
● Use to embed mobile app descriptions directly in user Timelines
● Allow users to spread the word about your application, driving the number of installs
● Gathers all pertinent information ( # of reviews, # of stars, etc) from app stores for you
Twitter CardsApp Card
Twitter CardsApp Card
Example Metadata:
Twitter CardsApp Card
<!-- Card Type (required) --><meta name="twitter:card" content="app"><!-- Additional Description (optional) --><meta name="twitter:description" content="The perfect for grabbing a nearby taxi. Try it by downloading today."><!-- App ID for iPhone App (required)--><meta name="twitter:app:id:iphone" content="306934135"><!-- Appi ID for iPad App (required, can be same as iPhone App) --><meta name="twitter:app:id:ipad" content="306934135"><!-- App ID for Google Play (required) --><meta name="twitter:app:id:googleplay" content="com.example.app">
Additional Information: http://bit.ly/182CIL5
● Allow potential customers to view your products directly in their timeline
● Increased word of mouth about your products
● Allow your users to advertise for you
Twitter CardsProduct Card
Twitter CardsProduct CardDesktop Mobile
Example Metadata:
Twitter CardsProduct Card
<!-- Card Type (required) --><meta name="twitter:card" content="product"><!-- Title (required) --><meta name="twitter:title" content="Logo Mug"><!-- Description (required) --><meta name="twitter:description" content="The perfect pick-me-up. Enjoy your favorite blend with this coffee mug featuring the Twitter logo. Make every work day good to the lastdrop."><!-- Image (required) --><meta name="twitter:image" content="https://twitter.siglercompanies.com/graphics/00000001/mug-new.jpg"><!-- Value of First Additional Detail (required) --><meta name="twitter:data1" content="$3"><!-- Label of First Additional Detail (required) --><meta name="twitter:label1" content="Price"><!-- Value of Second Additional Detail (required) --><meta name="twitter:data2" content="Black"><!-- Label of Second Additional Detail (required) --><meta name="twitter:label2" content="Color">Additional Information: http://bit.ly/Z00DqF
● Allows users to view your video content directly in their timeline
● Can drastically increase the number of people that your video will reach
● Provides a consistent viewing experience for all major platforms
Twitter CardsPlayer Card
Twitter CardsPlayer Card
Desktop Mobile
Do not:
● Automatically play content.● Require users to sign-in to your experience.● Commingle sharing features from other networks inside
your player.
Twitter CardsPlayer Card
Example Metadata:
Twitter CardsPlayer Card
<!-- Card Type (required) --><meta name="twitter:card" content="player"><!-- Title (required) --><meta name="twitter:title" content="Example Video"><!-- Description (required) --><meta name="twitter:description" content="This is a sample video from example.com"><!-- Preview Image (required) --><meta name="twitter:image" content="http://example.com/keyframe/a.jpg"><!-- URL to Player iFrame (required) --><meta name="twitter:player" content="https://example.com/embed/a"><!-- Player Width (required) --><meta name="twitter:player:width" content="435"><!-- Player Height (required) --><meta name="twitter:player:height" content="251"><!-- Video Stream (recommended) --><meta name="twitter:player:stream" content="https://example.com/raw-stream/a.mp4"><!-- Video Stream Format (required if specifying a video stream) --><meta name="twitter:player:stream:content_type" content="video/mp4; codecs="avc1.42E01E1, mp4a.40.2"">
Additional Information: http://bit.ly/15Xzcox
Drive users to install your application right from their timeline.
Allow users to open Tweet content within your application, directing traffic from Twitter to your application.
Twitter CardsDeep Linking
Twitter CardsDeep Linking
Twitter CardsDeep Linking
<!-- Name of iPhone App --><meta name="twitter:app:name:iphone" content="Example App"/><!-- App Store ID for iPhone App --><meta name="twitter:app:id:iphone" content="306934135"/><!-- URL to open tweet in iPhone App --><meta name="twitter:app:url:iphone" content="example://action/5149e249222f9e600a7540ef"/><!-- Name of iPad App --><meta name="twitter:app:name:ipad" content="Example App"/><!-- App Store ID for iPad App (can be same as iPhone) --><meta name="twitter:app:id:ipad" content="306934135"/><!-- URL to open tweet in iPad App --><meta name="twitter:app:url:ipad" content="example://action/5149e249222f9e600a7540ef"/><!-- Name of Google Play App --><meta name="twitter:app:name:googleplay" content="Example App"/><!-- ID of Google Play App --><meta name="twitter:app:id:googleplay" content="com.example.app"/><!-- URL to open tweet in Google Play App --><meta name="twitter:app:url:googleplay" content="http://example.com/action/5149e249222f9e600a7540ef"/>
Twitter CardsDeep Linking
Example Metadata:
Additional Information: http://bit.ly/10GAuDy
● Allow users to like the page they are on, useful for blog posts or articles, or allow users to like your Facebook Page
● Powerful analytics available through Facebook about user demographics.
FacebookLike Button
FacebookLike Button
Create your own:http://bit.ly/13A50Mb
Allow users to follow your public updates without leaving your site.
Create your own:http://bit.ly/ZpUfMX
FacebookFollow Button
FacebookFollow Button
● Drop-in solution for commenting which doesn't require users to register with your site to comment.
● Powerful moderation tools including blacklisting words, banning users, and enabling grammar filters.
FacebookComments
● Promotes socially relevant content from friends and friends of friends, allowing users to receive more targeted content.
● Allows wide spread distribution of comments made on your page. Users can interact with and post additional comments from their newsfeed when their friends comment.
FacebookComments
FacebookComments
Build your own:http://bit.ly/17nbGj2
Allows users to:● View the number of people who liked your
Facebook Page● See which friends liked your Facebook Page● View recent activity from your Facebook
Page● Like your Facebook Page
FacebookLike Box
FacebookLike Box
Create your own:http://bit.ly/ZSiZKe
Any page can be turned into an object by adding metadata in accordance with the Open Graph Protocol: http://bit.ly/17s2gmv
Specifying objects in this manner allows Facebook to create a rich user experience around your content, allowing users to do things like stream your videos in their Timeline.
FacebookOpen Graph
Allows for custom actions and objects to be created by applications.
Allow users to tell a story through their timeline by taking action on these objects.
FacebookOpen Graph
Standard Objects and Actions:Music: Listen, Create a PlaylistMovies & Television: Watch, Rate, Wants to WatchBooks: Rate, Read, Quote, Wants to ReadFitness: Bike, Walk, RunGeneral: Like, Recommend, Follow
FacebookOpen Graph
Allows actions to be tagged with locations, creating location based posts in the timeline:
FacebookOpen Graph
API
APIWhat's an API?
An Application Programming Interface is used to interact with services such as Facebook and Twitter to provide additional functionality for users.
APIWhat can be done using APIs?
Build applications that use APIs to make social networking easier, e.g. Buffer http://bit.ly/ZYSZfs
Provide unique experiences for every user that enters your site by extracting data from their social networks, e.g. Books, Movies, etc. More info: http://bit.ly/ZYTOok
Examples
Thank you:
All Good BakersCohoes Music HallSMBTVGreane Tree Technology
Contact Information:
Matthew [email protected]