Cracker Jackiez

Facebook is one the fastest growing social media network and its users are increasing by thousands every day. Due to its vast base of users, it takes no effort to acknowledge its influence and any company will jump on the bandwagon to utilize Facebook because it allows them to boost their brands or products also in the same time engage with possible clients. It is convenient for a company to create a Facebook page, publish their profile and products however, setting up a Facebook page that receive many "likes" and a huge fan base is never an easy task.

What is the first thing a visitor will see when they land on your Facebook page? Most of them will probably click on the “wall” or the “info” and if nothing is more fascinating than that, chances are they will leave your page. It is an advantage when visitors "like" your page and become a fan is because they will be updated from time to time with latest things you published. With the Static FBML application which render HTML and FBML on Facebook Pages you are now given more options to design your Facebook page.
I am sure some of you have stumble upon Facebook page that makes you wonder “How is that even possible?!” Now it can be possible. In this post I hope I’ve successfully covered some tips and tricks to give your Facebook page a boost.

1 – "Call-To-Action" Graphic

More of a piece of advice than a trick. The main purpose of your Facebook landing page is to convert visitors into fans. Place a clear call-to-action graphic in the landing tab, this will help getting more "Likes" from your visitors.
Example: RedBull’s "Red Bull" tab has nothing but a call-to-action on it.

2 – Embedding YouTube Video

An image is needed whenever you place a video because Facebook does not allow you to run flash instantly, you need to launch it with a click, until then you see the picture instead.

You can use YouTube generated picture like in this code, or you can put your own URL with your custom picture.
The code:

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

Code explanation:

• swfsrc – video source URL;
• imgsrc – image source URL;
• xxxxxxxxxx – YouTube code.

xxxxxxxxxx is taken out of YouTube video URL like this - http://www.youtube.com/watch?v=RJwbGPXMapA (it’s the part after ?v=).
Learn more about fb:swf

3 – Hiding content from non-fans

This can be use as a teaser to encourage visitors to "Like" your page and become a fan.

The code:

<fb:fbml version="1.1">
 <fb:visible-to-connection>This part is visible for fans only!
  <fb:else>This part is visible for non-fans</fb:else>
 </fb:visible-to-connection>
</fb:fbml>

Code explanation:

• fb:visible-to-connect – the part that only your fans will see;
• fb:else – the part for non-fans.

Most of the pages use an image with a call-to-action for a fb:else tag, and the page itself goes under the fb:visible-to-connect. That’s really easy to do, and very powefrul.

4 – Products commenting

This feature is great for setting a little store under your Facebook business page as you can have each of your products liked and commented.

The code:

<fb:comments xid="YOUR_PRODUCT_UNIQUE_ID_#1" canpost="true" showform="true" candelete="false" numposts="3" returnurl="http://YOUR_PRODUCT_HOME_URL">
</fb:comments>

Code explanation:

• xid – unique identifier of the item you put comments on;
• returnurl – the URL, to which likes and comments will stick.

The rest of the parameters is used to configure the plugin itself and are pretty self-explanatory.
Learn more about fb:comments

5 – Insert "Share Button"

With this button you can have Facebookers share almost anything. Put the URL you wish to share in the code and once a person uses the Share button, all his friends will see this URL in their news feed.

The code:

<fb:share-button class="meta">
 <link rel="target_url" href="http://yoururl.com"/>
</fb:share-button>

(Somehow the documentation of this FBML tag is no longer available. I really hope they won’t turn off this great plugin.)

6 – Insert Flash Content

The code:

<fb:swf swfbgcolor="000000" swfsrc='http://domain.com/file.swf' imgsrc='http://domain.com/picture.jpg' width='760' height='920' />

Code explanation:

• swfsrc – source of the .swf file;
• imgsrc – source of the image that is being displayed, before you flash.

Remember that you need a preview image which people will see before they launch Flash.

7 – Image Rollover

People can go rather creative about this trick, but it’s really simple to do with HTML + CSS, which is supported by FBML box.

The code:

<style>
 img.nohover {border:0}
 img.hover {border:0;display:none}
 a:hover img.hover {display:inline}
 a:hover img.nohover {display:none}
</style>

<a href="THIS IS WHERE YOUR LINK GOES">
 <img src="base_image.jpg" class="nohover">
 <img src="hover_image.jpg" class="hover">
</a>

8 – Track with Google Analytics

Facebook analytics system has limited information? No problem! You can set Google Analytics on your Facebook page.

Just create up a new account in Google Analytics using your Facebook page URL, copy your UA-XXXXXXX-XX number and insert it here:

<fb:google-analytics uacct="UA-9999999-99" />

Place this line at the top of your FBML code and in a couple of hours you’ll see stats in Google Analytics.

9 – Add "Invite your friends" box

This is basically a standalone box, which is really hard to embed to a page design. However this is probably the best solution for a page footer that you can think of, as your visitors can instantly choose some of their friends and send them invitations to your page.

The code:

<fb:request-form method="post" type="[your organization]" invite="true" content="Check out [your organization]<fb:req-choice url='http://www.facebook.com/YOURPAGE' ' label='GO' /> ">
 <fb:multi-friend-selector actiontext="Tell your friends about [your organization]" rows="3" showborder="true" />
</fb:request-form>

Since the pages were shrunk to 520px there’s a little trouble with this box, as it’s still 760px. But I’m sure somebody has already reported that and the box will be shrunk too.

10 – Pop-up dialog

If there’s too much content on your page, you can hide some parts of it under the pop-up boxes. The code adds a text link, which results in a pop-up dialog text box.

The code:

<a clicktoshowdialog="dialog-name" href="#" >Click here to launch the pop-up dialog</a>.

<fb:dialog id="dialog-name">
<fb:dialog-title>POP-UP DIALOG NAME</fb:dialog-title>
<fb:dialog-content>Here goes your pop-up dialog content</fb:dialog-content>
<fb:dialog-button type="submit" value="Close" close_dialog="1" /></fb:dialog>

Learn more about fb:dialog

This was a basic set of tricks which you can use to pimp your page easily. Hope you are now inspired to make a compelling Facebook business page for yourself. Good luck!