Creating Facebook “like” page with “Static FBML”

After many days of experimenting on facebook “Business” or “Fan” pages, Finally I was able to create a good one. But there were many problems which I faced while experimenting, which I want to share with you.
I wanted my page to be a unique one for this I had to use "CSS"(Cascade styling sheet) in “Static FBML ”tab if you don’t know what is “static fbml” we will cover it later, So I designed CSS but it was not loading correctly. I wasted many days to get it right but all in vain so I decided to leave it.

 Then in the mean while it was updated that problem with "css" not loading was Facebook's bug and it was rectified so because of that i was able to load my css again.
So I planned this tutorial for those people who want there pages to be unique, but here I will not cover css.

Before starting the tutorial download  facebook fan page code from here you can also check my page i have customized it by using css and adding images to it.
Note: If you are planning to use styling sheet go for external css, as inline css will not work in Internet Explorer.

Check this tutorial if you want to add CSS, extras buttons, videos and mp3s on your page.

In this tutorial we will cover:

1. How to add Static FBML to your page
2. How to show different contents to fans and non fans.
3. How to add images to “Static FBML” tab
4. How to add Invitation Form to your “Static FBML” tab.

1. How to add static fbml tab to your “like” page

you can easily add static fbml to your page just by applying the following steps.

1. Go to your page, click on Edit page, then click on Apps as shown below.

2. At bottom you will find static FBML application, if it is not there click on browse more applications, or add from here, if it is there just click on Go to App or Add App

3. After adding the application click on Add to my page on application's page and select the page in which you want to add the tab.



4. Now go back to your page you will see the new tab with the name "FBML 1". this shows you have added the tab successfully, now once again click on Edit page and then on Apps, you will now have app by the name of "FBML 1" click on Go to app.



5. Now the new box will open, give the name you want your tab to be on the top and the second box where arrow is pointing in the image is the place where we will be adding our code

2. How to show different contents to fan or non fan

In the template code you have downloaded you will see the following code but in div tags.

<fb:fbml version="1.1">
<fb:visible-to-connection>
“visible to non fans”
<fb:else>
“visible to fans only”
fb:else>
</fb:visible-to-connection>
</fb:fbml>

You can use the above code to show different contents to both fans and non fans.

3. How to add images to your “Static FBML” tab

You can add images to your tab by using the following code

<img src="http://yoursite.com/images/image.jpg" />

or

<img src='link to images" />

4. How to add invitation form to your tab

Following is the code to add invitation form:

                <fb:fbml>
                    <fb:request-form
                        action="http://www.facebook.com/pages/onlytipsandtrickscom/164732923538142"
                        method="GET"
                        invite="true"
                        type="Like page "
                        content="I like this page and hope you will like it too.<fb:req-choice url='http://www.facebook.com/pages/onlytipsandtrickscom/164732923538142' label='Accept' />"
                   <fb:multi-friend-selector
                            showborder="false"
                            actiontext="Invite your friends to onlytipsandtricks.com">
                    </fb:request-form>
                </fb:fbml>

For more information about invitation form See documentation.

Share this

Hasnain