I am starting my first Facebook app, hosted on Heroku. I have set up an app on Heroku for production and a separate app running locally on my own machine for development. Currently, the app (which has very little functionality) runs on localhost just fine. But I don't understand if the app should be able to run like a typical canvas app on the localhost with Facebook functionality. For example, will the Requests Dialog run in a canvas app locally. Should I be able to use that functionality locally as I develop? If so, what steps do I need to take to get that working?
The differences
The only real difference between a standalone site and a canvas app (or page tab) you'll see is that you won't have a signed_request passed in when you load your page.
App dialog will still work, but in popup instead of directly on the page. Plus, you'll be able to login user like you would if you set your local dev URL (eg http://localhost:5000) in the Facebook app settings under "Website with Facebook Login" (or mobile web).
There's also some stuff you won't be able to test on the server like realtime update where facebook send a request to your site to notify an update.
There may be some other things, but this is what I can think about right now.
Working locally
So, what I usually do, is develop it locally. To manage the missing signed_request, I only provide a stub one or I just don't count on it being present so my app can run out of facebook too.
For login methods, I tend to rely only on the JS SDK as most of server side login through a canvas app will rely on the signed_request - and enaway, I found the UX login better via the JS SDK.
Then, I only setup two FB app, one staging and one for release. The staging app point to my locals urls so my Facebook will allow connection from it.
At this point, it should mostly work fine out of the box!
But I don't understand if the app should be able to run like a typical canvas app on the localhost with Facebook functionality
Your app should behave the same way whether it is on localhost or on the final production server.
Facebook dialogs (requests, messages..) should display on your local (dev) machine as they do on the live server. In my case to make this work I setup a secondary "facebook app" with different values for App Domains, Site URL and Canvas URL.
This allows you to run your app from localhost. If you app is canvas-only it will run inside an iframe (which points to Site URL) but will be displayed within Facebook.
Also, make sure you're including Facebook's JS API if you want to see any of the Facebook modal boxes rather than pop-up windows.
The only difference you should notice is that if you share a page from your localhost dev site via the FB API, Facebook won't be able to crawl your site and get any icon, image or description should it need to.
Related
I am working on a mobile site that will run alongside a mobile app being developed by another company. My product manager has provided a spec, in which she is mentioning two options to implement a feature:
Clicking on button from mobile app will open mobile browser, where the user will need to login again, and proceed to perform required action.
Clicking on button from mobile app will open in-app browser, user does not need to login, and completes the entire flow and closes the in-app browser.
My question is: I do not understand difference between mobile browser and in-app browser. Does in-app just mean mobile browser opened from inside the app? And if that is so, then using PHP will I be able to recognize the current login in the app? or is there any way I can ask the mobile team to set a session when they open the "in-app" browser such that I can access that session and determine who is logged in?
As you can see, I am pretty ok with PHP and server side coding, but my knowledge of these new mobile technologies is very poor...I guess I am getting just too od for this job now.. sigh.
Any pointers are very much appreciated.
I think by in-app browser he has meant WebView which opens web pages as a part of application
This question seems to be duplicate although here is the ans you probably need.
Android WebView VS Phone Browser
Have you any doubts left?
mobile browser: a complete application inside the mobile device. Common examples are Chrome, Firefox mobile, Opera Mobile.
in-app browser: it's an instance of WebView. That's a normal view inside your app layout that is able to render web-content.
To open the webview as a currently app-logged user, you generally will add some token parameter to the URL that the web development team can use to identify the user on the server.
The WebView generally behaves like a browser, but you should implement a WebViewClient to properly steer some of the navigation patterns to make sure it behaves inside your app, the way your app should.
I have been working on a website that has a mobile version. Integrated into the site is a bit of code that allows users with FB to register without having to fill out a form. If the user meets any of the following conditions all is well
Uses ANY desktop browser
Users ANY mobile browser
The FB just works. However as soon as I do an 'Add to Homescreen' with IOS to make the app look and perform like a native app, when anyone uses the FB signup I get the
'Given URL is not permitted by the application configuration: One or more of the given URL's is not allowed by the Apps settings. It must match the Website URL or the Canvas URL, or the domain must be a subdomain of one of the App domains'
I am assuming that once you use the add to home screen, and the app gets its own instanced browser, the URL changes, likely some form of localhost derivation maybe?
I can't find any definitive answers to fixing this, and was wondering if anyone else had experienced this HTML5 IOS app problem?
Looks like the dev of the extension I was using will be working on a different authentication flow, so not giving this any more dev time
I'm having a little problem with the whole Facebook app development.
I created an facebook application and gave it an IP for my server.
I set my .php script file on the server and set the secret key and appId.
When I click on the app on my Facebook account to reach it, I get an "Uploading (0%)" text on the bottom of the browser and eventually I get a message:
"This webpage is not available".
When I used the "Heroku" hosting service, I got an app.
I think the problem is the communication between Facebook and my server but I don't know what.
I tried almost everything.
Can somebody help me?
If you issue a request to your application from the linter tool?
http://developers.facebook.com/tools/debug
If you run your own application url through there and don't see any activity then Facebook just cant access your server and you need to do some work with your firewall.
I have an weird issue with facebook connect.
I've tried to run the basic example for JS & PHP SDKs.
While I connect to FB account via connect page, on my localhost it works well but in my web server it's getting refreshed non-stop.
The example is from here: https://github.com/facebook/php-sdk/tree/master/examples
(with JS).
What may be the reason for it?
Check your app URL on your Facebook application settings. This has to match the URL of the script hosting your app. Otherwise it'll try to switch to the correct one.
I am currently in the process of creating a mobile version of my web app.
The app is being developed with Facebook's PHP Client Library.
The issue:
I am using the following mobile url to allow users to log in using the mobile devices:
http://m.facebook.com/tos.php?api_key=APIKEY&v=1.0&next=http%3A%2F%2Ftweelay.net%2Fm.php&cancel=http%3A%2F%2Ftweelay.net%2Fm.php
APIKEY being my app's actual Facebook API key.
In the url I am telling Facebook to redirect the user back to http://tweelay.net/m.php when the user signs in or clicks cancel on the log in screen. I am pulling my hair trying to figure out why it keeps sending the user to http://m.tweelay.net/m.php which is currently an invalid end point.
I have gone through all of my app's settings on Facebook and I cant find any that reference http://m.tweelay.net and going through all of my source code I cant find any that reference the m. sub-domain either.
Any ideas? Is there a setting I'm missing? Maybe a Flag in the library?
I've seen Facebook do this when detecting the mobile browser type and also sometimes randomly through Firefox (it can also happen when trying to get to facebook.com). I've managed to reset it sometimes, but it's not a guaranteed fix.
If you want to be sure the user makes it to your correct site I suggest creating the subdomain and redirecting traffic to your usual site, it's what I did and now I don't worry about it reverting back.