Monday, October 25, 2010

Embed a Google Form on a Facebook Fan Page.

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

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. “

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

No comments: