Page 0: Page 1: vodpod.com A service for building, sharing and publishing collections of videos • • • • • • • • Founded: Apr 2006 Launched: Dec 2006 Mark Hall, Scott Persinger, Spencer Miles Self-funded (raising a venture round) Technology: RoR, Apache, PostgreSQL, Softlayer http://geekblog.vodpod.com http://apps.facebook.com/vodpod-videos We're Hiring Page 2: Page 3: widget Page 4: Facebook on Rails ● Port your app to facebook, using their new F8 Platform 20,000,000+ facebook users Great way to increase exposure to your web site iLike has signed up 3,000,000 users in a few weeks http://apps.facebook.com/vodpod-videos ● ● ● ● Page 5: Ingredients ● Backend logic – session management ● should be easier with RFacebook 0.6 (we use 0.5.1) – – ● app installation/removal linking facebook accounts to vod:pod user accounts Canvas Page (iframe or fbml) Facebook profile box post activity to a users news feed Display logic – – ● News Feed – Page 6: Facebook on Rails ● App display consist of two main parts – Canvas Page ● Can either be an iframe or fbml (facebook markup language) must be FBML, no javascript support, limited mockajax – Profile box ● Page 7: Profile Box (fbml) Page 8: Canvas Page (iframe or fbml) ● Facebook Canvas pages are presented within the Facebook frame and can either be FBML or an external html site presented within an iframe. Page 9: FBML vs. Iframe ● Need to decide whether your canvas page will be FBML or Iframe based FBML – ● Allows for basic HTML, and unique facebook extension tags ● fb:friend-selector, fb:if-is-friends-with-viewer, fb:tabs, fb:wallpost, etc... – Makes it easier to provide a consistent facebook look and feel No javascript support “Mock” Ajax support – – Page 10: FBML vs. Iframe ● Iframe – Requests to the canvas page are redirected to your app server, and displayed in an iframe Pros ● ● – Full html, css, javascript support Easy to port existing rails views You need to write CSS to mimic facebook UI Handy FBML extensions like 'fb:friend-selector' need to be written by hand – Cons ● ● Page 11: Setting up your App ● http://www.facebook.com/developers – apply for new key Path on facebook where your app will live http://apps.facebook.com/vodpod-videos/ Path to the facebook app on your servers http://facebook.vodpod.com/facebook/ Requests to the canvas URL will be redirected to the callback URL apps.facebook.com/vodpod-videos/user/spencer -> facebook.vodpod.com/facebook/user/spencer ● Canvas Page URL – – ● Callback URL – – – – Page 12: RFacebook ● Vod:Pod uses rfacebook 0.5.1 – – Minimal support for Facebook Platform vod:pod uses 0.5.1, rolled our own methods for session management Contains support for the facebook platform Nice controller extensions for managing facebook sessions, logins and app installation ● ● ● ● Rfacebook 0.6.1 – – before_filter :require_facebook_login before_filter :require_facebook_install fbsession Page 13: App Installation ● User finds your app in directory, or on a friends profile, and clicks “Add” – User is prompted to give your app access to their profile. Upon acceptance, your API key has access to read/write this user profile User is then redirected to an “install” callback URL of your choice ● – At this we create a vod:pod User, linked to the facebook account We have a 'facebook_uid' column on our users ● Page 14: Session Logic/Workflow ● User loads your canvas page for the first time – Facebook GETs your canvas callback url, and passes in an 'auth_token' parameter Vod:Pod App calls facebook API (facebook.auth.getSession) with auth token. Facebook returns session object. – def init_session session[:facebook_session] ||= RFacebook::FacebookWebSession.new(API_KEY, API_SECRET) if params[:auth_token] begin session[:facebook_session].activate_with_token(params[:auth_token]) rescue RFacebook::FacebookSession::RemoteException => e redirect_to session[:facebook_session].get_login_url return false end end end Page 15: Session Logic/Workflow, Part 2 ● User loads your canvas page, is already authenticated and has session – – Vod:Pod looks up user with the FB uid. If user exists, sets as the current_user. before_filter :fb_check_user def fb_check_user # Is the facebook session authenticated? if @fb_session.session_uid # lookup vodpod user user = User.find_by_facebook_uid(@fb_session.session_uid) if user self.current_user = user return end end self.current_user = nil session[:user] = nil end Page 16: REST API ● Lots of methods for querying Facebook users.getInfo, friends.get, feed.publishActionOfUser, profile.setFBML, etc... RFacebook: – ● ● Uses hpricot for parsing xml responses user = fbsession.users_getInfo({:uids => [uid1, uid2, uid3], :fields => ['uid', 'name', 'pic_square']}) (response/'user').each do |user| uid = user.at('uid').inner_html name = user.at('name').inner_html pic_url = user.at('pic_square').inner_html puts “UID: #{uid} end Name: #{name} Pic: #{pic_url}” Page 17: FQL ● Facebook Query Language. – – SQL like language for accessing FB data SELECT uid, name, pic_square FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1=211031 OR uid1=1309583) http://developers.facebook.com/documentation.php?v=1.0&method=fql.query – def get_uninvited_friends(uid) response = fbsession.fql_query( {:query => "SELECT uid, name, pic_square FROM user WHERE \ uid IN (SELECT uid2 FROM friend WHERE uid1=#{uid}) AND NOT is_app_user"}) return (response/'user').sort_by{|u| u.at('name').inner_html} end Page 18: FacebookController ● See: http://www.livelearncode.com/archives/14 class FacebookController < ApplicationController before_filter :require_facebook_login, :only => [:index] # This will be your canvas page. def index attrs = get_user_attributes(fbsession.session_user_id, [”first_name”, “last_name”]) @firstName = attrs[:first_name] @lastName = attrs[:last_name] end private def get_user_attributes(uid, attributes) response = fbsession.users_getInfo( {:uids => [uid], :fields => attributes}) attrs = {} attributes.each {|key| attrs[key.to_sym] = response.search(key.to_s)[0].inner_html} attrs end end Page 19: Creating the Profile FBML Block Page 20: Creating the Profile FBML Block ● ● Call profile.setFBML, with the user_id to update, and the FBML. You need to do this whenever you want to update the profile fbsession.profile_setFBML({:uid => fbsession.session_uid, :markup => render_to_string(:partial => 'profile_fbml', :locals => {:user => current_user}) }) The FBML: <fb:title>Vod:Pod Videos</fb:title> <fb:subtitle> <fb:name uid="profileowner" firstnameonly="true" useyou="false"/> has collected <%= pluralize(user.facebook_pod.videos_count, 'video') %>. </fb:subtitle> <% videos = user.facebook_pod.recent_videos(6) %> <div style="margin-left:30px;"> <% videos.each do |video| %> <%= link_to image_tag(video.thumbnail_url), video_url(video) %> <% end %> </div> Page 21: Invite Friends to use App def invite if request.post? begin response = fbsession.notifications_sendRequest( {:to_ids => params[:facebook_uids], :type => 'Vod:Pod', :content => “FBML for the request message”, :image => 'http://www.vodpod.com/images/vodpod_square.gif', :invite => false}) rescue Exception => e return render :text => “error”, :content_type => 'text/plain' end confirm_url = CGI.unescapeHTML ((response/'notifications_sendrequest_response').inner_html) redirect_to "#{confirm_url}&canvas" else render :action => 'invite' end end Essential for Iframe apps Page 22: Post to User's News Feed def post_feed_item(title) begin fbsession.feed_publishActionOfUser({:uid => fbsession.session_uid, :title => title}) rescue Exception => e log "FACEBOOK: Couldn't post comment to news feed: #{e}" end end post_feed_item "added video #{profile_video_link(groupvideo)}" Page 23: Problems ● Asynchronously posting to user's news feed or profile – Facebook allows for “infinite sessions”, but a user has to explicity sign up for the infinite session, which can't be counted on ● Facebook not adding new apps to the directory Page 24: Resources ● http://developers.facebook.com – API docs, FBML docs, API test console (crappy and limited), FBML test console, Wiki Completely different than developers.facebook.com – GREAT! Discussion forum Create/administer your applications here Rfacebook documentation This presentation ● http://www.facebook.com/developers – – – ● http://www.livelearncode.com/archives/14 – ● http://geekblog.vodpod.com – Page 25: