I want to embed a store locator in Facebook the way footlocker does.
Is it possible to just make a facebook app that serves my stand-alone store-locator page without having to re-write my store-locator page for facebook?
Any good guides/how-tos for serving a stand-alone page through a facebook app like this?
This is very common and easy to do. All you have to do is create a facebook application and point your "canvas url" to your store locator page. So for example, if your store locator is www.example.com/storelocator set your Facebook application's canvas url to that page. If you look at that footlocker app you can see that the url of the iframe is actually http://unlocked.footlocker.com/main_store_locator/
If I understand you correctly, you are looking for the canvas guide. According to the documentation you can show your page in an iframe inside a tab on your facebook page.
Unfortunately, no. When you add a FBML/iframe app to your Facebook page, Facebook loads the content, caches it, and injects it into the DOM; it does not actually load it in an iframe. As such, there are restrictions about which elements can be included (eg, only <body> content), how Javascript is used (external libraries require some tweaking), and any element that references an external source (eg, Flash loading content) must have the target domain whitelisted for your application. In short: it's a pain, but it can be done.
Related
Trying to decide between creating a Page App vs. iFrame (Load a hosted page somewhere else like AWS or APP Engine)
I am trying to create a 'tab' on a Facebook page where users can upload pictures to that page for a contest app.
I would like to create some customisation for this contest page.
Hence not using popular off the shelf contest providers like wishpond etx.
The user should be able to view his uploaded pictures on the top layout of the screen while the latest uploads of other users (trending, most liked) can get displayed at the remaining mid, bottom section of the page.
To attain this feature of custom layouting a page, would you recommend creating a 'page app' or create a Javascript based HTML page and host it outside on 'external web server' and render in an iFrame app within my tab ?
If it can be done both ways, would like to hear some adv/disadvantages of each approach.
Hope it explains.
Let me know if I was not clear.
Thanks,
Srik
What´s better is opinionated, but here are the main differences between a Page App (that runs in an iframe on a Facebook Page) and an external Website:
Page Apps don´t work on mobile, so you have to share an external link, check for mobile and keep mobile users on the external link while redirecting desktop users to the Page App.
Page apps are restricted to a width of 810px.
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 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).
Is it possible to get the referring URL to a Facebook page tab?
Right now the referring url is always http://static.ak.facebook.com/platform/page_proxy.php?v=5 and I can't find any documentation about this subject. Is facebook providing this param (I can't find it in the signed_request for example). or is there any workaround? for example would it work if i used a canvas app vs an iframe tab?
for example would it work if i used a canvas app vs an iframe tab?
Nope, the are both loaded in pretty much the same way.
If you have control over the links pointing to your canvas/page tab app, then you can add the "app_data" parameter to those links – that is passed through to your app when Facebook loads it – and then just evaluate that to differentiate between different points of origin.
If it’s about outside links from somewhere on the web – then there’s no way I know of to get an actual referrer, since it’s always Facebook “linking” to your app in the iframe.
Could be that there’s some info in your app’s insights, but I haven’t checked them out from that perspective yet.
Is it possible to link directly to inner pages in a Facebook iFrame app?
For example, say my app lives at http://www.example.com/app. Can I have a link like http://apps.facebook.com/my_app/?id=256 which will navigate to somewhere like http://www.example.com/app/id/256 in my app that lives in the Facebook canvas?
I did a quick search around but didn't find anything, so if there's something already out there, please point me to it!
If your callback URL is set to http://fb.domain.com/ and your canvas URL to http://apps.facebook.com/domain_app/, navigating to http://apps.facebook.com/domain_app/hello will load http://fb.domain.com/hello. This holds true for querystring parameters as well.