Using FBML in an iFrame page

Oct 14, 2008 at 10:30 PM
I have been wracking my brain trying to figure out how to put a "Share" button on an iFrame page. I've read that you can't simply insert FBML into an iFrame page so I created an iFrame on that page and tried loading an FBML page with the Share button. It works but loads the entire Facebook chrome into that iFrame so it's not a workable solution. I also can't just convert my page to FBML b/c it uses lots of ASP tags and other functionality so it's not feasible to make the entire page FBML. Any help greatly appreciated!
Oct 15, 2008 at 9:38 PM
I have finally figured it out. It is always tough to write these, because sometimes Facebook changes things pretty quickly and if you are reading this 5 days after I wrote it, not everything may still be true, but here it goes.

You are correct about how the share button fbml works right now, unless you do it the way I do it.

Step 1. Your page should have this at the top
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" >

Step 2. reference the facebook stylesheet
<link rel="stylesheet" href="http://static.ak.facebook.com/css/fb_connect.css" type="text/css" />

Step 3. In the body put this
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>

Step 4. The next steps can go in any order as you see fit.

Put some FBML. One key thing to note is that if your not using XFBML you have to wrap it in fb:serverfbml

<fb:serverfbml style="width: 715px;">

        <script type="text/fbml">
      <fb:fbml>
          <fb:tabs>
          <fb:tab-item href='http://facebook.cartango.com/home.aspx' title='Home' selected='true'/>
  <fb:tab-item href='http://facebook.cartango.com/Profile.aspx' title='Survey Results' />
  <fb:tab-item href='http://facebook.cartango.com/Favorites.aspx' title='My Favorites' />
  <fb:tab-item href='http://facebook.cartango.com/SendInvite.aspx' title='Invite Friends' />
  <fb:tab-item href='http://facebook.cartango.com/FAQTab.aspx' title='FAQ' />
 </fb:tabs>
      </fb:fbml>
 
        </script>

    </fb:serverfbml>

<div class="ExSmall">
        <fb:serverfbml style="width: 700px; background-color: #ffffe0;">

            <script type="text/fbml">
                <fb:if-section-not-added section="profile">   
                <h3>Add to profile:</h3>
                <p>
                You have not added this
                application to your profile. By clicking this button, you will be given an option
                adding this to your profile. If you would like to show your friends what your car soulmate
                is, we suggest selecting the button. For more information on what these means,
                see the <a href="http://www.cartango.com/faq.html" target="_blank">frequently asked
                    questions</a>.</p>
                    </fb:if-section-not-added>           
            </script>

        </fb:serverfbml>
    </div>
    <div align="center">
        <div id="addSection" align="center">
        </div>
    </div>

Step 5. To get the profile button you notice the addSection div tag in bold above. Under this tag put the following
<script type="text/javascript">
   
    window.onload = function() {
    FB_RequireFeatures(["Integration"], function() {
        // Change the first arg to your api key, and the second to the path to your receiver.html file.
        FB.Facebook.init('<%=ConfigurationManager.AppSettings["applicationCode"].ToString() %>','xd_receiver.htm', null);

        // These two lines add a "add to profile" button under the given id.
        FB.Integration.showAddSectionButton("profile", document.getElementById("addSection"));      
      })};

    </script>

Step 6. at the very bottom of the page, right before the close body tag
<script type="text/javascript">
    FB_RequireFeatures(["XFBML"], function(){
        FB.Facebook.init('<%=ConfigurationManager.AppSettings["applicationCode"].ToString() %>', "xd_receiver.htm");
    });
    </script>

Step 7. If you want to add smart resizing add this after the previous entry

<script type="text/javascript">
FB_RequireFeatures("CanvasUtil", function(){
//FB.XdComm.Server.init('/xd_receiver.htm'); // must have "/" before the html file
FB.Facebook.init('<%=FACEBOOK_API_KEY %>', '/xd_receiver.htm', null);
FB.CanvasClient.startTimerToSizeToContent();
 

});
</script>


Hope that helps people. The only weird thing I can't seem to solve is that the page jumps around before it shows the fbml. You can see what I mean if you try my application at http://apps.facebook.com/carsoulmatesurvey/
Oct 15, 2008 at 9:44 PM
thanks for sharing this!!!
Oct 15, 2008 at 11:16 PM
Thanks, it worked like a charm! Now I have a "Share" button on my iFrame page but when clicked it pushes the content below it down as the Share dialog displays. I was hoping it would act as an overlay like the profile button does. Do you know if that's possible?
Oct 16, 2008 at 1:16 PM
Edited Oct 16, 2008 at 1:18 PM
Thanks man!  That's exactly what I needed to get me started... seems like we can't rely on the toolkit any more so we have to do some dodgy semi-hooked in stuff.

I had to do it slightly differently though (NFI why!)... I had the same <script> include and CSS (had a conflict with the H2 tag in my css but that's all sorted) but this is what works for me:

FB_RequireFeatures(["XFBML"], function(){
    FB.Facebook.init('<%=ConfigurationManager.AppSettings["APIKey"].ToString() %>','xd_receiver.htm', null);
    FB.Connect.showAddSectionButton("profile", document.getElementById("addProfileButton"));
});

The auto-resize iframe thing is FINALLY working too.  I spent ages on that when they first released it to no avail.  Your code worked a treat. ;)  For those of you who aren't aware you have to set your application to not smart resize in the App Settings for this to work.  Finally those schmuck users in 800x600 won't have double scroll bars. JOY!

