social media: matt gerrior
DESCRIPTION
TRANSCRIPT
![Page 1: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/1.jpg)
Social MediaMatthew Gerrior @MatthewGerriorLead Software Engineer @greanetree
![Page 2: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/2.jpg)
![Page 3: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/3.jpg)
• 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
![Page 4: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/4.jpg)
TwitterTweet Button
![Page 5: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/5.jpg)
TwitterTweet Button
Make your own: http://bit.ly/12Noi1R
![Page 6: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/6.jpg)
• 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
![Page 7: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/7.jpg)
TwitterEmbedded Tweets
Additional Information:
http://bit.ly/YZWl2q
![Page 8: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/8.jpg)
• 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
![Page 9: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/9.jpg)
TwitterEmbedded Timelines
Create your own:
http://bit.ly/10GcYH1
Additional Information / Customization:
http://bit.ly/17n4d3q
![Page 10: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/10.jpg)
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.
![Page 11: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/11.jpg)
Twitter CardsWhat is metadata?
Metadata is data about data.
Example:<meta name="keywords" content="HTML,CSS,XML,JavaScript">
![Page 12: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/12.jpg)
Twitter Cards
• Summary Card
• Large Image Summary Card
• Photo Card
• Gallery Card
• App Card
• Player Card
• Product Card
![Page 13: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/13.jpg)
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
![Page 14: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/14.jpg)
Twitter CardsSummary Card
Desktop Mobile
![Page 15: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/15.jpg)
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">
![Page 16: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/16.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
![Page 17: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/17.jpg)
Twitter CardsLarge Image Summary Card
Desktop Mobile
![Page 18: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/18.jpg)
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
![Page 19: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/19.jpg)
• 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
![Page 20: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/20.jpg)
Twitter CardsPhoto Card
Desktop Mobile
![Page 21: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/21.jpg)
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
![Page 22: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/22.jpg)
• 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
![Page 23: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/23.jpg)
Twitter CardsGallery Card
Desktop Mobile
![Page 24: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/24.jpg)
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
![Page 25: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/25.jpg)
• 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
![Page 26: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/26.jpg)
Twitter CardsApp Card
![Page 27: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/27.jpg)
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
![Page 28: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/28.jpg)
• 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
![Page 29: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/29.jpg)
Twitter CardsProduct Card
Desktop Mobile
![Page 30: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/30.jpg)
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
![Page 31: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/31.jpg)
• 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
![Page 32: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/32.jpg)
Twitter CardsPlayer Card
Desktop Mobile
![Page 33: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/33.jpg)
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
![Page 34: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/34.jpg)
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
![Page 35: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/35.jpg)
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
![Page 36: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/36.jpg)
Twitter CardsDeep Linking
![Page 37: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/37.jpg)
Twitter CardsDeep Linking
![Page 38: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/38.jpg)
<!-- 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
![Page 39: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/39.jpg)
![Page 40: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/40.jpg)
• 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
![Page 41: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/41.jpg)
FacebookLike Button
Create your own:
http://bit.ly/13A50Mb
![Page 42: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/42.jpg)
Allow users to follow your public updates without leaving your site.
Create your own:
http://bit.ly/ZpUfMX
FacebookFollow Button
![Page 43: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/43.jpg)
FacebookFollow Button
![Page 44: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/44.jpg)
• 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
![Page 45: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/45.jpg)
• 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
![Page 46: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/46.jpg)
FacebookComments
Build your own:
http://bit.ly/17nbGj2
![Page 47: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/47.jpg)
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
![Page 48: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/48.jpg)
FacebookLike Box
Create your own:
http://bit.ly/ZSiZKe
![Page 49: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/49.jpg)
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
![Page 50: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/50.jpg)
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
![Page 51: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/51.jpg)
Standard Objects and Actions:
Music: Listen, Create a Playlist
Movies & Television: Watch, Rate, Wants to Watch
Books: Rate, Read, Quote, Wants to Read
Fitness: Bike, Walk, Run
General: Like, Recommend, Follow
FacebookOpen Graph
![Page 52: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/52.jpg)
Allows actions to be tagged with locations, creating location based posts in the timeline:
FacebookOpen Graph
![Page 53: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/53.jpg)
API
![Page 54: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/54.jpg)
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.
![Page 55: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/55.jpg)
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
![Page 56: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/56.jpg)
Examples
![Page 57: Social Media: Matt Gerrior](https://reader036.vdocuments.net/reader036/viewer/2022062616/54b479b04a79595a5f8b4596/html5/thumbnails/57.jpg)
Thank you:
All Good Bakers
Cohoes Music Hall
SMBTV
Greane Tree Technology
Contact Information:
Matthew Gerrior
518-380-6500