Google Developer Days Brazil 2009 - Make your site social with Google Friend Connect

14,376
-1

Published on

Examples and real world use case (Time.com, Huffingtonpost) of how to use Google friend Connect to make your site more social, using the javascript and rest APIs.

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
14,376
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
32
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Google Developer Days Brazil 2009 - Make your site social with Google Friend Connect

  1. 1. Sunday, June 28, 2009
  2. 2. Sunday, June 28, 2009
  3. 3. Make your site social with Google Friend Connect Patrick Chanezon, chanezon@google.com 6/28/2009 With slides from Arne Roomann-Kurrik & Chris Schalk Sunday, June 28, 2009
  4. 4. Who We Are • Patrick Chanezon oDeveloper Advocate, Google oManages client and cloud advocacy teams, also helps with OpenSocial and Google Friend Connect o Author of Time.com Social Lists • Chris Schalk o Developer Advocate, Google o Speaks about the benefits of Google Friend Connect around the world o Author of Plane Crazy • Arne Roomann-Kurrik o Developer Programs, Google o Writes samples and documentation for developers o Author of The Chow Down Sunday, June 28, 2009
  5. 5. Who You Are • Web developer • Experienced working with server-side technology oJava, PHP, Ruby, Python oSQL, Object Data Store • Probably have an existing website o Users visit your site for a specific theme or activity o Existing database of registered accounts • Heard about Google Friend Connect o Don't need a quick integration o Have additional questions Sunday, June 28, 2009
  6. 6. You Might Be Interested In How Google Friend Connect... • Can let you accept sign-ins from several social networks plus OpenID • Can deliver a richer social experience for all of your users • Enables your users to send invites and notifications to their friends, increasing your site's exposure and growth Sunday, June 28, 2009
  7. 7. And We're Here To Answer Your Questions! • Google Friend Connect (GFC): o Is a "meta" social network o Reads/Writes to OpenSocial social networks o Reads from Portable Contacts sites o Exposes its own OpenSocial developer APIs  JavaScript gadgets  RESTful server-to-server calls o Has no icon: Sunday, June 28, 2009
  8. 8. Google Friend Connect • May 2008 Google Friend Connect Preview – Preview release, for whitelisted sites – make your site social – long tail, no technical skills needed – copy and paste javascript – add OpenSocial applications • December 2008: General Availability • February 2009: Social Bar – Even easier integration • March 2009: Javascript and REST APIs – Allows deep customized integration in websites – server or client side integration – good fit for large websites with technical teams 7 Sunday, June 28, 2009
  9. 9. Demo: "Cut & Paste" Google Friend Connect Sunday, June 28, 2009
  10. 10. http://www.youtube.com/watch?v=ty5Q6XF1424 Sunday, June 28, 2009
  11. 11. Why Friend Connect? Photo by crowt59 http://www.flickr.com/photos/crowt59/1444807366/ Sunday, June 28, 2009
  12. 12. You're Probably A Social Developer Already • A website is a social app! o Use social signals in your content o Highlight user generated content on your site o Pull data from web services o Post notices to social websites Sunday, June 28, 2009
  13. 13. Every Site Has Its Platform(s) • These interactions are driven by APIs • These APIs are the platforms for your site • Users can come from any integration point o You must be fundamentally cross platform  More than mobile  More than desktop Sunday, June 28, 2009
  14. 14. The Web Is Like A Series Of Platforms • OpenSocial created a standard for writing social apps o Access users from several social networks o Adoption is fast! Sunday, June 28, 2009
  15. 15. Too Many Platforms? • Fixed costs can be prohibitive: Deployment o Cross platform coding o Per - platform support o • Traditional cross-platform models stop working • Don't think "which containers do I run on"! Sunday, June 28, 2009
  16. 16. The New Model For Social • Better to think, "who do I talk to"?... Sunday, June 28, 2009
  17. 17. Defining Types Of API Interactions • ... and how do I talk to them? Sunday, June 28, 2009
  18. 18. GFC Simplifies Your Development • GFC lets you talk to one set of APIs to do common tasks... Sunday, June 28, 2009
  19. 19. GFC Adds Value To Existing Infrastructure • ...and gives you some nice bonuses. Sunday, June 28, 2009
  20. 20. Why On My Server? Photo by Robert Scoble:http://www.flickr.com/photos/scobleizer/2251820987/ Sunday, June 28, 2009
  21. 21. A Deeply Integrated Website: • Allows Google Friend Connect users to log in for the first time as if they were already registered on the site • • Uses social signals to highlight appropriate content • Uses content to make new social connections • • Encourages users to share their experiences with the rest of the web Sunday, June 28, 2009
  22. 22. What Does GFC Give My Website? • GFC is a wrapper between dozens of sites and your own. • Integrations can be categorized in three ways: Sunday, June 28, 2009
  23. 23. A Simplified Model • IN owho can access your site without registering? • MIDDLE o what can a user do with their friends? • OUT o where can users share their actions with the web? Sunday, June 28, 2009
  24. 24. The INs © PhotoXpress.com http://photoxpress.com/Content/bib-tomato-sauce-boy/163613 Sunday, June 28, 2009
  25. 25. Identity Matters • Goal: Allow a Google Friend Connect user to log into your site as if they were a registered user. • • Steps: o Signing In o Obtaining Data o Storing Data Sunday, June 28, 2009
  26. 26. Signing In • To allow users to sign in, simply render a button: • With a simple bit of JavaScript: google.friendconnect.renderSignInButton({ 'id': 'target-id', 'text' : 'Click here to join ', 'style': 'standard' }); Sunday, June 28, 2009
  27. 27. Demo: Creating a sign-in UI for a site with an existing registration system Sunday, June 28, 2009
  28. 28. Public REST Requests • Much of a site's data is public • Fetch site info: http://www.google.com/friendconnect/api /people/@owner/@self?format=xml&id=<site id> • Fetch site members: @owner/@friends • Fetch a person's public profile: <user id>/@self • Play with it! http://bit.ly/chowdownkurrik Sunday, June 28, 2009
  29. 29. Acting As A Website • Sites are issued a Consumer Key and Consumer Secret • Using these, your site may authorize itself to GFC with two-legged OAuth • • Sites may: o Read + write App Data for any of their users o Request activities to be posted for any of their users • • Good for background processing! Sunday, June 28, 2009
  30. 30. "Finding Yourself" • Fetching the current user when you don't know their ID: /api/people/@me/@self • Can't just type that into a browser and expect data back! o Still need a user context o Expressed through fcauth tokens • Logged in users send cookies named: fcauth09788020278569175613 o The number is your site ID o The value is the token Sunday, June 28, 2009
  31. 31. Acting As A User • Now urls which require a context: /api/people/@me/@self • Get on by appending the fcauth value: /api/people/@me/@self?fcauth=XXXXXXXXXXX • Your site can: o Read and write App Data for the current user o Request activities to be posted for the current user* • Does not need OAuth! • Supported by most OpenSocial Client Libraries http://bit.ly/opensocialclientlibraries Sunday, June 28, 2009
  32. 32. Demo: Obtaining the fcauth token and making social requests Sunday, June 28, 2009
  33. 33. Gotta Put That Data Somewhere! • What kind of data will your site deal with? • How can you structure your data store to handle this data? Sunday, June 28, 2009
  34. 34. Locally Registered Users • Lives in your data store • Site-specific profile fields o"What's my favorite airplane" • Probably no friend data Sunday, June 28, 2009
  35. 35. Google Friend Connect Users • Lives in the cloud • Uses a common set of profile fields: oThumbnail URL oProfile URL o"About Me" oCustom URLs • Brings their friends with them Sunday, June 28, 2009
  36. 36. "Offline" Google Friend Connect Users • GFC users live in the cloud • Profiles, images, URLs can all change between sessions • The only static data is the user ID Sunday, June 28, 2009
  37. 37. Data Representations • Your data model must cope with multiple user providers • Simple way: o Add a column to your existing users table: Sunday, June 28, 2009
  38. 38. Demo: Storing site data keyed to a GFC user. Building "My Favorite Airplane". Sunday, June 28, 2009
  39. 39. Who Is Logging In? Sunday, June 28, 2009
  40. 40. Who Is Logging In? Sunday, June 28, 2009
  41. 41. Who Is Logging In? Sunday, June 28, 2009
  42. 42. Who Is Logging In? Sunday, June 28, 2009
  43. 43. Who Is Logging In? Sunday, June 28, 2009
  44. 44. Who Is Logging In? Sunday, June 28, 2009
  45. 45. Who Is Logging In? Sunday, June 28, 2009
  46. 46. Who Is Logging In? Sunday, June 28, 2009
  47. 47. Who Is Logging In? Sunday, June 28, 2009
  48. 48. The INs Summary • Goal: Allow a Google Friend Connect user to log into your site as if they were a registered user. • • Approach o Let users log in with JavaScript o Fetch social data with REST calls o Adapt your data store for social user data o Create an authorization flow o Cache for performance Sunday, June 28, 2009
  49. 49. The MIDDLE © PhotoXpress.com http://photoxpress.com/Content/machine-equipment-factory/3216021 Sunday, June 28, 2009
  50. 50. Being More Social • Goal: Use social signals to highlight content • Goal: Use content to make new social connections • • Steps: o Add social chrome to your site o Restructure your views to take advantage of the extra data Sunday, June 28, 2009
  51. 51. Social Chrome: Per-Site Profiles Sunday, June 28, 2009
  52. 52. Social Chrome: Integrated UI • "Click to login" as a first class citizen Sunday, June 28, 2009
  53. 53. Social Chrome: Smart UI Registered user: Registered user with GFC account: GFC user: Sunday, June 28, 2009
  54. 54. Social Makes Everything Better • Structuring your site to encourage social behaviors • Provide incentives for logging in o"Share this with your friends" o"See what your friends are doing" • Provide data views that are useful for everyone Sunday, June 28, 2009
  55. 55. Simple Social Views - Registered Users • Show data from all users • Choose engaging views: • o "Top scores" o "Highest rated reviewers" o "Recent updates" Sunday, June 28, 2009
  56. 56. Simple Social Views - GFC Users • Expose information in the context of friendships • o "What are my friends' favorite airplanes?" o "Are my friends playing any games?" o "How do I rank compared to my friends?" Sunday, June 28, 2009
  57. 57. Demo: Simple social views. Building "What are my friends' favorite airplanes?" Sunday, June 28, 2009
  58. 58. Intermediate Social Views - GFC Users • Contextual data is valuable! • Social signals help users navigate your content: • o "Some of your friends liked this guitar" o "Your friend gave this restaurant a poor review" o "Two of your friends read this article" o "A friend of yours solved this puzzle" Sunday, June 28, 2009
  59. 59. Advanced Social Views - GFC Users • Give users a reason to come back to your site! • Help users establish relationships: Sunday, June 28, 2009
  60. 60. Demo: Advanced social views. Building "Users who also Sunday, June 28, 2009
  61. 61. The MIDDLE - Summary • Goal: Use social signals to direct users to appropriate content • Goal: Use content as a context to make new social connections between users • • Approach: o Promoted social users to first class citizens o Changed data views:  Displayed activities of site users and friends  Embedded friend data into content  Encouraged social interaction around content Sunday, June 28, 2009
  62. 62. The OUTs © PhotoXpress.com http://photoxpress.com/Content/graphic-road-sign-abstract/1690408 Sunday, June 28, 2009
  63. 63. Learn To Share • Goal: Let users share their experiences on your site with the rest of the web. • • Steps: o Invites o Activity Streams • Sunday, June 28, 2009
  64. 64. Invites • Built-in functionality, just put a button on your page • Invite friends from linked accounts or email Sunday, June 28, 2009
  65. 65. Sharing • Get users to share your site with some of the most popular social websites Sunday, June 28, 2009
  66. 66. Activity Streams • Destinations where your activities can go • Different for each user • Depends on user permissions Sunday, June 28, 2009
  67. 67. Activity Streams • The social web has an inherent sharing nature • One activity post may wind up in many places! Sunday, June 28, 2009
  68. 68. Activity Streams • Activities mean greater exposure • Exposure drives users to your site Sunday, June 28, 2009
  69. 69. Clever CURLing Related Title Here • Posting activities also done via REST: url = "http://www.google.com/friendconnect/api /activities/@me/@self?fcauth=<fcauth> • Posting from the command line: data="{"title":"a title", "body":"test "}" curl -X POST $url -H "Content-Type: application/json" -d "$data" Sunday, June 28, 2009
  70. 70. Sharing With Your Site Members • Activity updates on your site are available in your site's activity stream feed: Sunday, June 28, 2009
  71. 71. Sharing With The World • Activity updates are viewable across every GFC site by looking at a user's profile Sunday, June 28, 2009
  72. 72. Demo: Writing activities server-side. Sunday, June 28, 2009
  73. 73. Learn To Share • Goal: Let users share their experiences on your site with the rest of the web. • Approach: o Added invite chrome to let users share content o Used activity streams to maximize site exposure Sunday, June 28, 2009
  74. 74. Google Friend Connect in the real world: TIME.com and Huffington Post Sunday, June 28, 2009
  75. 75. “Oh I get by with a little help from my friends, Mmm I get high with a little help from my friends, Oh I'm gonna try with a little help from my friends” Beatles Sunday, June 28, 2009
  76. 76. 2009 TIME.com Social Lists May 2009 06.08 XXX Sunday, June 28, 2009
  77. 77. TIME.com • 24-hour global news gathering operation with 150+ journalists • In-depth reporting throughout the day on the issues, people, places and organizations that matter • Trusted commentary and unmatched access • 141.6 million page views (omniture) • 17 million unique visitors (omniture) Sunday, June 28, 2009
  78. 78. TIME.com April Traffic Highlights Pageviews in April were the highest in TIME.com history! Pageviews (000)  Record Site Traffic ● TIME.com pageviews increased by +195% year over year*  Record User Engagement PV Per Person ● Time.com users consumed 14 pageviews per person, which is the highest in TIME.com history!*  TIME.com Multimedia Highlights ● Video streams experienced a 61% increase vs. last month Sources – *Nielsen Net Ratings Apr 2009 vs Apr 2008 Sunday, June 28, 2009
  79. 79. TIME.com April Traffic Highlights Pageviews in April were the highest in TIME.com history! Pageviews (000)  Record Site Traffic ● TIME.com pageviews increased by +195% year over year*  Record User Engagement PV Per Person ● Time.com users consumed 14 pageviews per person, which is the highest in TIME.com history!*  TIME.com Multimedia Highlights ● Video streams experienced a 61% increase vs. last month Sources – *Nielsen Net Ratings Apr 2009 vs Apr 2008 Sunday, June 28, 2009
  80. 80. TIME.com Daily Specials TIME.com’s Daily Specials provide a trusted and entertaining perspective on relevant current events. These interactive specials use photo and video galleries to engage the readers, and topics can range from important international events like the Pope visiting the Middle East) to light hearted topics like the Best iPhone Apps. Recent Popular Daily Specials Pageviews • top 10 disastrous letterman interviews - 7.4mm • top 11 iphone applications - 5.9mm •10 things you can like about $4 gas - 4.3mm •10 essential sites - 3.0mm Source: Omniture SiteCatalyst – Past 12 Months Sunday, June 28, 2009
  81. 81. Specials Traffic 176MM From January – April 2009 Sunday, June 28, 2009
  82. 82. Challenge How can we make our daily Top 10’s more fun and engaging? Sunday, June 28, 2009
  83. 83. Sunday, June 28, 2009
  84. 84. TIME Social Lists Demo Sunday, June 28, 2009
  85. 85. Architecture Javascript APIs JSONP HTML + JavaScript Sunday, June 28, 2009
  86. 86. Sunday, June 28, 2009
  87. 87. HuffingtonPost Demo Sunday, June 28, 2009
  88. 88. Sunday, June 28, 2009
  89. 89. Sunday, June 28, 2009
  90. 90. In Conclusion... Photo by specialkrb http://www.flickr.com/photos/specialkrb/3265303889/ Sunday, June 28, 2009
  91. 91. Goals • Allow a Google Friend Connect user to log into your site as if they were a registered user. o JavaScript sign in, social data via REST o Data model, cache • Use social signals to highlight content • Use content to make new social connections o Social Chrome o Social Views • Let users share their experiences on your site with the rest of the web. o Invites o Activities Sunday, June 28, 2009
  92. 92. Sunday, June 28, 2009
  93. 93. Sunday, June 28, 2009

×