Form Submit in Profile Box

Jul 20, 2007 at 3:30 PM
I imagine lots of people have had this question. However, I haven't been able to find much about it on the web.

We had an idea for a facebook app that would sit on the profile page. Initially, we thought it would just be possible to have an iframe in the profile box and point it to our page. Investigation revealed that this isn't possible, and I can pretty much see why.

With this in mind, I need to totally redo the application so it spits out FBML instead. To do this you need to change your app so that it uses .SetFBML() to write FBML to the Profile Box. FaceBook then renders this to HTML. Of course, this means that any '.net-ness' is lost.

I'd like to have it so that there is a form in the user's profile box where they can click a button to submit a vote. My app then takes that vote, saves it, then kicks out some new FBML to the Profile Box.

I've had a think about how this might work.

a) I draw out a form in FBML with an full path in the action attribute eg, <form id="frmTest" action="http://mydomain.com/votes.aspx"/>
Votes.aspx will then take the form parameters (item ID and vote value), write this to the DB and kick out a new form in FBML to the Profile Box.
<fb:title>Test Voter Application</fb:title>
<img src="http://mydomain.com/images/itemxyz.gif"
<form id="frmTest" action="http://mydomain.com/votes.aspx"/>
<input type="hidden" id="ItemID" value="001"/>
<input type="hidden" id="voteValue" value="1"/>
<input type="submit" value="One"/>
</form>
<form>
<input type="hidden" id="ItemID" value="001"/>
<input type="hidden" id="voteValue" value="2"/>
<input type="submit" value="Two"/>
</form>
<form>
<input type="hidden" id="ItemID" value="001"/>
<input type="hidden" id="voteValue" value="3"/>
<input type="submit" value="Three"/>
</form>
My concern about this method is that, when the user hits 'submit' to submit their vote the whole page will be refreshed?

b) I use the 'mock-AJAX' functionality:
<fb:title>Test Voter Application</fb:title>
<div id="voteform"/>
<img src="http://mydomain.com/images/itemxyz.gif"
<form>
<input type="hidden" id="ItemID" value="001"/>
<input type="hidden" id="voteValue" value="1"/>
<input type="submit"
clickrewriteurl="http://mydomain.com/votes.aspx"
clickrewriteid="voteform" value="One"/>
</form>
<form>
<input type="hidden" id="ItemID" value="001"/>
<input type="hidden" id="voteValue" value="2"/>
<input type="submit"
clickrewriteurl="http://mydomain.com/votes.aspx"
clickrewriteid="voteform" value="Two"/>
</form>
<form>
<input type="hidden" id="ItemID" value="001"/>
<input type="hidden" id="voteValue" value="3"/>
<input type="submit"
clickrewriteurl="http://mydomain.com/votes.aspx"
clickrewriteid="voteform" value="Three"/>
</form>
</div>

Depending on what submit button the user clicks, a different vote value is submitted and the mock-AJAX uses votes.aspx to redraw the contents of the div 'voteform' for a new item.

What do people think? Are either of these possible? Is one better than the other? Is there a third-way of doing this that I've missed?

Any comments/help much appreciated!

One more thing. If I have SetFBML in my Page_Load, will that go into the user's profile box when they load their profile page or will they have to do something in the canvas part of the app to make that happen?

Cheers!
Jul 24, 2007 at 3:50 AM
Method 1 will refresh the whole page. Although you can achieve what you want with method 1, method 2 is probably a cleaner, smoother way for doing a in-profile voting type app. Disclaimer: I haven't used mockAJAX yet.

My app will use method 1 but for a different purpose than yours. I use it because form submit passes all the necessary info for authentication without needing to bounce the user around.