Now to get the MultiFeedStory happening: http://wiki.developers.facebook.com/index.php/MultiFeedStory_form
Nov 17, 2008 at 3:20 PM
Great work!! Thank you very much.
I can see the button now, but I think it doesn't work; I mean it doesn't add anything on the profile... and when I want to edit an application I can't see any link to get the application on the profile...
Do you know why?
Thank you
Nov 17, 2008 at 10:15 PM
Ok now that I succeeded to create the xd_receive.htm page, there is a window asking me to allow the application on my profile... but I can't see it...! Do I need to have a page in my asp project for the profile box? I mean I already programmed the page, but do I have to specify any URL to facebook or something like that?
Thank you
Dec 15, 2008 at 2:57 PM
The code posted by Cargango above worked for me a couple of months ago but not now. Does anyone know if something has changed on the Facebook side?
Dec 17, 2008 at 2:34 AM
I've just tried the <fb:serverfbml> code above in the xfbml test app http://www.somethingtoputhere.com/demo/xfbml_console/index.html and they seem to work fine there.

The stylesheet http://static.ak.facebook.com/css/fb_connect.css does not seem to exist anymore.
Jan 27, 2009 at 12:26 PM
hi
i have follow the all the steps to render the xfbml for my iframe based application.
but it seems like not rendring.
For example :
i m adding this tag on my aspx page:

<

 

fb:prompt-permission perms="email"> Grant permission for email </fb:prompt-permission>


tag for prompting email popup.but it is just showing  simple text "Grant permission for email " and not prompting any popup.
its not becoming hyperlink.

---when i chk the session using Fb.apiclient.get_seesion.it is coming null..but the user is login .

any help
thanks

 

Mar 10, 2009 at 7:37 PM
Does this method still work.  I followed the directions above but nothing rendered....  Has anyone used this lately?
Mar 11, 2009 at 2:07 PM
This method not working for me too!

Mar 13, 2009 at 7:55 AM
same here..page doesn't render fbml code unless n until i use fb_force_mode=fbml with the url
Apr 7, 2009 at 10:30 AM
This should not be another "here too", but still it is part of my message.

My facebook code part of an iFrame app, *not* using IframeMasterPage, since I had to use our internal MasterPage (all other faceoobk stuff inside the iFrame works, such as userid, friendlist, profiledata reading):

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<fb:serverfbml style="width: 755px;">
<script type="text/fbml">
<fb:fbml>
<fb:request-form action="http://apps.facebook.com/MYAPPNAME/" method="POST" invite="true" type="XFBML" content="Your friend is inviting you to use the following app" >
<fb:multi-friend-selector showborder="false" actiontext="Select friends to invite:"></fb:multi-friend-selector>
</fb:request-form>
</fb:fbml>
</script>
</fb:serverfbml>
<script type="text/javascript">
FB_RequireFeatures(["XFBML"], function()
{
FB.Facebook.init("MYAPIKEY", "xd_receiver.htm");
});
</script>

This just does not render. I have the proposed and needed <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml"> included. Testing on the above link works perfect.

If I trace a call to the page containing this code with fiddler, I see a "bad request" answer for a call to login_status.php at www.connect.facebook.com. I do not know why it fails / gets a bad request, since all other facebook stuff works, I can read out the cookie and request parameters. Only part, I have no clue how I could generate a session, since I do not get an auth token (user must be logged in already before coming to the iFrame app, otherwise he gets a "page not found" nor the "Session["Facebook_session_key"]" Session information. Only things like "Request.QueryString["fb_sig_session_key"]" and cookie work. The fiddler terse summary:

GET http://www.connect.facebook.com/extern/login_status.php?api_key=MYAPIKEY&extern=false&channel=http%3A%2F%2F77.109.144.12%2FKrankenkassen%2FGrundversicherungFacebook%2Fxd_receiver.htm
400 Bad Request:

And yes, I have replaced MYAPIKEY in all posted parts. They appear instead of the text. Just don't want to give away too much.

Would be nice to hear from somebody knowing a solution. Im cobbling for a whole week now, this is fading my motivation away...

Cheers, ChrisTar



Apr 15, 2009 at 6:20 PM
Edited Apr 15, 2009 at 6:54 PM
ChrisTar

You need to set the Connect Url to your application settings page in FB in order to fix the issue you are having unless you have already figured it out.

good luck

vm
Apr 16, 2009 at 9:04 AM
vm

Thanks, this indeed solved the problem. Even if I see only half of the point... XFBML was for me not a connect feature, since it can be used for iFrame Apps on facebook itself. But true, the URL leading to the 400 Error could have told me other...

Thanks for the advice,

Cheers, ChrisTar
Jun 23, 2009 at 9:41 PM
Edited Jun 23, 2009 at 10:22 PM