Top Banner
Using Facebook, outside of Facebook Chris Thorpe HTTP://WWW.FLICKR.COM/PHOTOS/ E01/ Difference Engine Jaggeree /content /people /data /play
69

Using Facebook outside of Facebook

Nov 07, 2014

Download

Technology

Chris Thorpe

Talk given to the Difference Engine on Facebook Connect, Facebook for Websites and Open Graph Protocol
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Using Facebook outside of Facebook

Using Facebook, outside of FacebookChris Thorpe

HTTP://WWW.FLICKR.COM/PHOTOS/E01/

Difference Engine

Jaggeree/content/people/data/play

Page 2: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

Page 3: Using Facebook outside of Facebook

HTTP://WWW.FLICKR.COM/PHOTOS/JAGGEREE/

Difference Engine

Jaggeree/content/people/data/play

Before we dive into this...

Page 4: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

History lesson

Facebook Connect is 2 years old this year... although Connect is now Facebook for Websites

Page 5: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

Page 6: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

What sort of things can you make?

Page 7: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

Page 8: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

Page 9: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

Page 10: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

Page 11: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

Page 12: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

HTTP://WWW.FLICKR.COM/PHOTOS/WISHYMOM/

Why are we doing stuff with Connect/Facebook for Websites...

All about users, and lots of them. Not just users, but people who have curated “real” identities. Solves a major problem which is that the data you get in from registration forms is often useless. The most common ZIP codes in US data are 12345 and 90210 which means a larger than expected number of people from Schenectedy and Beverly Hills

There’s also an over representation of Afghanistan.

Page 13: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

HTTP://WWW.FLICKR.COM/PHOTOS/SOVIETUK/

Second reason for using something like connect is social proof.

It’s always more tempting to eat at a restaurant with a queue, rather than an empty one. Especially if that queue contains our friends or people we know of and trust

Connect surfaces activity constantly in newsfeeds and activity streams, we can harness that for our apps

Page 14: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

So, what is it?

At it’s basis, it’s a method for logging into Facebook and sharing the success of the login with the site supporting Connect.

Page 15: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

Page 16: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

It’s more than that though as it gives you an access token which allows you to do more such as post things to the newsfeed

Page 17: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

like this...

Page 18: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

One nice thing about Connect is that it can all be prototyped client side and if your page markup is clean and semantic, you can prototype or power live implementations just using the Connect libraries, your existing markup and something like JQuery

Page 19: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

There also used to be things like fan boxes that you could embed into your pages.

Page 20: Using Facebook outside of Facebook

HTTP://WWW.FLICKR.COM/PHOTOS/JAGGEREE/

Difference Engine

Jaggeree/content/people/data/play

Then the world changed a bit last week in San Francisco at F8

Page 21: Using Facebook outside of Facebook

HTTP://WWW.FLICKR.COM/PHOTOS/FACTORYJOE/

Difference Engine

Jaggeree/content/people/data/play

Chris Messina of Google summed it up quite well with this bit of Photoshop trickery. Facebook made something which suggested that all roads on the web led to them.

Page 22: Using Facebook outside of Facebook

HTTP://WWW.FLICKR.COM/PHOTOS/JAGGEREE/

Difference Engine

Jaggeree/content/people/data/play

They launched something called Open Graph, where it was a mixture of the content graphs within websites which are often at best hidden and at worst absent and the social graph, creating an interest graph.

Page 23: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

This new focus is clear on the developer homepage, with the focus being on Add Facebook to my site

Page 24: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

And connect is now relaunched as Facebook for websites

Page 25: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

So what is this Open Graph and where will we most likely see it...

There are a collection of simple social plugins, the one you’re most like to see or implement is called Like which is a button which is accompanied by something

Page 26: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

called the Open Graph Protocol, a standard being proposed by Facebook which for the first time brings a proposal for simple semantic metadata that describes pages in a standardised format

Page 27: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

here’s a chunk of Open Graph metadata

Page 28: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

The good news is that on the whole, it’s not just Facebook that can read the metadata. Here I’ve built a tiny app which essentially reads the meta tags and acts as a sort of generic metadata API

Page 29: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

The good news is that on the whole, it’s not just Facebook that can read the metadata. Here I’ve built a tiny app which essentially reads the meta tags and acts as a sort of generic metadata API

Page 30: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

The good news is that on the whole, it’s not just Facebook that can read the metadata. Here I’ve built a tiny app which essentially reads the meta tags and acts as a sort of generic metadata API

Page 31: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

The good news is that on the whole, it’s not just Facebook that can read the metadata. Here I’ve built a tiny app which essentially reads the meta tags and acts as a sort of generic metadata API

Page 32: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

The good news is that on the whole, it’s not just Facebook that can read the metadata. Here I’ve built a tiny app which essentially reads the meta tags and acts as a sort of generic metadata API

Page 33: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

There’s also a social plugin called the like box which is the new replacement for the Fan box

Page 34: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

And there’s a version of the Like control which allows you to add comments. This is useful for situations such as one where there is an article decrying the election of someone from the BNP being elected somewhere and allows you to provide your context around a headline such as “BNP wins seat in election” rather than just saying you like it.

Not all publishers as we saw in the Huffington Post example provide a description text.

Page 35: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

There are also activity and recommendation boxed which are powered from shares and likes. These are things you can place on your site

Page 36: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

For instance you can show most recent activity. Since many of the new Facebook for Websites controls can display information about a user’s social and interest graph just from the presence of a Facebook cookie, rather than people declaratively logging in this gives instant personalisation

Page 37: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

There’s also a recommendations box which is the longer term version of the activity box. This is about likes over all time.

Page 38: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

