I have a web application that I am trying to port to Facebook. The app uses a few external javascript files. So initially I wanted to create an iframe Facebook application. However, it turns out that you cannot use iframes when creating a tab application(which is a requirement). By tab application I mean placing your app on the profile page next to the wall, info, photos, ect. tabs.
Does any one know of a good tool to help convert my javascript to the FBJS scripting? Or better yet does anyone have a work around so that I can include my own javascript in this tabbed application?
Thanks for the help.
From my understanding loading external js is disabled when the user first visits the tab page (the passive page). But, once a page loads and the user interacts with it in some way (ajax post, redirect) the page is "active" and you can run flash, javascript, etc...
If you're using Ruby on Rails and Facebooker, I wrote a nice little tutorial on how to inline your javascript inside a profile tab while keeping your code DRY :
http://modelix.net/2010/03/javascript-inside-a-facebook-profile-tab/
I thought you might find this interesting, how to add a Live Chat Tab to a Facebook page:
http://apps.svpn.com/live-chat-tab-for-facebook-pages/
Related
Any way to join FBML and Graph API to post HTML to a FB page?
FB Iframe's based solutions are welcome too.
EDIT 24 hrs after: After play with the Page Tab functionality I have found that it is the best way to embed custom content (HTML/CSS/javascript) inside FB pages.
Basically are iframes. In the Page tab settings you must enter the URL to embed. That's all! You can use Signed Request to get the id's page and something called app_data. With that you can dynamically manage your embedded content!!!
Thanks to DMCS to guide me to it.
Yes, while the FBML is being deprecated, there is another way to accomplish posting something to a page.
You can see an example here of what is called a page tab application. It is an app specifically designed to be used on a Facebook page. It becomes a tab (can even be set to the default of what a visitor sees).
Here's an example: http://www.facebook.com/GoDaddy?sk=app_233280480043288
You can see that the content is HTML and you have full control over that HTML since it lives on your server. This also demonstrates how a fan-gate operates.
https://developers.facebook.com/docs/reference/fbml/
We are deprecating FBML. On Jan 1, 2012: FBML will no longer be supported on Platform. June 1, 2012: FBML apps will no longer work. All FBML endpoints are removed. If you are building a new application on Facebook.com, please implement your application using HTML, JavaScript and CSS. You can use our JavaScript SDK and Social Plugins to embedded many of the same social features available in FBML.
Okay, allow me to say first off that I am working on developing my first FB app/page tab at the moment. I'm not looking for anything fancy yet, just workability.
That being said, I have managed to create a FB app that loads from the hosting requested, and displays it under the app page. I have also made it so that I can add it as a page tab to FB pages. What I am having an issue with is that clicking on the page tab for the app, it does not show any content in the iframe on the page, though it shows on the canvas page for the app.
So, my question is, do you have any ideas as to why it might be showing on a canvas iframe and not the page tab iframe? I am currently guessing that it has to do with how the signed request is processed, but am not completely sure. I am using the PHP SDK for FB given here: https://github.com/facebook/php-sdk/ for the FB-related functions, and am tracing through that currently for where I might be going wrong.
Any help is appreciated. Thanks. =)
I had the same problem and was able to solve it by providing different (http vs https) URLs for the secure and non-secure canvas and page tab URLs. Just remove post the non-secure URL for the non-secure canvas/page tab URL fields. I believe this is because Facebook doesn't check to see if the user has secure browsing turned on until after they have logged in.
You could try to change the order of appear of the app tab; it worked for me.
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'm able to make Facebook apps. But I have some problems. The documentation highlights this example: http://www.facebook.com/cocacola?v=app_161193133389
My apps are getting included as iFrames, even when I specify FBML - Coke's is more embedded. The "like button" generator creates a different style of like button to Coke's. Coke's uses a built in Facebook CSS stylesheet. Coke also has FB style links down the left side of their page.
Does anyone know how I could go about making an App like that? The documentation really does not cover it. Even useful web-links would be great. Thanks!
Actually, the link to Coke is not an application, but a FB page. The like button showed is the standard like button that you get when you create a page, which is different than the one that you obtain when you use FB social plugins.
They are very different things. A page represents something: a business, product, service, etc., while an application is, well.. an application. Note that pages can hold applications in their tabs, or just normal (and brand new) iframe tabs.
Regards
I want to get iframe application but on top of it, would love to put tabs. and iframe are not really seem compatible. Do you guys know any work around this?
Thanks,
Ebe
You can't use an iframe in a Facebook Tab application due to restrictions from Facebook, though in this blog post from mid-August they say they will begin supporting IFrames for Page tabs "in the next few months".
There are other restrictions for applications which live within a Tab too, eg you have to use FBJS methods instead of regular javascript. It's a pain in the neck.
In this presentation, from January, Facebook suggest that if you really need iframe functionality in a Tab you can work around it by not putting your application in the Tab... make a Tab containing just a link to a Canvas Page, where your application can use iframes.
Alternatively if you are talking about a 'tab-style' UI for your application then it is possible with using iframes. Just use javascript to show and hide different content divs.
Here is an example of an app with a tab-style UI (and it's a Tab app, so it can't use iframes):
http://www.facebook.com/VansEurope?v=app_122643704452302