VilleMatti's Internet Marketing Blog

Invitations are the most important aspect in any Facebook application. Every application should be targeted to be viral so it kind of make sense that users can invite their friends to use that particular application too. In this short tutorial I show you the basics of creating this form using FBML (witch stands for Facebook Markup Language, it’s the “local” buy cialis online way of rendering HTML). Task is simple, but as I said before, it’s a vital step on every application you create.

Also one extra step will be taken. Instead of annoying your real friends by making useless invitations to your uncompleted application we will create a testing user for you. That’s perfectly acceptable by Facebook terms. Actually they encourage you to do so, but there is a certain steps you need to do to complete that.

Let’s start to build our application again. I’d recommend you to use some text-editor what has been designed for coding. I’m using SciTe what is free and simple to use, but you can use what ever you find suitable. Remember, Microsoft Word is NOT a text-editor.

We will continue on the same project what we had before. Open the Developers section inside Facebook so we can start.

1. We need to change some settings to make this work. The sandbox option can’t be enabled. If it is only you can see the app. Because of that it’s pretty hard to create any invitations…impossible to be exact. So, on the Application Settings go to the Advanced tab and disable the Sandbox mode.

2. Let’s logout from Facebook so we arrive to the starting page of Facebook. Create a new user. Yes, a fake user. You don’t have to take care about anything except the email. That has to be valid.

Create a Gmail address if you have to. Just make it genuine.

3. Login as your new user and add your original user as a friend. After that go here: http://www.facebook.com/developers/become_test_account.php and join in. Your test user has been set up completely. You can even login with your testing account by using a different browser. It’s actually a good practise if you want to test this invitation sequence in real time.

4. Let’s start coding. First we need the form:

<fb:request-form
    method=”post”
    invite=”false”
    type=”Cool App”
    content=”<fb:name uid=’logedinuser’ /> say this is one cool app!<fb:req-choice url=’http://apps.facebook.com/greattestapp’ label=’Confirm’ />”>
    <fb:multi-friend-selector actiontext=”Tell all your friends! Tell the who buch!” />
</fb:request-form>

Fb:request is the actual form tag. The type and the content are only required options. The method is something I will explain in later videos, but the invite option is something we can talk about here. If it’s online amoxil set as true, the buy phentermine invited user will see the invitation as “Invitation”. If it’s set to false it will be shown as “Request”. Witch one you want your soon-become-users to see…is a matter of taste.

The type of the form is another part of what the invited user will see. Now he/she will see “Cool App Request”. That type can be anything like XYZ. I’d recommend you to come up with something useful and what will describe you application. Don’t play with your luck and try everything. One good rule of thumb will apply here: if Facebook doesn’t like what you are doing, you’ll be kicked out.

The content statement needs a little bit of explaining. First of all I’m using single quotes inside content=” ”. Reason for this is simple. Because the double quote in FBML will starting and ending point of the statement, I can’t use them or the Facebook would thing that the whole statement ended to word uid=. Single quotes will give the advantage what we will need. Observe the code and you will understand.

5. While we have a good working request form now build, it’s not enough. We need a sequence what forces that new user to actually add the application and grand some rights to it (like use of a profile picture and so on). That’s one rather simple task:

<fb:if-is-app-user>
<fb:request-form
    method=”post”
    invite=”false”
    type=”Cool App”
    content=”<fb:name uid=’logedinuser’ /> say this is one cool app!<fb:req-choice url=’http://apps.facebook.com/greattestapp’
        label=’Confirm’ />”>
    <fb:multi-friend-selector actiontext=”Tell all your friends! Tell the who buch!” />
</fb:request-form>
<else>
    You need to become a user first!
</else>
</fb:is-app-user>

The Fb:if-is-app-user will check is that user really added this application and granted a basic rights to it. If not the “else” statement is shown. Test it out. The invitation form is active. Use your test account for example. Can you enter the application? I don’t think so. Let’s make that possible next.

6. Inside the “else” statement we need a redirect code as following:

<fb:redirect url=”http://www.facebook.com/login.php?v=1.0&api_key=<GET_YOU_API_KEY_HERE>&canvas=<PUT_YOUR_CANVAS_PAGE_URL_HERE_STARTING_WITH_HTTP://” />

After that the full code is:

<fb:if-is-app-user>
<fb:request-form
    method=”post”
    invite=”false”
    type=”Cool App”
    content=”<fb:name uid=’logedinuser’ /> say this is one cool app!<fb:req-choice url=’http://apps.facebook.com/greattestapp’
        label=’Confirm’ />”>
    <fb:multi-friend-selector actiontext=”Tell all your friends! Tell the who buch!” />
</fb:request-form>
<else>
    <fb:redirect url=”http://www.facebook.com/login.php?v=1.0&api_key=<GET_YOU_API_KEY_HERE>&canvas=<PUT_YOUR_CANVAS_PAGE_URL_HERE_STARTING_WITH_HTTP://” buy phentermine />

</else>
</fb:is-app-user>

Here you go. Now you have a fully functional invitation form what can be used on your application. On next chapter I will explain to you how to build a dashboard for your application. After that your Facebook Application will be taking a real form. Also, I will include some PHP training to the next post. Without a real coding language your application will become very poring. Don’t worry, it’s easy code and don’t require you to learn the whole language. Stay toned!

Technorati Tags: application development, facebook, fbml, invite form

Related posts:

1. Create ”Home Based” Facebook App Development Environment