Notes on the Donation API Facebook Application Example

These are the steps taken to create the Donation API Facebook Application Example mentioned on open.convio.com. The application shows how a donation can be made entirely within Facebook without ever taking the donor away from the application. These notes also cover the two step donation example included within the same application, where the first step is displayed on the profile badge of the application, and the donation is finished on the normal website.

-- clicking the link there would show the Facebook page within the IFRAME within itself. The profile page, on the other hand, navigates from Facebook to the Convio powered donation pages so the link is useful for returning to Facebook.

]x::x54x::::
<P><A href="]?pagename=fb_homepage">Return to application</A></P>
]]

• Create and publish new version of fb_profile (see attachment)
  • Make sure form and level IDs in fb_profile match the donation form

• Create and publish new version of fb_homepage

• Add IFRAME for donation API form:

<fb:iframe name="donation_iframe" src="https://]]/SPageServer?pagename=reus_fb_donation_embed&amp;mfc_popup=t" scrolling="auto" frameborder="0" smartsize="true"></fb:iframe>

• The scrolling and smartsize attributes of fb:iframe facilitate showing the lengthy transaction summary upon completion. They can cause the form submission buttons to be hidden until the user scrolls on smaller displays, though. An alternative might be to show the transaction summary in a new window and set appropriate width and height attributes on fb:iframe instead of smartsize.

• Optionally remove other default content

• Create and publish secure page reus_fb_donation_embed (see attachment)
  • Make sure form and level IDs in reus_fb_donation_embed match the donation form
• Create and publish secure pages fb_donate_success and fb_donate_error to be displayed when API succeeds or fails and JavaScript is not enabled.