building a facebook application
TRANSCRIPT
CHALLENGES DEVELOPINGA BASIC SHOPPING APPLICATION
Dennis Doubovskiwww.faboshop.nl27 October 2011
FBDG Amsterdam 2011
Me: Dennis Doubovski
My company:
Technical Internet Marketing agency
Main focus: algorithms for user behaviour
analysis used in Google marketing
We are developers, but not web developers
SOCIAL MINING
WHO
2
FBDG Amsterdam 2011 3
PROJECT: FACEBOOK SHOP
FBDG Amsterdam 2011
THIS TALK
Basic application: trials & errors
Interactive prototype: missing APIs
Things we learnt
Things we’d like Facebook to work on ;)
4
FBDG Amsterdam 2011
REALLY BASIC
SHOPPING
APPLICATION. LIST
OF PRODUCTS FROM
A WEB SHOP.
PEOPLE CAN
BROWSE AROUND, SEARCH AND SHARE.
5FBDG Amsterdam 2011
FBDG Amsterdam 2011 6
CHALLENGE
Forum post are outdated.
Old links (developers WIKI for example) do
not work.
FBDG Amsterdam 2011
GOOGLE SHOWS
OUTDATED TOPICS
ON FACEBOOK APP
DEVELOPMENT.
7FBDG Amsterdam 2011
FBDG Amsterdam 2011 8
CHALLENGE
Forum post are outdated.
Old links (developers WIKI for example) do
not work.
WHAT WE FOUND TO WORK
Facebook Dev Forum:http://facebook.stackoverflow.com/
Facebook docs:https://developers.facebook.com/docs/
Facebook ‘BugZilla’:https://developers.facebook.com/bugs/
FBDG Amsterdam 2011 9
CHALLENGE
APIs for Canvas arenot the same as for
PageTab.
Example: dialog boxes
WHAT WE FOUND TO WORK
jQuery Boxy:http://onehackoranother.com/projects/jquery/
boxy/
Limitations in PageTab:Not wider than 525 px Limited to the IFRAME
Scrolls with the IFRAMENot modal
Looks almost like Facebook
FBDG Amsterdam 2011
WORKAROUND WITH
BOXY FOR CUSTOM
DIALOGS.
10FBDG Amsterdam 2011
FBDG Amsterdam 2011 11
CHALLENGE
Page reloads (changing the URL in the IFRAME) are a bit slow for some
reason.
WHAT WE FOUND TO WORK
Use AJAX where possible.
Initialise Facebook API (Object) only when
needed.
Pages with likes must have a real URL.
FBDG Amsterdam 2011 12
CHALLENGE
Liking the page inside your application and
redirecting user to the web shop or PageTab.
WHAT WE FOUND TO WORK
Redirect script:
1) Facebook crawler gets the page.
2) User gets aredirect.
FBDG Amsterdam 2011 13
FBDG Amsterdam 2011 14
Long loading timesfor the ‘first’ page
of the app.
50+ [like]buttons cause
browser to freeze.
Broken backbutton.
UNSOLVED PROBLEMS
3 FRIENDS BUYING A PRESENT “TOGETHER”
FBDG Amsterdam 2011 16
FOR “TOGETHER” WE NEED...
1 Inviting friends to participate in a the same session.
2 Chatting with each other about the products.
3 Sharing seen products with the group.
FBDG Amsterdam 2011 17
CHALLENGE
Inviting friends to joina group session
in the app.
There seems to be an API call in Canvas, but
it didn’t work in PageTab.
WHAT WE FOUND TO WORK
We send a messageto participants witha URL containing
&app_data-parameter.https://developers.facebook.com/docs/
authentication/signed_request/
FBDG Amsterdam 2011
THIS WOULD BE NICE
18
FBDG Amsterdam 2011 19
CHALLENGE
Starting a group chat from the application.
Sharing a session:shared product
inventory.
WHAT WE FOUND TO WORK
COMET patternworked well.
http://cometd.org/
http://www.screenr.com/SNH
FBDG Amsterdam 2011
Client opens an AJAXrequest to the server.
The server sends Javascript back as a never ending chunk encoded stream.
Every chunk is evaluated with eval()-function.
Last chunk never comes.
20
FBDG Amsterdam 2011 21
Facebook Dev Forum:http://facebook.stackoverflow.com/
Facebook docs:https://developers.facebook.com/docs/
Use AJAX where possible.
There are workarounds for a lot of things.
Keep looking.
THINGS WE’VE LEARNT
FBDG Amsterdam 2011 22
Support for backbone.js-like wayfor the back button.
http://documentcloud.github.com/backbone/
Progress bar whileapp is loading.
Custom dialogs which can be larger than the
PageTab IFRAME.
THINGS WE’D LIKE TO SEE #1
FBDG Amsterdam 2011 23
Shared “memory” for the users to share data
between them.
Friends invite to participate in an app
session.
Group chat initiatedby the app.
THINGS WE’D LIKE TO SEE #2
THANK YOU FOR LISTENING