Question

I’m trying to get a FB app to show up on it’s app page inside facebook, but the iFrame is just coming up blank. The app works perfectly on localhost and appspot, but when it loads inside facebook nothing happens.

If I view the source of the iframe, nothing comes up, but then if I refresh this page, all the code shows up fine?

I’ve tried sandbox on or off, and have two seperate apps setup for localhost and appspot. Both do the same thing.

This is my main app code

import cgi
import datetime
import urllib
import wsgiref.handlers
import os
import facebook
import os.path

from google.appengine.ext import db
from google.appengine.api import users
from google.appengine.ext import webapp
from google.appengine.ext.webapp import util
from google.appengine.ext.webapp import template
from google.appengine.ext.webapp.util import run_wsgi_app


#local
FACEBOOK_APP_ID = "----------------"
FACEBOOK_APP_SECRET = "---------------"

#live
#FACEBOOK_APP_ID = "--------"
#FACEBOOK_APP_SECRET = "--------------"




class User(db.Model):
    id = db.StringProperty(required=True)
    created = db.DateTimeProperty(auto_now_add=True)
    updated = db.DateTimeProperty(auto_now=True)
    name = db.StringProperty(required=True)
    location = db.StringProperty(required=False)
    profile_url = db.StringProperty(required=True)
    access_token = db.StringProperty(required=True)
    user_has_logged_in = db.BooleanProperty(required=True)

class PageModel:
    def __init__(self, user, friends):
            self.user = user
            self.friends = friends
            #self.length = self.friends['data'].__len__()








class BaseHandler(webapp.RequestHandler):
    """Provides access to the active Facebook user in self.current_user

    The property is lazy-loaded on first access, using the cookie saved
    by the Facebook JavaScript SDK to determine the user ID of the active
    user. See http://developers.facebook.com/docs/authentication/ for
    more information.
    """
    @property
    def current_user(self):
        if not hasattr(self, "_current_user"):
            self._current_user = None
            cookie = facebook.get_user_from_cookie(
                self.request.cookies, FACEBOOK_APP_ID, FACEBOOK_APP_SECRET)
            #if logged in
            if cookie:

                # get user from db
                user = User.get_by_key_name(cookie["uid"])
                # Store a local instance of the user data so we don't need
                # a round-trip to Facebook on every request
                if not user:
                    graph = facebook.GraphAPI(cookie["access_token"])
                    profile = graph.get_object("me")
                    user = User(key_name=str(profile["id"]),
                                id=str(profile["id"]),
                                name=profile["name"],
                                location=profile["location"]["name"],
                                profile_url=profile["link"],
                                access_token=cookie["access_token"],
                                user_has_logged_in = True)
                    user.put()
                #else if we do have a user, but their cookie access token
                #is out of date in the db, update it

                elif user.access_token != cookie["access_token"]:
                    user.access_token = cookie["access_token"]
                    user.put()

                self._current_user = user



        #user = facebook.get_user_from_cookie(self.request.cookies, FACEBOOK_APP_ID, FACEBOOK_APP_SECRET)            
            friends = "chris"
            pageModel = PageModel(self._current_user, friends)
            return pageModel




        return self._current_user


class Index(BaseHandler):
    def get(self):
        path = os.path.join(os.path.dirname(__file__), "index.html")
        #args = dict(current_user=self.current_user,
        #            facebook_app_id=FACEBOOK_APP_ID)
        args = dict(pageModel=self.current_user,
                    facebook_app_id=FACEBOOK_APP_ID)
        self.response.out.write(template.render(path, args))



application = webapp.WSGIApplication([
  ('/', Index),
  ('/savemyaddress', SaveMyAddress)
], debug=True)


def main():
  run_wsgi_app(application)
  #util.run_wsgi_app(webapp.WSGIApplication([(r"/", HomeHandler)], debug=True))

if __name__ == '__main__':
  main()

and my JS load on main page

<script>
      window.fbAsyncInit = function() {
        FB.init({appId: '{{ facebook_app_id }}',
                status: true,
                cookie: true,
                 xfbml: true});
        FB.Event.subscribe('{% if pageModel.user %}auth.logout{% else %}auth.login{% endif %}', function(response) {
          window.location.reload();
        });
      };
      (function() {
        var e = document.createElement('script');
        e.type = 'text/javascript';
        e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
      }());
    </script>

Answer 1

The problem was that the first request from facebook comes as a post request,

//initial facebook request comes in as a POST with a signed_request

if u'signed_request' in self.request.POST:
    facebook.load_signed_request(self.request.get('signed_request'))

http://developers.facebook.com/docs/samples/canvas/

So just receive a post request, and it should be OK.