BENEFIT to knowing: October 2010

Since the start of 2010, Facebook no longer allows you to use an Iframe in the Static FBML app. This change makes embedding many elements into the Fan Page much more difficult. Here is a way to embed the Google Form with out using an tag. Google Forms are useful because you can embed the form and when a user fills the form out the data is automatically put into a spreadsheet in Google Docs. This saves tons of time having to copy and paste data. If you have not tried out Google Forms you should. When you create a Google Docs Spreadsheet there is a form option in the menu of the spreadsheet, give it a try. So below you will find the step by step guide to embedding the Google form in Facebook. 1. Create a Google spreadsheet. Each column becomes a entry element of your form. Here is a quick video outlining how to make a form. <a href="http://www.youtube.com/watch?v=DCSKJavdglU" target="_blank">Create a Google Spreadsheet</a> 2. Once you have a Google Form you will need to setup a tab in Facebook to allow you to paste HTML code into it. Here is a good tutorial to set that up. <a href="http://www.hyperarts.com/blog/tutorial-facebook-pages-with-static-fbml-application/" target="_blank">Adding a Static FBML tab to your Fan Page</a> 3. Now that you have these two basic elements setup and ready to go lets get to connecting the two. In the “Forms” menu item on your google spreadsheet there is an option called “embed form in a webpage” click this and copy the code you see, it will look like this. “<iframe src="”https://spreadsheets.google.com/embeddedform?formkey="dGN6dlJMNkRQT0N6aW81bElQVWdyRGc6MQ”" width="”760″" height="”582″" frameborder="”0″" marginheight="”0″" marginwidth="”0″">Loading…”

4. We need to view the form page itself and not use the iframe tag. Remove the code before and after the webpage URL. It should end up looking like this.

https://spreadsheets.google.com/embeddedform?formkey=dGN6dlJMNkRQT0N6aW81bElQVWdyRGc6MQ

5. Copy and paste this URL into your browser address bar and view the page. It should look like the form and the form elements will be nested against the edge of the page.

6. View the Page Source of this page, you are going to copy all of the HTML of the URL you just saw.

7. Paste this HTML into the Static FBML edit window It should look like the following:

8. Now we have to remove some HTML to allow the form to show on the Facebook Page.
First remove the Doctype, html, head, meta and title tag. ex. “
test”

9. You want to keep the “Change = “

To = “http://spreadsheets.google.com/client/css/1968101144-embedded_form_compiled.css’ type=’text/css’ rel=’stylesheet’>”

10. Now remove the “” tag, and the “”

11. Scroll to the Bottom of the pasted HTML code and remove the “” tags.

12. To make the formatting look a little better I usually add a “
” after each label item to next the box under the box name. ei. “name

“

13. At this point you should be able to hit “save”, make the tab active and test your form.

14. When the form is submitted the user is taken to a confirmation page. To include a link back to your Fan Page simply add the link into the page . To Do this, Go to Your Google Spreadsheet and click “edit form” in the Form menu at the top. It will open a new window with the form and then click “more options” at the top. Choose “edit confirmation” and change the text there. To add the link simply put a URL into the box ex. http://www.facebook.com/yoursite . Using HTML in this box will not work, only the URL