So how would you get all those lovely users and their details to use. This is a lot of the old Facebook Connect type stuff in here, it’s pretty much a drop in replacement apart from a slightly different structure to the Javascript.

Page 39: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

Here’s a chunk of PHP showing how you can hook the Facebook cookie for your site out and use the IDs and access tokens contained within them to get more information about the logged in user.

Page 40: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

One useful social proof style mechanism is to use the Login with Faces control. This takes the login button and shows you pictures of friends who already use the service.

Page 41: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

Or you can use a facepile which does a similar thing without the login button.

Page 42: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

When you perform the login, instead of the complicated assent form with a mix of permissions you now have a simple one size fits all request for permission box. This makes it far easier for the developer who now doesn’t have to have all sorts of fallback methods for people who don’t want to share specific permissions. The downside is people who don’t want to give those permissions will just not hit Allow.

Page 43: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

One things that has been talked about a lot is using the users existing social graph to personalise the site, pulling together lists of content such as music tracks your friends like within the core of your site. You’ve been able to do this for a while now, so this isn’t really anything new.

Page 44: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

one other control which may be of some use to those of you working with live events and media is the live stream. this is being heavily used in the run up to the General Election.

Page 45: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

Measurement and analytics of all of this is very possible, here’s some sample graphs from Insight. The lower one shows activity from Connect methods (feed story publication and interaction with it after being published)

Page 46: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

Here’s an example of a Graph API call for the likes of a page from the Washington Post, showing the Open Graph information about the story and the information about the likes (still logged as fan count).

Page 47: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

Here’s a similar Graph API query for a page in The Guardian which shows the likes/shares...

These sorts of queries can be very useful for building counters of popularity for your content.

Some publishers block this information though unless you are authenticated.

Page 48: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

So what have people done with these news APIs so far

Page 49: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

This is an example from Time magazine with the recommendations box

Page 50: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

and a like button integrated within a social distribution panel

Page 51: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

this was a lovely thing I found

http://likebutton.me/

Page 52: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

One big change to the Connect and the generic APIs is that you can now cache data fro greater than 24 hours. This is a major bonus to publishers. This information can be kept up to date by subscribing for specific updates which are then posted to you using a webhooks compliant mechanism

Page 53: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

So, what about things other than websites. Well you can do connect on Desktop clients and Adobe Air and Flash/Flex apps

Let’s talk for a little while about one really important aspect which is Connect for phones, or what is now Facebook for Mobiles.

This is an example of a Playfish game as an iPhone app with Facebook Connect to allow you to compete against your friends and reconcile your mobile scores in online score tables.

Page 54: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

There’s a client library for Facebook for the iPhone which you can use from Objective C in XCode

Page 55: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

There’s also a development environment for the iPhone called PhoneGap which allows you to make iPhone apps, either as prototypes or the real things using HTML, Javascript and CSS, compiling them in to a native app and giving you access to the underlying APIs of the phone.

Page 56: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

People have now built ways that you can use the Facebook library for the iPhone from within PhoneGap.

Page 57: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

Another lightweight app development environment that can build cross platform apps is Titanium Developer which uses native Javascript APIs as a domain specific language which is cross compiled to a Native App. It’s currently slightly unclear whether this breaks terms of service for iPhone OS4. However it’s a very impressive way of making apps quickly.

Page 58: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

And it has a set of libraries specifically for Facebook

Page 59: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

Finally there is a community contributed port of the Connect for iPhone to the Android platform. In addition there are native web clients which use the conventional Facebook for Websites controls.

Page 60: Using Facebook outside of Facebook

HTTP://WWW.FLICKR.COM/PHOTOS/JAGGEREE/

Difference Engine

Jaggeree/content/people/data/play

One more thing. We’ve talked about Facebook extending into the wider web. It’s clear they’re also interested in the physical world. There is talk of them buying Foursquare and also of having their own geoplatform. One interesting thing at F8 was the small RFID chips they gave every attendee to checkin at sessions...

Page 61: Using Facebook outside of Facebook

HTTP://WWW.FLICKR.COM/PHOTOS/JAGGEREE/

Difference Engine

Jaggeree/content/people/data/play

Which would allow status updates and an automated Like of a session. Imagine if they could bring this into the real world...

Page 62: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

@anywhere from Twitter

What else is there out there, well there are distributed identity plays such as JanRain’s RPX and Google Friend Connect which allow you to use different forms of identity such as MySpaceID, Yahoo logins, OpenID and Gmail accounts to name a few to login.

There’s also the recently released (week before F8) @anywhere from Twitter

Page 63: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

Which allows you to login to apps using your Twitter credentials

Page 64: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

and those applications can do Graph API like queries to find out more about users using simple JavaScript controls like hover cards, follow and retweet buttons

Page 65: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

and allow you to post messages from deep within sites you’ve connected with

Page 66: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

you can read a bit about some prototypes of this we made at The Guardian.

Page 67: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

Get users quick

Social proof of user actions

Social sharing of content

Social augmentation/personalisation of content

Can now cache data for more than 24 hours

So why do this...

Page 68: Using Facebook outside of Facebook

Difference Engine

Jaggeree/content/people/data/play

http://developers.facebook.com/

http://developers.facebook.com/plugins

http://developers.facebook.com/showcase/

http://developers.facebook.com/docs/api/realtime

http://developers.facebook.com/docs/guides/web

http://developers.facebook.com/docs/guides/mobile

http://www.phonegap.com/

http://www.appcelerator.com/

http://developer.twitter.com/

Here are some URLs which you may find useful. I’ll share this document on Slideshare later today.

Page 69: Using Facebook outside of Facebook

HTTP://WWW.FLICKR.COM/PHOTOS/JAGGEREE/

Chris Thorpe@jaggeree

Difference Engine

Jaggeree/content/people/data/play