Hi
I am working on an iframe based facebook application, I want to develop an auto complete friend selector, but I think it is already provided by facebook? So is that already exist or I need to use JQuery autocomplete? In any case please tell that what facebook provides to developers? What is the best way to do that?
Take a look here. You will find many examples including friend selector, and you can run them from your browser
There also exist two JQuery Plugins you might be interested in. The first is an autocomplete plugin which includes a Facebook theme and the second is a full friend selector plugin. I already used both on production:
http://loopj.com/jquery-tokeninput/demo.html (see the facebook theme)
http://labs.thesedays.com/blog/2011/06/20/the-missing-facebook-interface-component-for-friend-selection/
Friend selector still exists - albeit rather clunky - Check out serverFbml which serves as a wrapper of the legacy friend-selector
Example:
<fb:serverFbml style="width: 755px;">
<script type="text/fbml">
<fb:fbml>
<fb:request-form
action="<URL for post invite action, see fb:request-form docs for details>"
method="POST"
invite="true"
type="XFBML"
content="This is a test invitation from XFBML test app
<fb:req-choice url="see fb:req-choice docs for details."
label="Ignore the Facebook test app!" />
">
</fb:request-form>
<fb:multi-friend-selector
showborder="false"
actiontext="Invite your friends to use Facebook." />
</fb:fbml>
</script>
</fb:serverFbml>
Related
In the my facebook app i m using fb request form there i want to know that user has send friend request to any one or just skip the page.
code is
<fb:serverFbml width= "620" style="float:center">
<script type="text/fbml">
<fb:fbml>
<fb:request-form
action='<?php echo $config["base_url"]."?action=3;?>'
target="_top"
method="POST"
invite="true"
type="....some thing"
content="...some thing"
>
<fb:multi-friend-selector target="_top"
showborder="false"
actiontext="----" rows='4' cols='4' max='1' import_external_friends = "false">
</fb:request-form>
</fb:fbml>
</script>
</fb:serverFbml>
as the developer document says that if user either send the request or skip the request page it will go to action URL . Is there any thing to differentiate between these two case.
Please ignore any English grammar mistake.
Thanks in Advance.
The information you're looking for is most likely included in the server response, check it.
Btw, FBML is going to be deprecated very soon, so if this is a new application, you better switch to the JavaScript SDK.
I'm using the facebook multi-friend-selector in my facebook page which is loading all my friends in an iFrame. But after selecting a friend from the list and sending an invitation then redirection is not happening correctly to the corresponding callback URL.
I just struck up with this issue, can anybody please help me to fix this issue.
My code for the multi-friend-selector is:
<fb:serverfbml>
<script type="text/fbml">
<fb:fbml>
<fb:request-form action="http://gelofactory.com/dev/SPIN/SXSW/share.php" method="POST" invite="true" type="Download" content="Sharing">
<fb:multi-friend-selector showborder="false" bypass="cancel" email_invite="false" import_external_friends="false" actiontext="Share with your friends." cols="3" rows="3" />
</fb:request-form>
</fb:fbml>
</script>
</fb:serverfbml>
Thanks,
Siva
Are you getting any errors? anyway, here are some suggestions:
Please consider using the new Requests Dialog
Make sure you are using the Canvas URL in the action parameter: http://CANVAS_URL/path/to/share.php
I am using the following invite code on my facebook app:
<fb:serverFbml>
<script type="text/fbml">
<fb:fbml>
<fb:request-form
action='http://localhost:8080/home'
method='POST'
invite='true'
type='MyApp'
content='Click here'
<fb:multi-friend-selector
actiontext="Invite your friends to join">
</fb:request-form>
</fb:fbml>
</script>
</fb:serverFbml>
It works fine when I am using it inside a DIV, but if I try to use jQuery UI and turn the DIV into dialog(), when a user opens the dialog it is empty (the fb:serverFbml tag does not generate the invitation form).
Has anyone encountered this issue?
Thanks,
Joel
I think it won't work.
The quick and dirty solution is: use an iframe instead of a div.
Which platform you are using??(Iframe or FBML??)
I am also facing the same problem. Then i shift to fbml application and use FB:Dialog to do the same and I got it working..
An associate of mine maintains a facebook page for the company we work for.
The company wants a widget to put on their facebook to allow users to enter their email and subscribe to our newsletter.
The associate who does facebook is not a programer so he asked me to build something.
I made a small page that uses jquery and ajax to allow you to enter your email address and it sends it to our server using ajax so you never leave the page you are on.
We want to embed this page on facebook using an iframe.
First we just tried entering the iframe, which did not work,
then we found a tutorial and tried to embed the iframe the way it says like this:
<a onClick="outside_location.setInnerFBML(link_1);" style="cursor: pointer;">Let's see that iframe....</a>
<div id="outside_location"></div>
<fb:js-string var="link_1">
<fb:iframe height="500" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%; border:none" src="http://URL-TO-OUTSIDE-LOCATION"></fb:iframe>
</fb:js-string>
<script type="text/javascript" charset="utf-8">
var outside_location = document.getElementById('outside_location');
</script>
It seems like facebook is appending things to our variables so link_1 becomes something like a325461252_link_1
Then we get a JS error like this:
Uncaught reference error:
a325461252_link_1 not defined
But every once in a while it will work but 99% of the time we get this error.
I have never built anything for facebook before, I am not sure there is is some sort of facebook way of doing things.
Is there something I am doing wrong? I have done many google searches trying to find answers and everything I find varies from "facebook does not allow iframes" to "facebook recommends iframes" so I really don't know what to think.
Check to see that your application is setup as an FBML applicaiton and not an Iframe application. An iframe application will not expand fb:... tags by default. Also inspect the DOM (Chrome or Firebug) to see if the Dom is getting changed when you click the link, but the iframe just isn't visible.
I just tested the following and it worked:
<hr/>
<a onClick="outside_location.setInnerFBML(location_two);" style="cursor: pointer;">Other IFrame Location</a>
<div id="outside_location" width="540" height="270" >
<fb:iframe width="540" height="270" frameborder="1" src="http://www.yahoo.com" />
</div>
<fb:js-string var="location_two">
<fb:iframe width="540" height="270" frameborder='1' src='http://www.google.com' />
</fb:js-string>
<script type="text/javascript" charset="utf-8">
var outside_location = document.getElementById('outside_location');
</script>
If all you wanted to do is add an iFrame to your application canvas then you can simply use this line:
<fb:iframe width="720" height="570" frameborder="1" src="http://www.yahoo.com" />
Or just change your application from an FBML canvas application to an iFrame application and point your Canvas Callback and Connect URL to your current page or page's directory. If you aren't using Facebook's API or FBML elements then you may not need to be in an FBML application at all.
BTW: To programmatically add iframes in Facebook you can use JavaScript like so:
<script type="text/javascript">
var Iframe = document.createElement('iframe');
Iframe.setStyle('smartsize','true');
Iframe.setStyle('frameborder','yes');
Iframe.setStyle('scrolling','no');
Iframe.setStyle('include_fb_sig','true');
Iframe.setStyle('width','500px');
Iframe.setStyle('height','500px');
Iframe.setSrc("http://www.msn.com");
document.getRootElement().appendChild(Iframe);
</script>
Good Luck!
I'm making a facebook iframe application
I'm making a request form with my own form data. What should I do in order to process the data?
If I put action="http://apps.facebook.com/[appName]/abc.php" , i.e.
<fb:serverfbml>
<script type="text/fbml">
<fb:fbml>
<fb:request-form action="http://apps.facebook.com/[appName]/abc.php" method="post" type="abc" content="abc">
<textarea name="pm" fb_protected="true" ></textarea>
<fb:multi-friend-selector showborder="false" max="35" actiontext="test" email_invite="true" bypass="cancel" />
</fb:request-form>
</fb:fbml>
</script>
</fb:serverfbml>
Then the result is funny... A facebook page inside the facebook app's iframe !
but if I put action="http://[my own domain / facebook connect url]/abc.php" , i.e.
<fb:serverfbml>
<script type="text/fbml">
<fb:fbml>
<fb:request-form action="http://[my own domain / facebook connect url]/abc.php" method="post" type="abc" content="abc">
<textarea name="pm" fb_protected="true" ></textarea>
<fb:multi-friend-selector showborder="false" max="35" actiontext="test" email_invite="true" bypass="cancel" />
</fb:request-form>
</fb:fbml>
</script>
</fb:serverfbml>
Then the result page will be rendered WITHOUT facebook template (that means losing all top facebook banner and bottom facebook bar like the facebook chats etc)
Anyone knows what's wrong?
Thanks a lot for reading
The key to the target="_top" is that you have to place it on both the request form and the multi-friend-selector in order for it to work on submit and cancel, respectively.
The request-form needs target="_top" so that the form will load in the top frame when submitted, but the cancel functionality is controlled by the multi-friend-selector, not the request-form. Ergo, you need target="_top" on the multi-friend-selector as well so that the cancel action will load in the top frame.
Now, I just wish Facebook would allow a "none" action for cancel that would just hide the frame...
NEW Answer:
Facebook has started phasing out FBML and is strongly encouraging developers to switch to Requests 2.0. Using the new FB.ui({method:'apprequest',...}); in the JavaScript SDK is an easier way to do this. It also supports off-Facebook pages http://af-design.com/blog/2011/02/17/using-facebook-requests-to-promote-a-website/
OLD Answer:
I found that passing the FBML as an attribute for fb:serverfbml worked.
<fb:serverfbml fbml=" {HTML Escaped FBML Here} " ></fb:serverfbml>
I posted about my findings here: http://af-design.com/blog/2010/11/23/fbserverfbml-on-canvas-iframe/
The way I handled this was to have my form processor page emit no output except an "< fb:redirect >" that pointed back to the main app.
How did you use this < fb:redirect > ?
ok I found it try adding target="_top"
http://apps.facebook.com/myapp' label='Join Now' />"
action="http://apps.facebook.com/myapp"
target="_top"
invite="true">