33
Facebook Apps: Thinking about UI in a social way Wayne Graham, UVa Arin Sime , OpenSource Connections

Ed Ui - The Facebook API: Thinking about UI in a social way

Embed Size (px)

DESCRIPTION

Presented at EdUI 2009 at the University of Virginia, this presentation talks about UI and application design from the perspective of a Facebook application. First, UVa's Wayne Graham describes how Facebook applications works. Then Arin Sime, a Senior Consultant with OpenSource Connections, talks about best practices for developing facebook applications that will actually be used.

Citation preview

Page 1: Ed Ui - The Facebook API:  Thinking about UI in a social way

Facebook Apps: Thinking about UI

in a social way

Wayne Graham, UVaArin Sime , OpenSource Connections

Page 2: Ed Ui - The Facebook API:  Thinking about UI in a social way

About Us

• Wayne Graham

• MA in History

• 10 years in higher ed/digital humanities

• Community Development

• Geek

• Facebook API Developer’s Guide

• Arin Sime• Software consultant with

OpenSource Connections

• UVa grad student at McIntire

• Adjunct instructor at VCU

• Working on challenge based fundraising tools for Facebook

Page 3: Ed Ui - The Facebook API:  Thinking about UI in a social way

http://www.redstamp.com/products/1931-Who-Cares-Sticky-Notes-Anne-Taintor

Page 4: Ed Ui - The Facebook API:  Thinking about UI in a social way

Is this a good idea

• 300+ million users

• Advertise events

• Connect with students and prospective students

• Limits...

Page 5: Ed Ui - The Facebook API:  Thinking about UI in a social way

Web APIs

• Extend existing applications

• Web services...

• Mashups

http://www.internetannoyanceday.com/wp-content/uploads/2009/04/programmer.jpg

Page 6: Ed Ui - The Facebook API:  Thinking about UI in a social way

Facebook API Workflow

Page 7: Ed Ui - The Facebook API:  Thinking about UI in a social way

Official Libraries

• Java

• PHP 5

• JavaScript

• iPhone (Objective C)

• ActionScript 3

• Force.com

Page 8: Ed Ui - The Facebook API:  Thinking about UI in a social way

Unsupported LibrariesAndroid

•ASP.net

•Cocoa

•ColdFusion

•C++

•C#

I can haz

my language

plzkthx

• Lisp• Perl• Python• Ruby• Smalltalk• Tcl• VB.NET• Windows Mobile• zembly

Page 9: Ed Ui - The Facebook API:  Thinking about UI in a social way

Components

• API (REST calls)

• FQL (Facebook Query Language)

• FBML/XFBML (extension of X/HTML tags)

• FBJS (scrubbed JS)

Page 10: Ed Ui - The Facebook API:  Thinking about UI in a social way

API Components

• Authorization

• Data Store

• Permissions

• Photo/Video Uploads

• Notification

Page 11: Ed Ui - The Facebook API:  Thinking about UI in a social way

First Steps

• Add Developer App (http://www.facebook.com/developers)

• Wiki (http://wiki.developers.facebook.com)

• Developer Forum (http://forum.developers.facebook.com/)

• Get a sample app

• Write Unit Tests!!!

Page 12: Ed Ui - The Facebook API:  Thinking about UI in a social way

Yo Dude, I’m real happy for you.Imma gonna let you finishbut MySpace is one of the best APIs of all time!!!

Page 13: Ed Ui - The Facebook API:  Thinking about UI in a social way

From one extreme...

http://apps.facebook.com/thesocialcircles/

Page 14: Ed Ui - The Facebook API:  Thinking about UI in a social way

... to the other extreme

http://apps.facebook.com/thesocialcircles/

Page 15: Ed Ui - The Facebook API:  Thinking about UI in a social way

Putting it all together

Page 16: Ed Ui - The Facebook API:  Thinking about UI in a social way

Facebook app

lifecycle

Page 17: Ed Ui - The Facebook API:  Thinking about UI in a social way

Get the Add

1. G

et t

he A

dd

Page 18: Ed Ui - The Facebook API:  Thinking about UI in a social way

Get the AddSetup

2. S

etup

Page 19: Ed Ui - The Facebook API:  Thinking about UI in a social way

Get the AddSetup

Incentivize

3. In

cent

iviz

e

Page 20: Ed Ui - The Facebook API:  Thinking about UI in a social way

Get the AddSetup

Incentivize

Shar

e

4. S

hare

Page 21: Ed Ui - The Facebook API:  Thinking about UI in a social way

Get the AddSetup

Incentivize

Shar

e

Feed5. F

eed

Page 22: Ed Ui - The Facebook API:  Thinking about UI in a social way

Get the AddSetup

Incentivize

Shar

e

Feed

Com

e ba

ck!

6. C

ome

back

!

Page 23: Ed Ui - The Facebook API:  Thinking about UI in a social way

Get the AddSetup

Incentivize

Shar

e

Feed

Com

e ba

ck!

And if you get it right...

Page 24: Ed Ui - The Facebook API:  Thinking about UI in a social way

Get the AddSetup

Incentivize

Shar

e

Feed

Com

e ba

ck!

And if you get it right...

Page 25: Ed Ui - The Facebook API:  Thinking about UI in a social way

Get the AddSetup

Incentivize

Shar

e

Feed

Com

e ba

ck!

And if you get it right...

Page 26: Ed Ui - The Facebook API:  Thinking about UI in a social way

Facebook Athenaeum• Get Facebook users to library resources

• Provide a social “hook”

• Open Source

Page 27: Ed Ui - The Facebook API:  Thinking about UI in a social way

Business

Page 28: Ed Ui - The Facebook API:  Thinking about UI in a social way

Hook

Page 29: Ed Ui - The Facebook API:  Thinking about UI in a social way

Questions?

http://www.facebook.com/designhttp://www.ustream.tv/channel/facebook-tech-talks

Wayne Graham, UVaArin Sime , OpenSource Connections

Page 30: Ed Ui - The Facebook API:  Thinking about UI in a social way

Oh yeah, code...

Page 31: Ed Ui - The Facebook API:  Thinking about UI in a social way

Oh yeah, code...

response = fbsession.users_getInfo(:uids =>

[fbsession.session_user_id], :fields => ["first_name", "last_name", "name",

"uid"])

Page 32: Ed Ui - The Facebook API:  Thinking about UI in a social way

Oh yeah, code...

Page 33: Ed Ui - The Facebook API:  Thinking about UI in a social way