I've created a Facebook iframe app (NOT a Canvas app) that I'm looking to install on various client's facebook pages. Let's say my iframe is at http://fb.mysite.com/iframe/ . I want to pass a client_id to this app when I'm adding it to a client's FB page, so the contents of the iframe will vary depending on the client. I don't want to create separate apps for each client that would have e.g. http://fb.mysite.com/iframe/?client_id=1 or http://fb.mtsite.com/iframe/?client_id=2 etc.
While testing, I've been adding the app to a page by visting
https://www.facebook.com/dialog/pagetab?app_id=MY_APP_ID&next=https%3A%2F%2Fwww.facebook.com
while signed in as the client and adding the app to their page via the dialog that appears at that link. This is where I'd like to pass the client_id. I've tried both appending e.g. client_id=1, so by visiting
https://www.facebook.com/dialog/pagetab?app_id=MY_APP_ID&next=https%3A%2F%2Fwww.facebook.com&client_id=1
, as well as using the app_data parameter (so, it'd be
https://www.facebook.com/dialog/pagetab?app_id=MY_APP_ID&next=https%3A%2F%2Fwww.facebook.com&app_data={"client_id"%3A1}
) and even generating a signed_request containing app_data (
https://www.facebook.com/dialog/pagetab?app_id=MY_APP_ID&next=https%3A%2F%2Fwww.facebook.com&signed_request=xxxxxx
) but no joy.
When I decode the signed_request that comes through from Facebook at http://fb.mysite.com/iframe/, the app_data value isn't present.
Am I missing something here? Is what I'm trying to do possible? Thanks
Related
I have created a Facebook Application which will be used as a Facebook Tab Page. My problem is that I am unable to get the page id.
I want to use this single application for multiple Facebook Page Tabs but the content will vary based on the Page Id.
The code I am trying to use to get the signed_request is using the JavaScript SDK.
FB.getLoginStatus(function(response) {
console.log(response);
})
This can be done with the signed_request parameter, which is passed on to your URL.
The easiest solution is to use the PHP SDK. It offers a function called "getSignedRequest": https://developers.facebook.com/docs/reference/php/facebook-getSignedRequest
Those are the fields of the signed_request parameter: https://developers.facebook.com/docs/reference/login/signed-request
If you don´t want to use the PHP, you need to parse the parameter on your own. Check out this link for more information and search for "Parsing the Signed Request": https://developers.facebook.com/docs/facebook-login/using-login-with-games
Edit: you will not get the correct signed_request using the JavaScript SDK. Use PHP (or your server language) for this.
The mistake was that the URL added in the Facebook page tab settings was getting redirected as it did not have a "/"; there was a redirect for SEO added and the URL in the Facebook APP sittings did not have the "/".
So as it was getting redirected Facebook sent the POST variable but we have not handled it. Now it is fixed.
Special thanks to #luschn and #Fran Barbero for all your efforts in this.
I'm working on a photo contest fb app to run in a fan page tab. the user should be able to share the photo in order for others to vote for them.
supposing image link in iframe is http://example.com/image.php?id=1 for particular photo, pressing share will share this link through iframe. which leads up to the host app itself.
what I need is sharing the whole fb app tab page url with http://example.com/image.php?id=1 open in its Iframe.
is that possible in any way?
thanks for help.
So to give the “alternative” to #Lix’ answer, which focuses on canvas apps, here the analog way for page tab apps:
For some reason Facebook decided to do things differently for page tab apps – different than with canvas apps, you can not pass just any GET parameters to your app by appending them to the facebook.com address of your app, but you have to use the app_data parameter for that.
You call/link to your app in the form https://www.facebook.com/YourPage?v=app_1234567890&app_data=foo – and whatever you put as value for the parameter app_data, you will find in the signed_request parameter that Facebook POSTs to your app on initial(!) load into the iframe.
So you parse the signed_request (or let f.e. the PHP SDK do that for you), and then you find the app_data value in there. If you want to pass more than one single value, you can f.e. also put JSON-encoded data there – then you have to decode that again after you read the app_data value from the signed request.
The docs just shortly mention the app_data parameter, but the principle itself is quite simple.
Now, when it comes to sharing those links, I found that when you use an address in the above form, Facebook tends to cut the parameters from the URL, and treat the whole link as just a link to your Facebook page – it shows the page’s picture and description, and does not even pass your page tab app along, let alone the app_data parameter.
I found the most reliable way around this is not to link to your page tab on Facebook directly, but instead to a URL of your own app. When the scraper visits it, you deliver the relevant OG information. And when it’s a real user visiting, you redirect them to your page tab app, passing the data you need via the app_data parameter as described above. Redirecting can either be done server-side (info on how to detect the scraper server-side via its User-Agent header), or client-side via JavaScript (which the scraper does not “speak”).
Sure it is. All you have to do is be able to extract the information from your application canvas URL. If your canvas URL is something like this:
https://apps.facebook.com/ImadBakir
Then you could place some more info in there, like this:
https://apps.facebook.com/ImadBakir?photo_id=123
Users will share that link and now in your application, you can parse that photo_id parameter and make the needed HTML changes to display the correct image inside your iframe as the page and application loads.
With regard to parsing the the URL parameters, assuming you'll be doing it with JavaScript, you can read more about it in this post:
How can I get query string values in JavaScript?
I developed a facebook fan page app with PHP SDK and am successfully running it. I have a Fan Gate implemented, that is, users have to like the page before they can use the app.
What I could not solve until yet is this: I would like to prevent my app from running outside of the Facebook iframe. As of now my app can run in a new browser tab or window, when a user copies and pastes the URL (of the iframe src). At this point I'd like to give an error message like "This app can only run in a Facebook tab".
I am catching the signed_request but as my app has subpages and routines, I have to store the signed_request in a session variable.
Any advices?
Ok, so what I usually do is provide data in the app_data field of signed_request to know which page to load. When POSTing, I redirect to the tab directly after processing the payload.
So, there are two methods a page, that is actually a facebook tab, may be requested: GET and POST.
GET
When using GET, the tab should always be requested using a facebook URL. For example: The tab's subpage "form" should have a URL like: http://www.facebook.com/pages/xXx/[page_id]?sk=app_[app_id]&app_data=form
In your server-side code you recognize the data in app_data after decoding the signed_request (see 1 and 2).
In your links to the form page, you also have to add the target="parent" attribute.
By this, facebook is reloaded and the tab feels slower than when you directly link the subpages. But you have URLs that identify a subpage, which is what we prefer.
Additionally, you can expect every GET request to have a signed_request. If it doesn't, it is not called via facebook and you can either show an error message or, what I suggest, redirect to you tab (sub-page).
POST
POSTs never have a signed_request. But usually, when surfing, browsers use GET requests. So you can assume, if you receive a POST request, it is either from your own form or a hacking attempt.
In both cases, you check the values of that request for validity.
If they are valid, you save them to your DB and redirect to a "success" page. E.g. if you are up for a contest, you should show a page that assures the user he/she has successfully participated.
If the data is not valid, you save your error messages into the session and redirect back to the form where you show them.
I always suggest you redirect after a POST request, no matter if you are in a facebook tab or not. But in a facebook tab, the redirect must be done using a javascript since it is within an IFRAME and you want the whole page to reload:
<script type="text/javascript">
parent.location.href = 'http://www.facebook.com/pages/xXx/[page_id]?sk=app_[app_id]&app_data=form';
</script>
Post scriptum 1: For me, forms always use POST requests.
Post scriptum 2: If you don't like the idea of the whole facebook "frame" to be reloaded every click, you can think of doing some AJAX magic where the requests are "spiced" with extra data for you to recognize them as "yours".
i have a tab in a page, with an iframe to a site built up to be like a simple facebook app, where users can create simple profile pages with an image and some text.
Now, once the profile is created (which is a simple html page with its own URL), i need to be able to share it, using some sharing services (like addthis) or even the standard send button. The problem is that the original site has to be always hidden (users have to not be able to see the URL of the "site"), but the sharing system need an absolute URL to know... what to actually share.
Obiouvsly, working in an iframe, the url is always that of the facebook page (it doesn't change navigating the site's pages), so how can I do this?
Thanks.
The problem is that the original site has to be always hidden (users have to not be able to see the URL of the "site")
Why not?
Please don’t say “security concerns” right now, because you should know there is no such thing as “security by obscurity” …
If you just want to have Open Graph URLs, that can be liked and shared, but want the user clicking on one of those URLs end up being in your iframe tab on Facebook again – then do a redirect to your page tab for actual users.
Either do it via JavaScript (which the Facebook scraper does not care about); or with a server-side redirect for any client that is not the Facebook scraper (it’s identifiable by it’s user agent or originating IP address of the request).
We are working on a facebook-app with lots of dynamic pages. As the app is embedded in a tab on a facebook page, the urls contain a get-parameter to address the correct tab/app. We want to implement like- and send-buttons for several pages within our app, but facebook seems to dump all get-parameters from urls within facebook. As the result all like- and send-buttons point to the facebook-page itself instead of the tab.
Does anybody now any workaround? We already tried redirects via an external sefor facebook urls only.rver but facebook seems to evaluate the links on click of the like-/send-button (and seems to follow all sort of redirects).
UPDATE:
Here is an example of a problematic url:
https://www.facebook.com/smartmobil.de?sk=app_171502639574871
UPDATE:
The problem seems to be independant of url get-parameters. It seems that the like-button does not work with any url starting with www.facebook.com
When used in a like-button everything behind the ? will be dumped. This seems to happen for facebook urls only.
Best workaround so far is to point your like buttons at external (non-facebook canvas) urls.
To make this work, you need to do some conditional redirecting to get the user back into your canvas URL. You can either use a client side javascript redirect:
<script>
window.location = 'http://apps.facebook.com/yourcanvasname/foo/bar';
</script>
Or you can do a server side redirect based on the useragent string. Basically, if the useragent contains 'facebookexternalhit' then render a basic HTML page containing OG tags, if not, redirect to the canvas URL.
Doing this means the Facebook sharescraper/linter won't follow any redirects back to the canvas URL, but any user that arrives at your URL will get back to Canvas.
i'm too searching for a solution to control the custom page tab's content through a get parameter (app_data). I still don't have a solution but here at least the reason why all www.facebook.com links are srtiped out of get params. Here at bottom the developer explains why.
Unfortunately I don't think what you are trying to do is possible. Posting a like programmatically requires you to specify a Facebook content ID or alias. This won't work for you because tabs to not seem to have an exposed content ID of their own, and instead use the Page's content ID with an additional parameter which you can't use with the graph.
Liking external links and other content that does not have an ID programmatically is prohibited. With an external URL, the first like of an unrecognised URL creates a new Facebook page for those likes to be represented on (which is the issue I've given up trying to fight), but presumably the presence of your Page's content ID alias (www.facebook.com/smartmobil.de) in the url is making Facebook choose you page rather than creating a new one.
The only suggestion I can think of this late at night is to target an external URL that performs a redirect via Javascript, rather than on the server, but Facebook may be wise to that too and I'm afraid I'm going to bed rather than testing it :)