This method is deprecated. To view an updated version, click here.
This post outlines the ‘Facebook Developer Method‘ of adding your form to a Facebook Page. I will begin by outlining the main pro’s and con’s of this method.
- Professional look, can customize your Facebook tab icon.
- No 3rd party application providers required.
- Can not provide different content for Fans and non-Fans.
- If you choose not to use an SSL version of your form, your form will not be viewable by people browsing Facebook on a secure connection.
If you don’t think this method suits your requirements, you can consider the TabPress App Method
First, I have created a basic form that I want to put onto my Facebook Page, it’s for a fictional Facebook competition.
NOTE: For better looking Facebook integration, you should set your form width to 520px.
1. Click on the a)Form Style tab, b) Click the Form Width icon, and c) Change the width to 520, then Click OK.
2. We need to retrieve your Forms’ ID. One way to do this is to Click on the Setup & Embed toolbar, Click Embed Form, Click Embed and copy that 11 digit Form ID number. You will need this later. My Form ID is: ‘13055750337‘.
We are now ready to put our form on Facebook.
3. Visit this link https://developers.facebook.com/apps
NOTE: Facebook requires a developer to have their Facebook account verified. You can do this with a mobile phone number or by adding a credit card (just for verification purposes). If you haven’t already verified your Facebook account, you will be prompted to do so when first visiting this link.
4. Click the Create New App button in the top right hand corner of this page.
5. You will be presented with a dialog box. Give your new App a Display Name. You dont need to fill out the App Namespace field.
Complete the captcha in the next dialog box.
You should now see a configuration page for your new App.
6. The first of the two fields we need to concern ourselves with are the App on Facebook field. Click on it.
( Remember that 11 digit Form ID number, we retrieved in Step 2 above? We need it now. )
For Canvas URL, Enter in: https://www.jotform.com/form/FORM_ID/
For Secure Canvas URL, Enter: https://www.jotform.com/form/FORM_ID/
NOTE: the forward slashes at the end of the URL are important. Include them! FORM_ID is that 11 digit number you retrieved in Step 2.
The configuration for my App for the App on Facebook field looks like this:
7. The next field we need to add some information to, is Page Tab. For Page Tab URL, again enter: https://www.jotform.com/form/FORM_ID/ For Secure Page Tab URL, as before, https://www.jotform.com/form/FORM_ID ( remember those forward slashes! FORM_ID is the 11 digit number from step 2) My configuration for the Page Tab field looks like this:
7.a Make sure the Sandbox is disabled:
PLEASE NOTE: Even though you will be warned about it when saving your configuration, you dont have to enter anything for Secure Canvas URL or Secure Page Tab URL. However, anyone browsing Facebook on a secure connection, i.e with a web address starting https:// will not be able to see your form. They will get this message:
Please note 2 :
The site url set in your facebook should also be the same with the url provided by Jotform in your embedcode.
So if for example: the form embed codeis http://jotform.me/form/20643463926456
then http://jotform.me as the site url
and jotform.me as the app domain.
Remember: Jotform Secure(SSL) form submissions limits are counted seperately from standard non-secure submissions.
Click on Save Changes at the bottom of the App configuration page.
Thats it. Your application is configured. Easy isnt it?
We just need to get your new App onto your Facebook Page.
8. At the top of your App configuration page. You will see its App ID. Make a note of that number or copy it into a notepad document. .
9. With that App ID, you need to use it to visit a webpage: https://www.facebook.com/dialog/pagetab?app_id=APPID&redirect_uri=http%3A%2F%2Fwww.facebook.com
where APPID is that string of numbers you gathered in Step 8.
e.g for my app above.
10. On this webpage, from the dropdown menu, select which fan page you want to add your Form to and click the Add Page Tab button.
Now, you can go to your Facebook Page. You should see a new Tab with the label you specified in step 7. Click on it, you will see your form.
11. How about one last finishing touch? lets change that default application icon, to something more interesting.
Back at https://developers.facebook.com/apps You should see your application listed, Click on it, then click Edit App. This takes you back into the Apps configuration page.
Near the top, click on the edit icon link.
In the resulting dialog box, select Choose File, and find the image you want to use as your icon from your hard drive.
Thats it. All done! You can inspect my finished form on Facebook here