Facebook – How to load Facebook iFrame-App into Application Tab on Profile Page

facebookfacebook-iframe

how can i load a working iframe app (tested via http://apps.facebook.com/my-app-name) into an application tab on the profile page of my own fanpage. I got the tab, but didn't see anything in the tab. first time i called the tab i got a couple of errors. But now I just see nothing. In sourcecode some css definitions are included.

I read, that profile tabs can only use FBML. Is this right? If true, how can i load an iframe application with FBML into the profile tab?

Thanks in advance.

Marco

Best Answer

To Add an app to a tab you need to make sure you fill out the Tab URL in your App Settings. You can point this to your app if it fits in a 520px or create a custom UI for that width.

Once you have done that go to the profile page for your app: https://www.facebook.com/apps/application.php?id=YOUR_APP_ID

And in the bottom corner click on "Add to my Page", select a page and you are done.

Related Solutions

R – Facebook app profile tab does not display content

Make sure that the :ensure_application_is_installed_by_facebook_user and/or :ensure_authenticated_to_facebook before_filters are not executed.

One way to do this would be to create a separate controller to handle the profile tab.

For example:

class TabsController < ApplicationController
  skip_before_filter :ensure_application_is_installed_by_facebook_user
  def index
   render :text => "tab content"
  end
end

(tab url would be just 'tab')

Keep in mind that the fb_sig_user facebook parameter is not available on the tab, so if you have an filters that rely on it they will not work.

Facebook – Setting the height of iframe Tabs for Facebook profile Pages

It's quite easy to achieve. You have to set up the application in the Facebook Integration tab as an IFRAME and the size of the frame as "Auto-resize".

Now, on your server, you have to add the following code before the </BODY> tag:

<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
    FB.Canvas.setSize();
</script>

This will auto resize it. It also helps if you add overflow:hidden to the BODY tag.

Best Answer

Related Solutions

R – Facebook app profile tab does not display content

Facebook – Setting the height of iframe Tabs for Facebook profile Pages

Related Topic