The Mechanics
of Social Media
Matthew Gerrior @MatthewGerrior
Lead Software Engineer @greanetree
Facebook
Facebook
EdgeRank

EdgeRank is dead, Long live EdgeRank.
http://farm8.staticflickr.com/7015/6686020655_3120301726_z.jpg
Facebook
EdgeRank

http://www.socialbakers.com/blog/1304-understanding-increasing-facebook-edgerank
Facebook
Like Button
● Allow users to like the page they are on,
useful for blog posts or articles, or allow
users to like...
Facebook
Like Button

http://bit.ly/1aBDcs3
Facebook
Like Button

Create your own: http://bit.ly/13A50Mb
Facebook
Comments
● Drop-in solution for commenting which
doesn't require users to register with your
site to comment.
● P...
Facebook
Comments
● Promotes socially relevant content from
friends and friends of friends, allowing users
to receive more...
Facebook
Comments
Build your own:
http://bit.ly/17nbGj2
Facebook
Like Box
Allows users to:
● View the number of people who liked your
Facebook Page
● See which friends liked your...
Facebook
Like Box
Create your own: http://bit.ly/ZSiZKe
Facebook
Recommendations Bar
● Scroll with users so they can engage with
Facebook at any time
● Provide relevant related c...
Facebook
Recommendations Bar

http://bit.ly/183PhcY
Facebook
Open Graph
Any page can be turned into an object by
adding metadata in accordance with the Open
Graph Protocol: h...
Facebook
Open Graph
What is metadata?
Metadata is data about data.
Example:
<meta name="keywords" content="HTML,CSS,XML,Ja...
Facebook
Open Graph
Allows for custom actions and objects to be
created by applications.
Allow users to tell a story throu...
Facebook
Open Graph

http://bit.ly/1arL2Yp
Facebook
Open Graph
Standard Objects and Actions:
Music: Listen, Create a Playlist
Movies & Television: Watch, Rate, Wants...
Facebook
Open Graph
Allows actions to be tagged with locations,
creating location based posts in the timeline:
Facebook
Open Graph
That’s not the Penn Spinfisher V Spinning
Reel I wanted to tell my friends about!
Facebook
Open Graph

What went wrong?
Not enough Metadata!
Facebook
Open Graph
Facebook
Open Graph
Facebook
Open Graph

How can I fix it?

<meta property="og:image" content="http://ep.yimg.com/ca/I/tackle_2271_900304135" ...
Facebook
Open Graph
Facebook
Open Graph

Facebook Open Graph Debugger:
http://bit.ly/1bGEzsb
Facebook
Advertising
Highly Targeted Audience:
● Age
● Gender
● Location
● Relationship Status
● Education
● etc...
Facebook
Advertising

Built-in support for A/B testing allows you to
quickly find out which advertisements engage
your tar...
Facebook
Advertising
Takes advantage of word of mouth marketing
directed at a targeted audience:
● Users will see which of...
Twitter
Twitter
Tweet Button
● Allows users to share your content or tell
their friends about your content without
having to navig...
Twitter
Tweet Button
Twitter
Tweet Button

Make your own: http://bit.ly/12Noi1R
Twitter
Embedded Tweets
● Allows you to embed a specific Tweet in any
given page, maintaining the Twitter look and
feel if...
Twitter
Embedded Tweets
Additional Information:
http://bit.ly/YZWl2q
Twitter
Embedded Timelines
● Embed a timeline of your own tweets, or
those of any public user
● Embed a timeline of your f...
Twitter
Embedded Timelines
Create your own:
http://bit.ly/10GcYH1
Additional Information
/ Customization:
http://bit.ly/17...
Twitter Cards
● Allow rich media from your website to be
embedded directly in Tweets
● Approval required for specific card...
Twitter Cards
●
●
●
●
●
●
●

Summary Card
Large Image Summary Card
Photo Card
Gallery Card
App Card
Player Card
Product Ca...
Twitter Cards
Summary Card
● Great for Blog Posts and Articles
● Allows users to preview your content without
having to le...
Twitter Cards
Summary Card
Desktop

Mobile
Twitter Cards
Summary Card
Example Metadata
<!-- Card Type (optional for summary cards) -->
<meta name="twitter:card" cont...
Twitter Cards
Large Image Summary Card
● Similar to Summary Card, but provides more
emphasis on the image
● Requirements a...
Twitter Cards
Large Image Summary Card
Desktop

