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

1. The Mechanics
of Social Media
Matthew Gerrior @MatthewGerrior
Lead Software Engineer @greanetree

2. Facebook

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

4. Facebook
EdgeRank
http://www.socialbakers.com/blog/1304-understanding-increasing-facebook-edgerank

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. Facebook
Like Button
http://bit.ly/1aBDcs3

7. Facebook
Like Button
Create your own: http://bit.ly/13A50Mb

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. 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. Facebook
Comments
Build your own:
http://bit.ly/17nbGj2

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. Facebook
Like Box
Create your own: http://bit.ly/ZSiZKe

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. Facebook
Recommendations Bar
http://bit.ly/183PhcY

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. Facebook
Open Graph
What is metadata?
Metadata is data about data.
Example:
<meta name="keywords" content="HTML,CSS,XML,JavaScript">

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. Facebook
Open Graph
http://bit.ly/1arL2Yp

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. Facebook
Open Graph
Allows actions to be tagged with locations,
creating location based posts in the timeline:

21. Facebook
Open Graph
That’s not the Penn Spinfisher V Spinning
Reel I wanted to tell my friends about!

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

23. Facebook
Open Graph

24. Facebook
Open Graph

25. Facebook
Open Graph
How can I fix it?
<meta property="og:image" content="http://ep.yimg.com/ca/I/tackle_2271_900304135" />

26. Facebook
Open Graph

27. Facebook
Open Graph
Facebook Open Graph Debugger:
http://bit.ly/1bGEzsb

28. Facebook
Advertising
Highly Targeted Audience:
● Age
● Gender
● Location
● Relationship Status
● Education
● etc...

29. Facebook
Advertising
Built-in support for A/B testing allows you to
quickly find out which advertisements engage
your target audience more

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. Twitter

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. Twitter
Tweet Button

34. Twitter
Tweet Button
Make your own: http://bit.ly/12Noi1R

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. Twitter
Embedded Tweets
Additional Information:
http://bit.ly/YZWl2q

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. Twitter
Embedded Timelines
Create your own:
http://bit.ly/10GcYH1
Additional Information
/ Customization:
http://bit.ly/17n4d3q

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. Twitter Cards
●
●
●
●
●
●
●
Summary Card
Large Image Summary Card
Photo Card
Gallery Card
App Card
Player Card
Product Card

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. Twitter Cards
Summary Card
Desktop
Mobile

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. 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. Twitter Cards
Large Image Summary Card
Desktop
Mobile

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. 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. Twitter Cards
Photo Card
Desktop
Mobile

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. 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. Twitter Cards
Gallery Card
Desktop
Mobile

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. 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. Twitter Cards
App Card

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. 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. Twitter Cards
Product Card
Desktop
Mobile

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. 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. Twitter Cards
Player Card
Desktop
Mobile

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. 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. 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. Twitter Cards
Deep Linking

65. Twitter Cards
Deep Linking

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. API

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. 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. Examples

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