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 <iframe> 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. Create a Google Spreadsheet
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. Adding a Static FBML tab to your Fan Page
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…</iframe>”
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. “<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”><html><head><meta http-equiv=”Content-type” content=”text/html; charset=utf-8″>
<title>test</title>”
9. You want to keep the “<link” tag that points to the stylesheet. But we have to edit it. Add the HTTP:// to the front of the stylesheet link.
Change = “<link href=’//spreadsheets.google.com/client/css/1968101144-embedded_form_compiled.css’ type=’text/css’ rel=’stylesheet’>
To = “<link href=’http://spreadsheets.google.com/client/css/1968101144-embedded_form_compiled.css’ type=’text/css’ rel=’stylesheet’>”
10. Now remove the “</head>” tag, and the “<body class=”ss-base-body” dir=”ltr”>”
11. Scroll to the Bottom of the pasted HTML code and remove the “</body></html>” tags.
12. To make the formatting look a little better I usually add a “<br>” after each label item to next the box under the box name. ei. “<label for=”entry_0”>name
</label><br>”
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
Grand Rapids Social Marketing Lunch Meetup 
[…] This post was mentioned on Twitter by seelowitz, SashaWolff, SashaWolff, MikeMcCready, tkarow and others. tkarow said: RT @MikeMcCready: RT @SashaWolff: People in higher ed will want to know this. How to embed a google form on a facebook fan page http://tinyurl.com/y5d7mm9 […]
How to retain the color of the background of the forum.
Thanks for sharing this
GREAT tip! Thank you so much for posting it.
Wow, this was so helpful. You have no idea. I had no idea you could do half of this stuff and you just saved me and the fans a lot of time and effort. I owe you one man. Directions were uber clear and very sneaky method. I dig it.
Thanks,
Joe
Glad we could be of help, do you have a link to your implementation?
This is a great tutorial! thank you!
Thank you SO much! I have tried to do this before with other instructions and got nowhere, this was straight forward and so clear, thanks!
Thanks so much for the post, it is very insightful.
That said, I followed you instructions to a T and I still can’t get the static FBML page to load. Maybe you could give me a few more hints, or take a look at it yourself. Email me back it you can.
Thanks!!
-Jeff
Nevermind, I figured it out! I found a few other spots in the code where “http:” needed to be inserted. Thanks so much for the great info!!!
Thank you. Great work around. I was wondering how you got past the iframe issue.
Doug
We realized that the iframe could be stripped out and the html code would still function. So by viewing the source of the Iframe and using just the source you can still use the FBML and have the form work as normal. Formatting could be taken a step further but in the end it all works.
Thanks for this man! It worked 🙂 But you don’t need to include {br}
Again, thanks. I’ve been looking for this solution for months!
[…] Embed a Google Form on a Facebook Fan Page. « Grand Rapids Social Marketing Lunch Meetup 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 <iframe> tag. (tags: google facebook embed) […]
[…] Embed a Google Form on a Facebook Fan Page. « Grand Rapids Social Marketing Lunch Meetup "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 <iframe> tag. […]
K, this is sweet!! It worked like a charm on my page! My question is this: Can you do the same thing with a google spreadsheet? I tried but i couldnt get it to work.
This is something we will look into. What did you try to do and what kind of error were you seeing?
I pretty much tried following the instructions you gave for embedding a form, and i never got anything to show up on me page….at one point I had the top row of my spreadsheet but that was it….usually there was no error message, just a blank screen.
thanks for the reply!
Thanks a million, sometimes you have to piece several blogs together to get something to work, but this worked right out of the box.
Amazingly too, because this same functionality of adding a from is something that other online companies charge for.
I’d like to also point out to others here that you can check out google analytics and add their code your fb page in order to get stats on ppl’s visit to the page.
O.k. – I got the form to load into the box tab – but there is a big space at the top of the page and the form starts about a third of the way down – what do I need to change?
This has to do with some html elements not being formatted right.
I would try to pull the code into a text editor and trying viewing it as the form alone in a browser.
If the space is still there you will have to edit the code.
Thanks for the tips, this is one of the better tutorials I have come across. First time I have used Google spreadsheets for lead capture. Very cool.
Hi,
I copied the code to a text editor first so I could clean it up. I use a CSS styled callout box to put my forms in and the background color was the same color as the text on the form. So I just changed the text color for the labels.
The form looks good and works just fine.
Nice work around for sure!
Thanks
Peter Brissette
You can see it on http://www.facebook.com/onlinebizsuccess it is on the second Welcome tab that has the ! at the end.
You saved me a ton of time, I was trying to embed the iframe into the static FBML tab for the fan page before I found this tutorial.
We finally have our alpha sign up page live, check the Sign up tab: http://www.facebook.com/handthingsdown
Is the required fields work in facebook form when you embed google form to it.
Hi,
The code worked superbly for me. Thanks.
But there is a small glitch. When i click on the submit button, it takes me to the google docs reponse page.
I have pasted the url of my test facebook page in the “Confirmation” section of the form.
But it doesnt work.
Please can anyone help?
thanks,
vidyasagar
So helpful thanks for posting this!
Hey, what if the form have multiple pages? It takes you out from facebook…
Only with one page works perfectly
Thank you so much! This is very valuable to me. I wouldn’t have been able to embed a google form without your help.
Thank you this worked perfectly on my first try (I do not speak html). Amazing resource!
Great post MANY thanks !!
Thanks! Really helpful!
I followed these steps and the form embedded into my page but The alignment of the fields was not maintained. Instead of the intput titles being above the input forms they are beside, which hs left them staggered rather than in a straight line like the original form. Anyone know a quick fix? My programming knoweledge is limited to say the least : )
Not sure you can do this with presentations or calendars, I only have tried it with the forms that are simple html
highly appreciate for this posting! very helpful!
Just did this! I’m no techie and I’m very impressed with myself, not to mention your super easy guide. Only prob for me is that FB loads the form very slowly.
Awesome! Just what I was looking for!
awesome post! 🙂 thanks
Thank you so much for posting this! Really appreciate the clear walk thru!
Is there a free solution for this instead of Static FBML app?
Static FBML HTML is free, no need to use an app.
AWESOME! This is the most clear instructional I’ve read in a long time.
Thanks mate. This rocks.
http://www.facebook.com/EumoraMalaysia?v=app_11007063052
how do u modify the redirect url ?
I dont think you can modify it.
I have it working but can’t get it to load my facebook wall as the confirmation. It takes me to the form itself as an html page when it is complete. Any thoughts? Also, it takes about 5 seconds to load, any way to fix that?
I’ve been searching for this kind of info. I’ll definitely try to work on this one. You’re an angel 🙂
Works perfectly! Thanks.
For multiple page forms, additional pages leave facebook to open in same window.
Amazing! Thanks…
If the redirect URL can’t be modified. This page below shows a way on how u can put the below coding, so you won’t be taken to the thank you page.
http://copaseticflow.blogspot.com/2008/03/cowbells-without-retakes.html
Question is, we cannot use iframe in facebook, anyone knows how you can get this modified ?
Agree, the explained procedure for linking the Google Form on Facebook custom Fan Page is not valid now… I tried with my team as well. Can anyone explain the process….
It is still valid, I have seen many use it in the past few days, something might be wrong with your implementation.
You are correct… Its working….
Thank you very much freind for sharing your techie knowledge with all of us….
I consult one of my friends by showing your instructions ultimately it worked….
Great tool….
Keep it up….
Any ideas on implementing Google Forms now that Facebook will stop using FBML?
this is a great post, Thank You
Also could you please help with soem guidance on how to add a google map onto a fanpage , Thanks
This worked like a charm. My only concern now is that the form isn’t taking up the entire center column and is running off to the right side. Do you know how to move the form so that it takes up the whole column?
http://www.facebook.com/pages/BuddyGripper/117158918355359?sk=app_4949752878
Thanks 🙂
Never mind, I figured it out. Thanks 🙂
Thanx, its work to publish in my Fan Page
Thanks, work perfect for me!!!
It seems that FB is going to get rid of FBML in June, 2012! This is an update from the link you gave on how to add a static FBML tab!
http://www.hyperarts.com/blog/facebook-static-fbml-phased-out/
Thanks for posting a comment and contributing!
err…my apology for posting so many here…somehow, the source code couldn’t appear in here. ?? *sigh* sori again, i am a dumb bout all this…it’s supposed to be so easy yet complicated….hahahahaha… anyways, would appreciate your help to guide me with my problem above.
thanks so much in advance.