0

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.

ImadBakir
  • 553
  • 1
  • 7
  • 26

2 Answers2

2

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”).

CBroe
  • 91,630
  • 14
  • 92
  • 150
  • That seems great, I will give it a shot and give feedback, accept if solves my problem, thank you so much for your effort that was comprehensive – ImadBakir Oct 07 '13 at 10:29
  • @CBore , that was great, I let the user share a link `show_image.php?id=4&redirect=1` check there for redirect if exists redirect to ` https://www.facebook.com/YourPage?v=app_1234567890&app_data=4` and parse request, if exists redirect IFrame to show_image. Thanks a lot – ImadBakir Oct 09 '13 at 06:42
1

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?

Community
  • 1
  • 1
Lix
  • 47,311
  • 12
  • 103
  • 131
  • 1
    Correct answer for canvas, but he’s talking about a page tab app. As you know, in that case you have to use the `app_data` parameter, and get it out of the `signed_request` on initial load. / But sharing a link of the format `facebook.com/pagename/app_1234?app_data=foo` does not work from my experience, Facebook cuts of the app_data parameter, or even the whole app id, and makes it a link to the page itself instead. I’d recommend setting up the app URL itself to deliver the necessary OG data, and have it redirect to the page tab app when a user visits it. – CBroe Oct 07 '13 at 07:48
  • @CBroe is right, I gave it a try, didn't work in page tab. still I didn't understand your suggestion . – ImadBakir Oct 07 '13 at 08:35