Sunday, June 28, 2009
Sunday, June 28, 2009
Make your site socialwith Google Friend ConnectPatrick Chanezon, [email protected]/28/2009With slides from Arne Roomann-Kurrik & Chris Schalk
Sunday, June 28, 2009
Who We Are
• Patrick Chanezono Developer Advocate, Googleo Manages client and cloud advocacy teams, also
helps with OpenSocial and Google Friend Connecto Author of Time.com Social Lists
• Chris Schalko Developer Advocate, Googleo Speaks about the benefits of Google Friend Connect
around the worldo Author of Plane Crazy
• Arne Roomann-Kurriko Developer Programs, Googleo Writes samples and documentation for developerso Author of The Chow Down
Sunday, June 28, 2009
Who You Are
• Web developer • Experienced working with server-side technologyo Java, PHP, Ruby, Pythono SQL, Object Data Store
• Probably have an existing websiteo Users visit your site for a specific theme or activity o Existing database of registered accounts
• Heard about Google Friend Connecto Don't need a quick integrationo Have additional questions
Sunday, June 28, 2009
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
And We're Here To Answer Your Questions!
• Google Friend Connect (GFC): o Is a "meta" social networko Reads/Writes to OpenSocial social networkso Reads from Portable Contacts siteso Exposes its own OpenSocial developer APIs
JavaScript gadgetsRESTful server-to-server calls
o Has no icon:
Sunday, June 28, 2009
7
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
Sunday, June 28, 2009
Demo: "Cut & Paste" Google Friend Connect
Sunday, June 28, 2009
http://www.youtube.com/watch?v=ty5Q6XF1424
Sunday, June 28, 2009
Why Friend Connect?
Photo by crowt59 http://www.flickr.com/photos/crowt59/1444807366/
Sunday, June 28, 2009
You're Probably A Social Developer Already
• A website is a social app!o Use social signals in your contento Highlight user generated content on your siteo Pull data from web serviceso Post notices to social websites
Sunday, June 28, 2009
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 pointo You must be fundamentally cross platform
More than mobileMore than desktop
Sunday, June 28, 2009
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
Too Many Platforms?
• Fixed costs can be prohibitive:o Deploymento Cross platform codingo Per - platform support
• Traditional cross-platform models stop working • Don't think "which containers do I run on"!
Sunday, June 28, 2009
The New Model For Social
• Better to think, "who do I talk to"?...
Sunday, June 28, 2009
Defining Types Of API Interactions
• ... and how do I talk to them?
Sunday, June 28, 2009
GFC Simplifies Your Development
• GFC lets you talk to one set of APIs to do common tasks...
Sunday, June 28, 2009
GFC Adds Value To Existing Infrastructure
• ...and gives you some nice bonuses.
Sunday, June 28, 2009
Why On My Server?
Photo by Robert Scoble:http://www.flickr.com/photos/scobleizer/2251820987/
Sunday, June 28, 2009
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
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
A Simplified Model
• IN o who 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
The INs
© PhotoXpress.com http://photoxpress.com/Content/bib-tomato-sauce-boy/163613
Sunday, June 28, 2009
Identity Matters
• Goal: Allow a Google Friend Connect user to log into your site as if they were a registered user.
• • Steps: o Signing Ino Obtaining Datao Storing Data
Sunday, June 28, 2009
Signing In
google.friendconnect.renderSignInButton({ 'id': 'target-id', 'text' : 'Click here to join ', 'style': 'standard' });
• To allow users to sign in, simply render a button: • With a simple bit of JavaScript:
Sunday, June 28, 2009
Demo: Creating a sign-in UI for a site with an existing registration system
Sunday, June 28, 2009
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
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 userso Request activities to be posted for any of their users
• • Good for background processing!
Sunday, June 28, 2009
"Finding Yourself"
• Fetching the current user when you don't know their ID:
• Can't just type that into a browser and expect data
back! o Still need a user contexto Expressed through fcauth tokens
/api/people/@me/@self
• Logged in users send cookies named:
o The number is your site IDo The value is the token
fcauth09788020278569175613
Sunday, June 28, 2009
Acting As A User
• Now urls which require a context: • Get on by appending the fcauth value: • Your site can:
o Read and write App Data for the current usero Request activities to be posted for the current
user* • Does not need OAuth! • Supported by most OpenSocial Client Libraries http://bit.ly/opensocialclientlibraries
/api/people/@me/@self
/api/people/@me/@self?fcauth=XXXXXXXXXXX
Sunday, June 28, 2009
Demo: Obtaining the fcauth token and making social requests
Sunday, June 28, 2009
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
Locally Registered Users
• Lives in your data store• Site-specific profile fieldso "What's my favorite airplane"
• Probably no friend data
Sunday, June 28, 2009
Google Friend Connect Users
• Lives in the cloud• Uses a common set of profile fields:o Thumbnail URLo Profile URLo "About Me"o Custom URLs
• Brings their friends with them
Sunday, June 28, 2009
"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
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
Demo: Storing site data keyed to a GFC user. Building "My Favorite Airplane".
Sunday, June 28, 2009
Who Is Logging In?
Sunday, June 28, 2009
Who Is Logging In?
Sunday, June 28, 2009
Who Is Logging In?
Sunday, June 28, 2009
Who Is Logging In?
Sunday, June 28, 2009
Who Is Logging In?
Sunday, June 28, 2009
Who Is Logging In?
Sunday, June 28, 2009
Who Is Logging In?
Sunday, June 28, 2009
Who Is Logging In?
Sunday, June 28, 2009
Who Is Logging In?
Sunday, June 28, 2009
The INs Summary
• Goal: Allow a Google Friend Connect user to log into your site as if they were a registered user.
• • Approacho Let users log in with JavaScript o Fetch social data with REST callso Adapt your data store for social user datao Create an authorization flowo Cache for performance
Sunday, June 28, 2009
The MIDDLE
© PhotoXpress.com http://photoxpress.com/Content/machine-equipment-factory/3216021
Sunday, June 28, 2009
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 siteo Restructure your views to take advantage of the extra
data
Sunday, June 28, 2009
Social Chrome: Per-Site Profiles
Sunday, June 28, 2009
Social Chrome: Integrated UI
• "Click to login" as a first class citizen
Sunday, June 28, 2009
Social Chrome: Smart UI
Registered user:
GFC user:
Registered user with GFC account:
Sunday, June 28, 2009
Social Makes Everything Better
• Structuring your site to encourage social behaviors• Provide incentives for logging ino "Share this with your friends"o "See what your friends are doing"
• Provide data views that are useful for everyone
Sunday, June 28, 2009
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
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
Demo: Simple social views. Building "What are my friends' favorite airplanes?"
Sunday, June 28, 2009
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
Advanced Social Views - GFC Users
• Give users a reason to come back to your site! • Help users establish relationships:
Sunday, June 28, 2009
Demo: Advanced social views. Building "Users who also
Sunday, June 28, 2009
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 citizenso Changed data views:
Displayed activities of site users and friendsEmbedded friend data into contentEncouraged social interaction around content
Sunday, June 28, 2009
The OUTs
© PhotoXpress.com http://photoxpress.com/Content/graphic-road-sign-abstract/1690408
Sunday, June 28, 2009
Learn To Share
• Goal: Let users share their experiences on your site with the rest of the web.
• • Steps:o Inviteso Activity Streams
•
Sunday, June 28, 2009
Invites
• Built-in functionality, just put a button on your page• Invite friends from linked accounts or email
Sunday, June 28, 2009
Sharing
• Get users to share your site with some of the most popular social websites
Sunday, June 28, 2009
Activity Streams
• Destinations where your activities can go• Different for each user• Depends on user permissions
Sunday, June 28, 2009
Activity Streams
• The social web has an inherent sharing nature• One activity post may wind up in many places!
Sunday, June 28, 2009
Activity Streams
• Activities mean greater exposure• Exposure drives users to your site
Sunday, June 28, 2009
Clever CURLing Related Title Here
• Posting activities also done via REST: • Posting from the command line:
data="{\"title\":\"a title", \"body\":\"test\"}" curl -X POST $url \ -H "Content-Type: application/json" \ -d "$data"
url = "http://www.google.com/friendconnect/api /activities/@me/@self?fcauth=<fcauth>
Sunday, June 28, 2009
Sharing With Your Site Members
• Activity updates on your site are available in your site's activity stream feed:
Sunday, June 28, 2009
Sharing With The World
• Activity updates are viewable across every GFC site by looking at a user's profile
Sunday, June 28, 2009
Demo: Writing activities server-side.
Sunday, June 28, 2009
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 contento Used activity streams to maximize site exposure
Sunday, June 28, 2009
Google Friend Connect in the real world: TIME.com and Huffington Post
Sunday, June 28, 2009
“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
06.0
8 X
XX
2009 TIME.com Social Lists
May 2009
Sunday, June 28, 2009
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
Pageviews in April were the highest in TIME.com history!
Record User Engagement ● Time.com users consumed 14 pageviews per person, which is the
highest in TIME.com history!*
Record Site Traffic● TIME.com pageviews increased by +195% year over year*
TIME.com Multimedia Highlights● Video streams experienced a 61% increase vs. last month
Sources – *Nielsen Net Ratings Apr 2009 vs Apr 2008
TIME.com April Traffic Highlights
Pageviews (000)
PV Per Person
Sunday, June 28, 2009
Pageviews in April were the highest in TIME.com history!
Record User Engagement ● Time.com users consumed 14 pageviews per person, which is the
highest in TIME.com history!*
Record Site Traffic● TIME.com pageviews increased by +195% year over year*
TIME.com Multimedia Highlights● Video streams experienced a 61% increase vs. last month
Sources – *Nielsen Net Ratings Apr 2009 vs Apr 2008
TIME.com April Traffic Highlights
Pageviews (000)
PV Per Person
Sunday, June 28, 2009
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
Specials Traffic
176MM From January – April 2009
Sunday, June 28, 2009
Challenge
How can we make our daily Top 10’s more fun and engaging?
Sunday, June 28, 2009
Sunday, June 28, 2009
TIME Social Lists Demo
Sunday, June 28, 2009
Architecture
Javascript APIs
JSONP
HTML + JavaScript
Sunday, June 28, 2009
Sunday, June 28, 2009
HuffingtonPost Demo
Sunday, June 28, 2009
Sunday, June 28, 2009
Sunday, June 28, 2009
In Conclusion...
Photo by specialkrb http://www.flickr.com/photos/specialkrb/3265303889/
Sunday, June 28, 2009
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 RESTo Data model, cache
• Use social signals to highlight content • Use content to make new social connections
o Social Chromeo Social Views
• Let users share their experiences on your site
with the rest of the web.o Invites o Activities
Sunday, June 28, 2009
Sunday, June 28, 2009
Sunday, June 28, 2009
Top Related