Mobile
Twitter Cards
Large Image Summary Card
Example Metadata:
<!-- Card Type (required) -->
<meta name="twitter:card" content="...
Twitter Cards
Photo Card
● Use when your image should be the center
of attention
● Useful for image sharing sites such as ...
Twitter Cards
Photo Card
Desktop

Mobile
Twitter Cards
Photo Card
Example Metadata:
<!-- Card Type (required) -->
<meta name="twitter:card" content="photo">
<!-- T...
Twitter Cards
Gallery Card
● Similar to Photo Card but allows you to
display four photos in the Tweet
● Great for Blog Pos...
Twitter Cards
Gallery Card
Desktop

Mobile
Twitter Cards
Gallery Card
Example Metadata:
<!-- Card Type (required) -->
<meta name="twitter:card" content="gallery">
<!...
Twitter Cards
App Card
● Use to embed mobile app descriptions
directly in user Timelines
● Allow users to spread the word ...
Twitter Cards
App Card
Twitter Cards
App Card
Example Metadata:
<!-- Card Type (required) -->
<meta name="twitter:card" content="app">
<!-- Addit...
Twitter Cards
Product Card
● Allow potential customers to view your
products directly in their timeline
● Increased word o...
Twitter Cards
Product Card
Desktop

Mobile
Twitter Cards
Product Card
Example Metadata:
<!-- Card Type (required) -->
<meta name="twitter:card" content="product">
<!...
Twitter Cards
Player Card
● Allows users to view your video content
directly in their timeline
● Can drastically increase ...
Twitter Cards
Player Card
Desktop

Mobile
Twitter Cards
Player Card
Do not:
● Automatically play content.
● Require users to sign-in to your experience.
● Commingle...
Twitter Cards
Player Card
Example Metadata:
<!-- Card Type (required) -->
<meta name="twitter:card" content="player">
<!--...
Twitter Cards
Deep Linking
Drive users to install your application right from
their timeline.
Allow users to open Tweet co...
Twitter Cards
Deep Linking
Twitter Cards
Deep Linking
Twitter Cards
Deep Linking
Example Metadata:
<!-- Name of iPhone App -->
<meta name="twitter:app:name:iphone" content="Exa...
API
API
What's an API?
An Application Programming Interface is used
to interact with services such as Facebook and
Twitter to ...
API
What can be done using APIs?
Build applications that use APIs to make social networking
easier, e.g. Buffer http://bit...
Examples
Thank you:

Contact Information:

Hilton Burlington
Curve Trends Marketing
Greane Tree Technology
All of You

Matthew Gerr...
Upcoming SlideShare
Loading in...5
×

The Mechanics of Social Media

310

Published on

A presentation on integration social media into an existing site and using social media to market to end-users.

Published in: Marketing
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
310
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

