Home
:
News And Articles
:
Social Networking
:
3 Steps To Add A Form To Your Facebook Fan Page Using Fbml

3 steps to add a form to your Facebook fan page using FBML

Written by Joe on Tuesday, August 31, 2010

Adding custom content to your Facebook fan page is easy with FBML

Facebook is a great way to make new business connections and interact with your customers. With FBML on your fan page, you can easily create a customized experience for your users. Adding customized boxes on your page will give your users more ways to interact with your business, and when it comes to customer interaction, the more the better.

Step 1: Getting started

First, go to the static FBML application page and click "Add to my pages" under the image on the left hand side of the page. You should get a pop up where you can select what pages you want to add the static fbml application to. Select any page you would like, you can always add more or remove them later. Now you're all set to start creating your custom pages.

Step 2: FBML

FBML stands for Facebook markup language. Go to your fan page and you should see a new box the says "FBML 1" or soemthing similar. If you don't see it, click the arrow to see if it's listed. If not, go back to the static FBML page and ensure that you have added it to your page. You can click and drag the boxes to the order you would like them to be in.

Click on "Edit page" under your Facebook page image. Look through the list for your new FBML box. Once you find it click edit. This is where the magic is done. Here you can change the title of your new box and add html code to customize it.

Step 3: The code

Inside your FBML application, you can use any code you would like. For the purposes of this example, we're going to create a simple email list form to gather email addresses for your mailing list. If you use your website to manage your mailing list, you will need to create a page to process to request to join your mailing list.

The FBML form

<form action="http://www.yourwebsite.com/mailing-list.php" method="get">
   <p><label for"email" style="padding:2px 2px 0 0;float:left;width:150px;text-align:right;">Email:</label>
   <input type=”text” style=”width:140px” name="email"/></p>

   <p><label for"name" style="padding:2px 2px 0 0;float:left;width:150px;text-align:right;">Name:</label>
   <input type=”text” style=”width:140px” name="name"/></p>

   <p><label style="padding:0 152px 0 0;"> </label><input type="submit" value="Join" /></p>
</form>

As you can see, this is just a simple form. You can use inline styles to style your form. The action in the <form> element is the page that will handle the processing of your mailing list form. Whether it sends you an email, or enters the user information to a database, this is where it's done.

As you can see, this is just a simple form. You can use inline styles to style your form. The action in the element is the page that will handle the processing of your mailing list form. Whether it sends you an email, or enters the user information to a database, this is where it's done.

All in all, it's pretty easy to set up custom forms and content on your Facebook business page. The processing of the form can be a little difficult for the average user. If you would like to add a custom form to your Facebook business page, contact us and we would be glad to help.