Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Social Media: Matt Gerrior


Published on

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

Social Media: Matt Gerrior

  1. 1. Social MediaMatthew Gerrior @MatthewGerriorLead Software Engineer @greanetree
  2. 2. Twitter
  3. 3. • Allows users to share your content or telltheir friends about your content withouthaving to navigate away from your site• Include your Twitter account in the Tweetusing the "via" parameter, driving people tovisit your Twitter account• Recommend up to two additional Twitteraccounts that the user may be interested infollowingTwitterTweet Button
  4. 4. TwitterTweet Button
  5. 5. TwitterTweet ButtonMake your own:
  6. 6. • Allows you to embed a specific Tweet in anygiven page, maintaining the Twitter look andfeel if desired• Provides the same rich media experiencethat users would find in their Timeline• Allows users to follow the Tweeter, reply,retweet, and favorite the Tweet all withoutleaving your siteTwitterEmbedded Tweets
  7. 7. TwitterEmbedded TweetsAdditional Information:
  8. 8. • Embed a timeline of your own tweets, orthose of any public user• Embed a timeline of your favorite tweets, orthe favorite tweets of any public user• Embed a timeline of tweets from a list ofusers (great for a site that wants to promotemany local businesses)• Embed a timeline for hashtags or othersearch resultsTwitterEmbedded Timelines
  9. 9. TwitterEmbedded TimelinesCreate your own: Information/ Customization:
  10. 10. Twitter Cards• Allow rich media from your website to beembedded directly in Tweets• Approval required for specific cards• Implemented by adding metadata to thepage markup.
  11. 11. Twitter CardsWhat is metadata?Metadata is data about data.Example:<meta name="keywords" content="HTML,CSS,XML,JavaScript">
  12. 12. Twitter Cards• Summary Card• Large Image Summary Card• Photo Card• Gallery Card• App Card• Player Card• Product Card
  13. 13. Twitter Cards• Great for Blog Posts and Articles• Allows users to preview your content withouthaving to leave their timeline• Allows for site and content creator attributionwithin the Tweet, increasing number of usersviewing your Twitter AccountSummary Card
  14. 14. Twitter CardsSummary CardDesktop Mobile
  15. 15. Example MetadataAdditional Information: 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 withcelebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York thanthan a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housingproject here."><!-- Image (optional) --><meta name="twitter:image" content="">
  16. 16. • Similar to Summary Card, but provides moreemphasis on the image• Requirements are the same as the SummaryCard, except images should be at least280px wide and 150px tallTwitter CardsLarge Image Summary Card
  17. 17. Twitter CardsLarge Image Summary CardDesktop Mobile
  18. 18. 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 withcelebrities emerging from them seemed more suited to a red carpet event in Hollywood or New Yorkthan than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace publichousing project here."><!-- Image (optional) --><meta name="twitter:image"content="">Additional Information:
  19. 19. • Use when your image should be the centerof attention• Useful for image sharing sites such as Flickrand Instagram• Useful for photography studios or otherbusinesses where the main content isphotographsTwitter CardsPhoto Card
  20. 20. Twitter CardsPhoto CardDesktop Mobile
  21. 21. 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=""><!-- Image Width (recommended) --><meta name="twitter:image:width" content="610"><!-- Image Height (recommended) --><meta name="twitter:image:height" content="610">Additional Information: CardsPhoto Card
  22. 22. • Similar to Photo Card but allows you todisplay four photos in the Tweet• Great for Blog Posts or Articles that revolvearound a group of photosTwitter CardsGallery Card
  23. 23. Twitter CardsGallery CardDesktop Mobile
  24. 24. 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 ofour offices around the world."><!-- First Photo in Gallery (required) --><meta name="twitter:image0"content=""><!-- Second Photo in Gallery (required) --><meta name="twitter:image1"content=""><!-- Third Photo in Gallery (required) --><meta name="twitter:image2"content=""><!-- Fourth Photo in Gallery (required) --><meta name="twitter:image3"content="">Additional Information:
  25. 25. • Use to embed mobile app descriptionsdirectly in user Timelines• Allow users to spread the word about yourapplication, driving the number of installs• Gathers all pertinent information ( # ofreviews, # of stars, etc) from app stores foryouTwitter CardsApp Card
  26. 26. Twitter CardsApp Card
  27. 27. 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 bydownloading 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="">Additional Information:
  28. 28. • Allow potential customers to view yourproducts directly in their timeline• Increased word of mouth about yourproducts• Allow your users to advertise for youTwitter CardsProduct Card
  29. 29. Twitter CardsProduct CardDesktop Mobile
  30. 30. 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 thiscoffee mug featuring the Twitter logo. Make every work day good to the lastdrop."><!-- Image (required) --><meta name="twitter:image" content=""><!-- 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:
  31. 31. • Allows users to view your video contentdirectly in their timeline• Can drastically increase the number ofpeople that your video will reach• Provides a consistent viewing experience forall major platformsTwitter CardsPlayer Card
  32. 32. Twitter CardsPlayer CardDesktop Mobile
  33. 33. Do not:• Automatically play content.• Require users to sign-in to your experience.• Commingle sharing features from other networks insideyour player.Twitter CardsPlayer Card
  34. 34. 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"><!-- Preview Image (required) --><meta name="twitter:image" content=""><!-- URL to Player iFrame (required) --><meta name="twitter:player" content=""><!-- 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=""><!-- 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:
  35. 35. Drive users to install your application right fromtheir timeline.Allow users to open Tweet content within yourapplication, directing traffic from Twitter toyour application.Twitter CardsDeep Linking
  36. 36. Twitter CardsDeep Linking
  37. 37. Twitter CardsDeep Linking
  38. 38. <!-- 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=""/><!-- URL to open tweet in Google Play App --><meta name="twitter:app:url:googleplay" content=""/>Twitter CardsDeep LinkingExample Metadata:Additional Information:
  39. 39. Facebook
  40. 40. • Allow users to like the page they are on,useful for blog posts or articles, or allowusers to like your Facebook Page• Powerful analytics available throughFacebook about user demographics.FacebookLike Button
  41. 41. FacebookLike ButtonCreate your own:
  42. 42. Allow users to follow your public updateswithout leaving your site.Create your own: Button
  43. 43. FacebookFollow Button
  44. 44. • Drop-in solution for commenting whichdoesnt require users to register with yoursite to comment.• Powerful moderation tools includingblacklisting words, banning users, andenabling grammar filters.FacebookComments
  45. 45. • Promotes socially relevant content fromfriends and friends of friends, allowing usersto receive more targeted content.• Allows wide spread distribution of commentsmade on your page. Users can interact withand post additional comments from theirnewsfeed when their friends comment.FacebookComments
  46. 46. FacebookCommentsBuild your own:
  47. 47. Allows users to:• View the number of people who liked yourFacebook Page• See which friends liked your Facebook Page• View recent activity from your FacebookPage• Like your Facebook PageFacebookLike Box
  48. 48. FacebookLike BoxCreate your own:
  49. 49. Any page can be turned into an object byadding metadata in accordance with theOpen Graph Protocol: objects in this manner allowsFacebook to create a rich user experiencearound your content, allowing users to dothings like stream your videos in theirTimeline.FacebookOpen Graph
  50. 50. Allows for custom actions and objects to becreated by applications.Allow users to tell a story through their timelineby taking action on these objects.FacebookOpen Graph
  51. 51. Standard Objects and Actions:Music: Listen, Create a PlaylistMovies & Television: Watch, Rate, Wants toWatchBooks: Rate, Read, Quote, Wants to ReadFitness: Bike, Walk, RunGeneral: Like, Recommend, FollowFacebookOpen Graph
  52. 52. Allows actions to be tagged with locations,creating location based posts in the timeline:FacebookOpen Graph
  53. 53. API
  54. 54. APIWhats an API?An Application Programming Interface is usedto interact with services such as Facebookand Twitter to provide additional functionalityfor users.
  55. 55. APIWhat can be done using APIs?Build applications that use APIs to make social networkingeasier, e.g. Buffer unique experiences for every user that enters yoursite by extracting data from their social networks, e.g.Books, Movies, etc. More info:
  56. 56. Examples
  57. 57. Thank you:All Good BakersCohoes Music HallSMBTVGreane Tree TechnologyContact Information:Matthew Gerriormgerrior@greanetree.com518-380-6500