Social Media: Matt Gerrior

  • 527 views
Uploaded on

 

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
527
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Social MediaMatthew Gerrior @MatthewGerriorLead Software Engineer @greanetree
  • 2. Twitter
  • 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. TwitterTweet Button
  • 5. TwitterTweet ButtonMake your own: http://bit.ly/12Noi1R
  • 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. TwitterEmbedded TweetsAdditional Information:http://bit.ly/YZWl2q
  • 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. TwitterEmbedded TimelinesCreate your own:http://bit.ly/10GcYH1Additional Information/ Customization:http://bit.ly/17n4d3q
  • 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. Twitter CardsWhat is metadata?Metadata is data about data.Example:<meta name="keywords" content="HTML,CSS,XML,JavaScript">
  • 12. Twitter Cards• Summary Card• Large Image Summary Card• Photo Card• Gallery Card• App Card• Player Card• Product Card
  • 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. Twitter CardsSummary CardDesktop Mobile
  • 15. Example MetadataAdditional Information: http://bit.ly/ZAoHVRTwitter 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="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-article.jpg">
  • 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. Twitter CardsLarge Image Summary CardDesktop Mobile
  • 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="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">Additional Information: http://bit.ly/ZTx3Cv
  • 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. Twitter CardsPhoto CardDesktop Mobile
  • 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="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/14ljALKTwitter CardsPhoto Card
  • 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. Twitter CardsGallery CardDesktop Mobile
  • 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="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
  • 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. Twitter CardsApp Card
  • 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="com.example.app">Additional Information: http://bit.ly/182CIL5
  • 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. Twitter CardsProduct CardDesktop Mobile
  • 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="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
  • 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. Twitter CardsPlayer CardDesktop Mobile
  • 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. 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=&quot;avc1.42E01E1,mp4a.40.2&quot;">Additional Information: http://bit.ly/15Xzcox
  • 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. Twitter CardsDeep Linking
  • 37. Twitter CardsDeep Linking
  • 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="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 LinkingExample Metadata:Additional Information: http://bit.ly/10GAuDy
  • 39. Facebook
  • 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. FacebookLike ButtonCreate your own:http://bit.ly/13A50Mb
  • 42. Allow users to follow your public updateswithout leaving your site.Create your own:http://bit.ly/ZpUfMXFacebookFollow Button
  • 43. FacebookFollow Button
  • 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. • 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. FacebookCommentsBuild your own:http://bit.ly/17nbGj2
  • 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. FacebookLike BoxCreate your own:http://bit.ly/ZSiZKe
  • 49. Any page can be turned into an object byadding metadata in accordance with theOpen Graph Protocol: http://bit.ly/17s2gmvSpecifying 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. 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. 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. Allows actions to be tagged with locations,creating location based posts in the timeline:FacebookOpen Graph
  • 53. API
  • 54. APIWhats an API?An Application Programming Interface is usedto interact with services such as Facebookand Twitter to provide additional functionalityfor users.
  • 55. APIWhat can be done using APIs?Build applications that use APIs to make social networkingeasier, e.g. Buffer http://bit.ly/ZYSZfsProvide unique experiences for every user that enters yoursite by extracting data from their social networks, e.g.Books, Movies, etc. More info: http://bit.ly/ZYTOok
  • 56. Examples
  • 57. Thank you:All Good BakersCohoes Music HallSMBTVGreane Tree TechnologyContact Information:Matthew Gerriormgerrior@greanetree.com518-380-6500