The Mechanics of Social Media

  1. 1. The Mechanics of Social Media Matthew Gerrior @MatthewGerrior Lead Software Engineer @greanetree
  2. 2. Facebook
  3. 3. Facebook EdgeRank EdgeRank is dead, Long live EdgeRank. http://farm8.staticflickr.com/7015/6686020655_3120301726_z.jpg
  4. 4. Facebook EdgeRank http://www.socialbakers.com/blog/1304-understanding-increasing-facebook-edgerank
  5. 5. Facebook Like Button ● 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.
  6. 6. Facebook Like Button http://bit.ly/1aBDcs3
  7. 7. Facebook Like Button Create your own: http://bit.ly/13A50Mb
  8. 8. Facebook Comments ● 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.
  9. 9. Facebook Comments ● 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.
  10. 10. Facebook Comments Build your own: http://bit.ly/17nbGj2
  11. 11. Facebook Like Box 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
  12. 12. Facebook Like Box Create your own: http://bit.ly/ZSiZKe
  13. 13. Facebook Recommendations Bar ● Scroll with users so they can engage with Facebook at any time ● Provide relevant related content, providing the user with additional value ● Unobtrusive, customizable options to control how long until recommendations pop up
  14. 14. Facebook Recommendations Bar http://bit.ly/183PhcY
  15. 15. Facebook Open Graph 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.
  16. 16. Facebook Open Graph What is metadata? Metadata is data about data. Example: <meta name="keywords" content="HTML,CSS,XML,JavaScript">
  17. 17. Facebook Open 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.
  18. 18. Facebook Open Graph http://bit.ly/1arL2Yp
  19. 19. Facebook Open Graph 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
  20. 20. Facebook Open Graph Allows actions to be tagged with locations, creating location based posts in the timeline:
  21. 21. Facebook Open Graph That’s not the Penn Spinfisher V Spinning Reel I wanted to tell my friends about!
  22. 22. Facebook Open Graph What went wrong? Not enough Metadata!
  23. 23. Facebook Open Graph
  24. 24. Facebook Open Graph
  25. 25. Facebook Open Graph How can I fix it? <meta property="og:image" content="http://ep.yimg.com/ca/I/tackle_2271_900304135" />
  26. 26. Facebook Open Graph
  27. 27. Facebook Open Graph Facebook Open Graph Debugger: http://bit.ly/1bGEzsb
  28. 28. Facebook Advertising Highly Targeted Audience: ● Age ● Gender ● Location ● Relationship Status ● Education ● etc...
  29. 29. Facebook Advertising Built-in support for A/B testing allows you to quickly find out which advertisements engage your target audience more
  30. 30. Facebook Advertising Takes advantage of word of mouth marketing directed at a targeted audience: ● Users will see which of their friends endorse you ● You can sponsor stories, causing previous engagements with users to show up in timelines of friends.
  31. 31. Twitter
  32. 32. Twitter Tweet Button ● 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
  33. 33. Twitter Tweet Button
  34. 34. Twitter Tweet Button Make your own: http://bit.ly/12Noi1R
  35. 35. Twitter Embedded Tweets ● 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
  36. 36. Twitter Embedded Tweets Additional Information: http://bit.ly/YZWl2q
  37. 37. Twitter Embedded Timelines ● 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
  38. 38. Twitter Embedded Timelines Create your own: http://bit.ly/10GcYH1 Additional Information / Customization: http://bit.ly/17n4d3q
  39. 39. 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.
  40. 40. Twitter Cards ● ● ● ● ● ● ● Summary Card Large Image Summary Card Photo Card Gallery Card App Card Player Card Product Card
  41. 41. Twitter Cards Summary Card ● 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
  42. 42. Twitter Cards Summary Card Desktop Mobile
  43. 43. Twitter Cards Summary Card Example Metadata <!-- 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/19whitneyspan/19whitney-span-article.jpg"> Additional Information: http://bit.ly/ZAoHVR
  44. 44. Twitter Cards Large Image Summary Card ● 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
  45. 45. Twitter Cards Large Image Summary Card Desktop Mobile
  46. 46. Twitter Cards Large Image Summary Card Example Metadata: <!-- 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
  47. 47. Twitter Cards Photo Card ● 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
  48. 48. Twitter Cards Photo Card Desktop Mobile
  49. 49. Twitter Cards Photo Card 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
  50. 50. Twitter Cards Gallery 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
  51. 51. Twitter Cards Gallery Card Desktop Mobile
  52. 52. Twitter Cards Gallery Card Example Metadata: <!-- 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
  53. 53. Twitter Cards App Card ● 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
  54. 54. Twitter Cards App Card
  55. 55. Twitter Cards App Card Example Metadata: <!-- 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
  56. 56. Twitter Cards Product Card ● 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
  57. 57. Twitter Cards Product Card Desktop Mobile
  58. 58. Twitter Cards Product Card Example Metadata: <!-- 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
  59. 59. Twitter Cards Player Card ● 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
  60. 60. Twitter Cards Player Card Desktop Mobile
  61. 61. Twitter Cards Player Card Do not: ● Automatically play content. ● Require users to sign-in to your experience. ● Commingle sharing features from other networks inside your player.
  62. 62. Twitter Cards Player Card Example Metadata: <!-- 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=&quot;avc1.42E01E1, mp4a.40.2&quot;" > Additional Information: http://bit.ly/15Xzcox
  63. 63. Twitter Cards Deep Linking 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.
  64. 64. Twitter Cards Deep Linking
  65. 65. Twitter Cards Deep Linking
  66. 66. Twitter Cards Deep Linking Example Metadata: <!-- 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"/> Additional Information: http://bit.ly/10GAuDy
  67. 67. API
  68. 68. API What's an API? An Application Programming Interface is used to interact with services such as Facebook and Twitter to provide additional functionality for users.
  69. 69. API What 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
  70. 70. Examples
  71. 71. Thank you: Contact Information: Hilton Burlington Curve Trends Marketing Greane Tree Technology All of You Matthew Gerrior mgerrior@greanetree.com 518-380-6500 Bitly Bundle: http://bitly.com/bundles/mattytheg/1
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×