Welcome to APSE

Welcome to Part 2 of our FBML video series.

In Part 1, we discussed the basics of FBML. Today, in Part 2, we are going to get you all up and running with FBML on your pet sitting Facebookfan page.

Part 1 – FBML Basics
Part 2 – Getting FBML on your fanpage (this page)

The content below transcribes much of what is covered in the video.

In this video, we’re going to add the following FBML elements to your page:

• TELL YOUR FRIENDS ABOUT US
• EMBED A YOUTUBE VIDEO
• ADD A CONTACT FORM
• ADD A NEWSLETTER SIGN UP BOX

First, Let’s Add the FBML Application

Let’s Start with first ADDING the FBML application to your page. Oh, and it’s important to note that you can only add FBML to your FAN pages, and not your personal pages. Perhaps Facebook will change this in the future, but for now it’s only applicable to your fan page.

OK, start by going to the top search box and type in FBML.

One of the first results you see should be Static FBML.

Visit that application, click ADD TO MY PAGE.

Choose your Fan page, and click ADD TO PAGE.

Head Back to Your Fan Page

Now it’s time to revisit your fan page…

Click on EDIT PAGE under your profile image…

and scroll down until you see the FBML Application.

Click on Edit.

Entering the FBML Code

It is there you will be adding all your necessary code that you want to appear on your tab. As you’ll see, you can place a variety of different elements on one tab AND you can also add more FBML tabs if you choose.

So let’s get to it.

Adding a ‘Tell Your Friends About us’ Box

We’ll start with a “Tell Your Friends About Us” box. This code happens to FBML code and not html code but it all works just the same.

And no worries, I’ll provide all the examples for you to just copy and paste into your own FBML boxes.

So here’s the code we need for this to appear.

1
2

<fb:request-form method="post" type="Your Fan Page Name Here." invite="true" content="Check out Your Fan Page Name Here on Facebook!<fb:req-choice url='YOUR FAN PAGE URL here' ' label='GO' />">
<fb:multi-friend-selector actiontext="Tell your friends about us" rows="3" showborder="true" /> </fb:request-form>

Paste it in the FBML box. Adjust the “Fan Page Name” in the code to reflect your own fan page name.

Create any tab title you want in the title area, and click save changes.

Getting the FBML Tab to Appear in Your Top Menu Bar

Now when you revisit your page, you may not see it in the list.

To allow it to show up, just click the little PLUS SIGN… click the box title and you’re good.

NOTE: After you add it this first time, you may need to repeat this step each time you add new FBML content to get it to appear in your menu. And, in the future, you’ll locate the tab option under the double arrow (») opposed to the plus sign.

Edit Your FBML Content

To edit or adjust your box content, click on Edit Profile…

Sroll down and find your FBML box.

Click edit and you’re back at square one. You can edit the title or box content from here.

Adding More Elements (Youtube Video) to Your FBML Box

You remember I said that you can have as many elements on a page as you want? Well let’s add a Youtube video below the box we just created.

Here is the Youtube FBML code.

1
2
3
4

<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/bQRjnhZazl4'
imgsrc='http://img.youtube.com/vi/bQRjnhZazl4/2.jpg' width='580' height='360' />

A few things to note about adding a Youtube video:

1: Make sure to change the example string that reads “bQRjnhZazl4” in the code to your own Youtube video code (or you’ll just be embedding my video!).

To locate your video string, visit the video online and grab the long code from the end of the URL.

Do not adjust the other FBML URL code, just replace your own Youtube video ID with the one in that code.

Also, in order for Youtube to work with FBML, an image path must remain. You can just substitute the Video ID into that string OR use any other image you have online.

Add it to the form, click save and that’s it. Remember, you may need to repeat the process of getting it to appear on your tabs.

Adding a Contact Form to Your FBML Page

Want to add a contact form or newsletter sign up box? No problems at all.

Here’s an example of the code you would use for your contact form:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<link href="http://www.example.com/style.css" rel="stylesheet" type="text/css" />
 
<form name="petcontact" action="http://www.example.com/contact.php" method="post">
 
	<p>We answer most emails the same day.</p>
 
	<label class="label" for="name">Your Name</label>
	<input class="input" type="text" name="name" size="20" id="name" value="" /> <br />
 
	<label class="label" for="email">Your Email</label>
	<input class="input" type="text" name="email" size="20" id="email" value="" /> <br />
 
	<label class="label" for="phone">Contact Phone</label>
	<input class="input" type="text" name="phone" size="20" id="phone" value="" /> <br />
 
<textarea name="message" cols="10" rows="10" style="width: 300px;"></textarea>
 
	<input id="submit" type="submit" value="Send" name="submitbutton" />
	</form>

Need A Free Form to Email Provider?

I recently came across a perfect solution for getting a free form up and running on your pet sitting website or FBML page.

It is absolutely free and even contains no ads (which is often rare for a free service). I signed up in less than a minute, used their online wizard to create my form, and even tested the code in my own FBML page.

Visit Allforms at http://allforms.mailjol.net/

Adding More than One FBML Tab to Your Fan Page

If you want to add another FBML tab, simply click EDIT PAGE under your profile image.

And locate your FBML box, and click EDIT.

From here, scroll down to the bottom of the page and click “Add another FBML box”

That will create another tab for you to work with. Click Edit and you’re ready.

Wash, rinse and repeat, as desired.

Moving the FBML Tab from the Top Menu to Your Sidebar

So let’s say you don’t want the FBML tab on the top menu bar but instead you want it on your sidebar. Not an issue.

Click on the Boxes tab in your top menu bar.

Click the little pencil icon.

And click “Move to Wall tab” – You may have to adjust the code (size) to get it appear the way you want, but you should be all set.

To get it back to your top menu bar, click the little pencil icon of that side box, and click “Move to Wall.”

Direct New Visitors to Automatically Land on Your New FBML Page

Now the last piece of the puzzle is getting your new fans to land on your FBML tab by default (opposed to landing on your wall) when they visit your page.

To make that happen, click edit page under your profile image…

Go to Wall Settings…

And adjust the Default Landing Tab for Everyone Else.

You Are Now An FBML Warrior!

And there you have it.

I know there’s a lot to take in.

If you have any comments or questions, please leave them below and I’ll answer them the best I can.

Also, feel free to show off your FBML work with a link to your page in the comments section.