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.
Related
Now that Facebook has depreciated the landing pages for apps, how do I get my app to point to the Fan page for it's landing page?
I've checked under the Advanced tab and contacts -- but there's no place I can see to list my Fan page as being linked to my application.
According to this blog post from December, new apps can create a new Fan page, but there's no information on how to do it for existing pages -- they just say that "it will be linked automatically." Unfortunately it was not -- when you post something from our app onto your wall, the link takes you to our website rather than our Fan page.
I'd love for that link to take you to our fanpage again, but I seemingly can't find any documentation on this.
It is possible. I had the same problem. What you need to do is the following:
Categorize your existing page under "App Page" (found under "Brands & Products").
Change your page name to mach your App name.
Go to your App and select "App Details"
Under "Contact Info" you will find "App Page". There you will be able to create a new page or if all went well, select your page from a list.
I found the info in the little question-mark next to "App page".
It is possible to add the application to any page you administer. This can be achieved from solutions mentioned below:
Solution 1
http://facebook.com/add.php?api_key=[YOUR_APP_KEY]&pages=1&page=[YOUR_PAGE_ID]
YOUR_APP_KEY You can get it from application settings, its App Id
YOUR_PAGE_ID You can get it through Graph Explorer https://graph.facebook.com/[PAGE_NAME]
Solution 2
https://www.facebook.com/dialog/pagetab?app_id=[YOUR_APP_KEY]&next=[REDIRECT_URL]
YOUR_APP_KEY You can get it from application settings, its App Id
REDIRECT_URL Any URL you want to redirect back to after adding the tab
Official Solution
Answer from #Dvir Levy is the official solution from Facebook. The issue with that approach is that we mostly can not follow that solution. Suppose we had to add an application tab to a brand page like 'ABCXYZ', if we follow that answer then we had to change the brand page name, and we can't do it, brands/clients we work for doesn't allow these changes.
Due the recent changes on the Facebook UI, some options have changed or are under a different place.
I would like to share the up to date way to achieve this.
On your page
Access the About section
Click on Edit Page Info on the top right side.
Set one of your categories to App page
PS: May be needed your page and app share the same name, but can't confirm this.
On your app
Access your app from the Facebook Developers apps panel.
Access Settings on the left side menu.
Set the category to Apps for pages and hit Save. [#JohnMc mentioned this has to be the only category selected.]
Open the Advanced section and find the App Page block.
Under Existing page select your page and hit Save.
All set!
Note: If you remove the link between the page and the app you won't be able to link them again.
Edit: As #John Mc pointed out in the comments, App page has to be the only category selected.
Happned to me. You need to add yourself (your developer account) as manager/admin of the page. Then it will recognize the link between you and the page and the app will show the app page so you'll be able to choose it.
This is possible.
Go to you business page, add yourself as a managed (make sure you have liked the site first)
Then refresh the App Details developers page.
Select the business app page from the App page contact section.
Note the Business page has to be the Brands & Products : App Page, and the same name as the App.
Here's how to add a tab to a page.
https://developers.facebook.com/docs/reference/dialogs/add_to_page/
I use the direct URL Method. Go to your page and then type the following into the address bar of your browser.
https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&display=popup&next=YOUR_URL
Where YOUR_APP_ID is the app id shown in the app configuration page, and YOUR_URL is the page you want to to be redirected to once you close the dialog.
In the Facebook app config settings will be Site URL. This is the place where it's currently going, correct? So have your marketing people make a "pretty" landing page for the app, and you can change your app settings to point to the pretty landing page. Maybe all that landing page is a redirect to your Facebook fan page.
This all sounds confusing;
I have a Facebook Canvas App with the same name as the Fan Page. I would like to add an iFrame tab to the Fan Page to promote and link to the Canvas App. My question is do I have to create a new app for the iFrame tab, or do I open my app settings for the canvas app and add settings for a page tab as well in there. Facebook don;t seem to have much documentation and they are changing things for app profiles soon, so I want to make sure I keep my fans of the page.
Thanks in advance.
Basically it goes like this.
You have an iFrame app.
The iFrame app has a canvas which is where you load your html for your app from your webserver with whatever language you want (.NET, PHP etc)
Then you can add this iFrame app to your page.
When you go to http://apps.facebook.com/yourappname
You will be shown the app by itself. When you add it to your page and load it via the tab on the menu of your page it will show you the app within the space on your page (an iframe).
You can use code to detect whether you are on a page or not to display different things.
I'm on a bit of a deadline and I'm having a problem with the canvas app I designed as a tab on my facebook page.
Using Dreamweaver to create the canvas I have set pictures that link to external websites. Unfortunately, when you click on the linking pictures, the websites are loaded within the canvas area on facebook. I would like them to redirect the entire page to the website link.
Forgive me if this is a ridiculous question, I'm rather new at this whole thing.
UPDATE Okay, figured it out. To anyone who's just starting out like me, all you have to do to have it redirect to a new page is put target="_top"></a> just at the end of your link in the webpage code.
I am currently developing UI for a facebook app. Basically, the game is shown on the canvas page and it has navigation in a tab form.
What I need is that when a user clicks "friends" to invite people, the page will show over the game(the game is still in background, and running as it should be). So the page must not reload. To do this I placed the url of the friends requests in the src of an <iframe> and using jquery to hide/show the divs but the problem is the <iframe> will also contain the header, footer and all like facebook.com, but I just want the content because the user is already on facebook. Is there a better approach than what I'm doing? How would I accomplish this?
A good visual example is the navigation of "City of Wonders" facebook app.
You'll need to write a server side script that uses the facebook API to get a list of friends. Then you simply generate the HTML that is necessary to display and use this information.
Also, instead of using a an <iframe></iframe>you could just use a <div>, and use javascript to populate it's innerhtml (via ajax).
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.