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 <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&#8221; 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

About these ads

61 Responses to Embed a Google Form on a Facebook Fan Page.

  1. [...] 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 [...]

  2. Jill says:

    GREAT tip! Thank you so much for posting it.

  3. Joe R says:

    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

  4. This is a great tutorial! thank you!

  5. 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!

  6. Jeff McLeod says:

    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

  7. Doug McIsaac says:

    Thank you. Great work around. I was wondering how you got past the iframe issue.

    Doug

    • grsml says:

      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.

  8. Korazo says:

    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!

  9. [...] 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) [...]

  10. [...] 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. [...]

  11. Nick D. says:

    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.

  12. Nick D. says:

    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!

  13. Mark says:

    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.

  14. Margot says:

    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?

    • grsml says:

      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.

  15. chris says:

    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.

  16. Peter says:

    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.

  17. Cheryl says:

    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

  18. polat alemdar says:

    Is the required fields work in facebook form when you embed google form to it.

  19. Vidyasagar says:

    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

  20. Mike Worley says:

    So helpful thanks for posting this!

  21. Andres Rubio says:

    Hey, what if the form have multiple pages? It takes you out from facebook…

    Only with one page works perfectly

  22. mabelskiful says:

    Thank you so much! This is very valuable to me. I wouldn’t have been able to embed a google form without your help.

  23. maureen says:

    Thank you this worked perfectly on my first try (I do not speak html). Amazing resource!

  24. ernst says:

    Great post MANY thanks !!

  25. buzzme says:

    Thanks! Really helpful!

  26. Jim says:

    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 : )

  27. grsml says:

    Not sure you can do this with presentations or calendars, I only have tried it with the forms that are simple html

  28. ff says:

    highly appreciate for this posting! very helpful!

  29. elaine says:

    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.

  30. Russ Alman says:

    Awesome! Just what I was looking for!

  31. Rene says:

    awesome post! :) thanks

  32. Kate says:

    Thank you so much for posting this! Really appreciate the clear walk thru!

  33. Alwin says:

    Is there a free solution for this instead of Static FBML app?

  34. Jessica says:

    AWESOME! This is the most clear instructional I’ve read in a long time.

  35. gopstar says:

    how do u modify the redirect url ?

  36. 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?

  37. Chris says:

    I’ve been searching for this kind of info. I’ll definitely try to work on this one. You’re an angel :-)

  38. Rachel says:

    Works perfectly! Thanks.

    For multiple page forms, additional pages leave facebook to open in same window.

  39. gopstar says:

    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 ?

  40. Roshan says:

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

    • grsml says:

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

  41. Any ideas on implementing Google Forms now that Facebook will stop using FBML?

  42. Daksh says:

    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

  43. tolmema says:

    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 :)

  44. Thanx, its work to publish in my Fan Page

  45. ilgiglo says:

    Thanks, work perfect for me!!!

  46. geriler says:

    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/

  47. Belinda says:

    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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: