Facebook provides many tools for maximizing the effect of your presence and brand on the social network, most of all by means of business pages, also known as fan pages.
Using a variety of applications and Facebook API tools, you can get creative not only with the page content, but with the design, too.
In addition to the cool design that you can do (or have done for you by Rosepapa Creative), you can also utilize FREE tools for lead capture. One of the tools that work really well for adding a newsletter sign up to your Facebook page is embedding a Google form. You can also embed other lead capture forms, which are a bit more complicated and most of which have a monthly fee, such as Constant Contact, Campaign Monitor etc. I think this one is good for starting out and getting familiar with lead capture from Facebook and also using the FBML application.
It is somewhat technical, however, give it a try.
If you need help, contact me or reply to this post and I’ll help you out.
The details.
1. First do you have a Google account? If not, sign up for one—it’s free.
2. Next you will utilize more free tools with Google Docs. Let’s create a spreadsheet. I found this youtube video that explains the process of creating a spreadsheet in Google Docs. http://www.youtube.com/watch?v=DCSKJavdglU
3. Do you have your spreadsheet created? Awesome, let’s move on to the next step.
4. Back to Facebook: If you don’t have the application FBML added to your FB we will need to do this.
A. Go back to your Facebook Business page.
B. Go to edit page.
C. Go to Applications—edit.
This opens an All Applications page.
It’s quicker to add “FBML” in the top search bar.
5. Search results will pull up “Static FBML”
6. Select It.
7. Add to My page.
TIP: If you need to see this in action—check out this video.
8. Click edit. You should have a box. This is where we are going to add code. Before we do this we need to get the code from our Spreadsheet and make some modifications.
9. 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 something like this (your code will have a different number so don’t copy this).
“<iframe src=”http://spreadsheets.google.comembeddedform?
formkey=dGpoTW56emdaUWlFZjVwYmM3aVhXbXc6MQ” width=”760″ height=”587″ frameborder=”0″ marginheight=”0″ marginwidth=”0″>Loading…/iframe>”
10. Facebook does not support certain programming. We will need to remove the iframe tag. Remove the tag so that your form looks something like this:
http://spreadsheets.google.com/embeddedform?formkey=dGpoTW56emdaUWlFZjVwYmM3aVhXbXc6MQ
11. Copy and paste your 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.
12. View the Page Source of this page, you are going to copy all of the HTML of the URL you just saw.
(You will need a web tool to look at the code on a webpage. I use Firefox for my browser and the Web Developer extension tool that can be downloaded here.
13. Paste this HTML into the Static FBML edit window It should look like the following:
14. 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>”
15. 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. At this point you should be able to hit “save”, make the tab active and test your form.
EXTRA: Do you want the sign up form on the main page in the left column?
This is how to do it:
Go to ‘edit page’ under your page image and goto ‘application settings’ in the FBML section. You can then ‘add to box’, once you have done this then click on ‘boxes’ tab on top menu and click the pencil icon on the from box you made.
Select ‘move to wall tab.’
Once you get this, you’ll see the potential. Use your data from your Google Aps to create marketing campaigns.
