I'm using the Facebook PHP SDK; setting up an app on Facebook.
I need the app to run within Canvas only, so if the user goes to this url, for example:
http://{site_url}/fbapp/index.php?this=that&that=this&etc=1
I want to:
a) redirect using javascript to the canvas page (ie. http://apps.facebook.com/appname/) and then
b) the iframe must go directly to the page within the app (ie. index.php?this=that&that=this&etc=1)
I've googled this to the moon but not getting anywhere!
Any ideas??
I've tried this:
var currlocation = location.href;
if ( window.self === window.top && !currlocation.match('facebook') ) {
location.href='https://www.facebook.com/dialog/oauth?client_id=<?= $facebook->getAppID() ?>&redirect_uri=<?= $site_url; ?>?<?= $_SERVER['QUERY_STRING']; ?>'; }
It results in an indefinite redirect loop between the site and facebook.
Instead of -
location.href='https://www.facebook.com/dialog/oauth?client_id=getAppID() ?>&redirect_uri=?';
Use-
header("Location: CANVAS_URL");
exit;
Related
SO here's what I am after. I have a FB page tab that runs the content of the site https://site.com/
I set up a FB share link to share a page aboutus.html. When I share it FB allows me to share this URL https://site.com/aboutus.html, but how can i send the traffic directly to the iFrame on the page tab? For example https://www.facebook.com/fan_page/app_331267943480920398/whatever_aboutus.html
I know it is possible because I saw it one day - cant remember now where.
Thanks.
You can't pass in filenames this way, that's only supported on Canvas Apps.
The best workaround to replicate this is using the app_data parameter. Basically, have your landing page (as defined in your app settings), be some kind of server side script which listens to the Signed Request, specifically the app_data parameter. Then you have that script load content based on the contents of that.
So as an example, let's imagine I want to load http://mybasedomain.com/foo.php or http://mybasedomain.com/bar.php. I direct users to https://www.facebook.com/PAGENAME/app_APPID?app_data=foo or https://www.facebook.com/PAGENAME/app_APPID?app_data=bar, then on my landing page, I have a simple if/else statement to parse that and render the relevant content -
<?php
// Assumes you have this parse_signed_request function - https://gist.github.com/872837
// And a $config array, which contains your app_secret
$signed_request = parse_signed_request($_REQUEST['signed_request'], $config['AppSecret']);
if ($signed_request['app_data'] === 'foo') {
include('foo.html');
} else if ($signed_request['app_data'] === 'bar') {
include('bar.html');
} else {
include('index.html');
}
i want the codes which will redirect the user to my app if he/she tries to open my app hosting site.
for ex:
my app link: https://apps.facebook.com/gaming-zone/
app hosting link: http://gaming-zone.herokuapp.com/
i have found some codes already but those codes redirects the user continously and if he is using my app on facebook and he is playing any game then also it redirects the user to app home page.
i want the exact codes that redirect the user only when he visits my hosting site.
These are the codes that i found already:
<script type='text/javascript'>
if (window.top.location == window.location)
window.top.location = 'https://apps.facebook.com/gaming-zone/';
</script>
Here is the code that I use:
<script type="text/javascript">
function NotInFacebookFrame() {
return top === self;
}
function ReferrerIsFacebookApp() {
if(document.referrer) {
return document.referrer.indexOf("apps.facebook.com") != -1;
}
return false;
}
if (NotInFacebookFrame()) {
top.location.replace("https://apps.facebook.com/YOUR_APP_NAMESPACE");
}
</script>
This checks if they are currently in the Facebook frame and ONLY if they aren't it will redirect them to "https://apps.facebook.com/YOUR_APP_NAMESPACE"
Note: you can use this on any page in you app just change the URL accordingly.
For example: If you are using this in http://YourDomain.com/anotherpage.php you can change the URL in the code above to https://apps.facebook.com/YOUR_APP_NAMESPACE/anotherpage.php
The problem is that you cannot read the window.top.location value. You can only write it. Strange but thats it.
Option 1: Mount your app to a page tab and create a like-gate. Like gate will return false outside facebook iframe ALWAYS.
Option 2: Check signed request data when loading the page at backend.
Option 3: Other option is to examinate the top url as you do but at backend.
I am building some forms using the html input tabs in Facebook.
My form actions are post and insert linking to externally hosted php
function files.
The problem is, if the user isn't using Facebook's new https setting, a pop up
is shown with "un secure form"
Is there a why to provide a secure handler externally hosted or is this something
I would have go deeper into Facebook ap making with?
Facebook loads your app into an iframe (using POSTing a form).
When the user is using https with facebook they use the Secure Canvas URL property from the app settings, and when the user is not on secure browsing they use the Canvas URL.
Because of that, your page is not loaded from https but http, which is why that warning is shown to the user by the browser.
What you can do is to check when your page is loading which protocol is used and if it's not https then reload the page from https.
Something like (using window.location object):
var location = window.location;
if (location.protocol != "https:") {
window.location.href = "https://" + location.host + "/" + location.pathname + location.search
}
Or if you don't expect to have urls in your querystring you can simply replace:
window.location.href = window.location.href.replace("http", "https");
Is there a way to deny direct access to the application server for a facebook application?
Facebook loads the application via an iFrame src=http://app-domain/, but you can clearly view the page source and find out that domain and copy paste the URL into a browser and view the application directly.
There is this signed_request and oauth_token in the API, I was wondering how to use that or if I can use that to limit direct access to the application.
So if a user inputs in the browser your application's URL he gets redirected to Facebook.
Thank you.
EDIT:
I found a way that also works with form submission.
// Signed request
$signed_request = $facebook->getSignedRequest();
if(!$signed_request) header("Location: " . $settings['appBaseUrl']);
This redirects the browser while accessing the application directly and not through facebook.
It will not work if javascript is disabled.
<script type="text/javascript">
var isInIFrame = (window.location != window.parent.location) ? true : false;
if(!isInIFrame){
window.location = 'link-of-application-page';
}
</script>
You'll need some Javascript to detect whether you're in Facebook's frame and if you're not, redirect to it.
I found a way that also works with form submission. (Works for me, it might not work for you. Test it first.)
// Signed request
$signed_request = $facebook->getSignedRequest();
if(!$signed_request) header("Location: " . $settings['appBaseUrl']);
This redirects the browser while accessing the application directly and not through facebook.
im building facebook app as a iframe app in fan page. My problem at the moment is next: i added facebook request dialog (http://developers.facebook.com/docs/reference/dialogs/requests), and everything goes well except for one thing: when a user gets notification, the links goes to canvas page, not to fan page (where i would like to go...)
Since i cant convince facebook to add some funcionality (that would be great), im looking for a way to automaticly redirect from app canvas page to fan page, where this app is added as iframe tab.
I hope somebody understands what i want to do... :)
thanks, Peter
I also wanted to make sure that users view my Facebook app via a Facebook Page Tab (rather than via the Facebook App page or by directly viewing the actual site itself). I have managed to achieve it with this Javascript in a <script> tag in the head of my document (tested Mac/PC FF,Chrome,Opera,IE6-8,Safari).
<script type="text/javascript">
function NotInFacebookFrame() {
return top === self;
}
function ReferrerIsFacebookApp() {
if(document.referrer) {
return document.referrer.indexOf("apps.facebook.com") != -1;
}
return false;
}
if (NotInFacebookFrame() || ReferrerIsFacebookApp()) {
top.location.replace("http://permalink-to-my-facebook-page-tab");
}
</script>
If I understand you correctly, you can do this:
top.location.href='http://www.facebook.com/YOUR_PAGE_NAME?sk=app_YOUR_APP_ID'
or you can use a header to redirect to that url. This will redirect to the application's tab on your fan page.
My application is quite dynamic and I never know which page it's added to. So when I used URL 'http://www.facebook.com/YOUR_PAGE_NAME?sk=app_YOUR_APP_ID' it only redirected me to page, but not to application tab. What I do is:
1) I get page id from signed_request (the encrypted in base64url parameter that your app gets once someone comes to the page, so you have to decrypt it and pick id value from JSON page object)
2) Then I get page data from https://graph.facebook.com/PAGE_ID_YOUR_GET. You get JSON object with some page data in response in JSON format.
3) Only after point 2 I get 'link' value of page from response. It's like http://www.facebook.com/pages/Some-Page-Name
4) And finally I add '?sk=app_YOUR_APP_ID' to page link.
Maybe that's too complicated, but that's the only way it worked for me the way I expected (redirecting exactly to page application tab).
<script type="text/javascript">
function NotInFacebookFrame() {
return top === self;
}
function ReferrerIsFacebookApp() {
if(document.referrer) {
return document.referrer.indexOf("apps.facebook.com") == -1;
}
return false;
}
if (NotInFacebookFrame() || ReferrerIsFacebookApp()) {
top.location.replace("http://permalink-to-my-facebook-page-tab");
}
</script>