Managing your Facebook (Fan) Page for your Business effectively will promote and enhance your company image or brand and will expand your following beyond the initial fans who connected with your page.

Why? Because every fan interacting with the content on your page, whether if it is in response to a post, comment, video, link or tagged image shared, can be shared by them to their friends, results in a free and effective marketing wave. This creates great momentum to expand your client base and target market by attracting the curious friends who see their friends interacting with your page.

How do you create an inviting and engaging Facebook (Fan) Page which every visitor wants to connect with? Making a great first impression is a perfect place to start! This should create an interest and even a desire to connect with your business. Facebook Pages are a great way to tap into the social circles and are easy to create. Therefore, you will have to do something to set your Facebook Page apart from the many competitors in your market. Something like a custom Facebook Page welcome screen.

The application that I would like to share with you, works with FBML technology (FaceBook Markup Language), and this can be customized and applied in many different ways to bring advanced functionality to your very own Fan Page, in a secure and cost effective way.

When a Facebook user navigates to your page for the first time, by default, they will be introduced to your page through the Wall or Info panel. Although this is where most of the interaction takes place, it is not very flattering or inviting and may evoke little interest.

We want to change this to a Welcome tab, which will briefly inform the new comer about your business and also invite them to connect with your business by clicking the “Like” button. Once they connected with your page, we want them to go where the (inter)action is, your Wall.

Here are the step-by-step instructions to add a custom Welcome Tab to your Facebook Page:

(I use Firefox to browse with and the instructions are based on Firefox, you can use the same steps with any browser.)

Step 1:

Create your Graphic in Photoshop: Create a document with a maximum width of 520px and a height of around 780px. Because this will be displayed on the web, you can set the resolution to 72 dpi.
(520px x 780px is the same dimensions to a portrait constrained image; if you prefer a Landscape layout you can use 520px by 347px.)

Keep your welcome image clean and non-distracting with a well composed and simplistic graphic. Just like with a photograph, you want to guide the viewer’s eyes where you want them to focus on.

After adding your image/s to your graphic, you can add your company logo or tag line. This is a short and effective way to say: “This is who I am and this is what I am about.” Now it is time to invite the visitor in. Do this by adding text to your graphic which tells them to click the “Like” button.

Examples:
“Click the ‘like’ button to connect with me.” or “Become a Fan by clicking the ‘like’ button.”
 and “Like’ This Page to stay connected.”

Compose your image well to guide the viewer’s eyes to the introduction and invitation, and then back to the image or like button.

Step 2:

Upload your completed welcome graphic to a server on the internet where a browser can call it from. I suggest you upload the graphic to your Facebook Photo Album located in your private profile or preferably in your Fan Page. You can also upload it to your website or a service like Dropbox. All you need is a permanent URL (absolute url) of where the image/graphic is stored

If you upload your image to your Facebook account, you know it will load the graphic simultaneously when your page load as it is called by the browser. This will reduce traffic on your web host, as you are using Facebook to host the image.

Step 3:

Once the graphic is uploaded to a publicly accessible server on the internet, the next step is to get the placement URL (absolute URL). This is the URL where the image can be accessed directly, also known as the image address.

If you uploaded the image to Facebook (recommended), simply click on the photo to view it normally. There are many ways to find the image address, and if the photo opens up in the iFrame you do one of the following:

  • Find the image address by looking for the ‘Download’ link found in the gallery info panel on the bottom left above the ‘Share’ link. Simply right-click on the ‘Download’ link and select ‘Copy Link Location’ (Firefox) or ‘Copy link address’ (Safari).
  • Alternatively, because Facebook’s JavaScript disabled right click viewing of the image within the Ajax iFrame, you will have to take a detour. Simply right-click on the image displayed in the iFrame and select ‘Reload’. The page will reopen the image in the flat HTML view. Now you can right-click on the image, and select ‘Copy Image Location’ (Firefox) or ‘Copy image address’ (Safari).

The copied link should end with a “.jpg” extension. You will paste this copied URL into the FBML app content area in a special place as indicated later (read all the instructions before starting the process). I refer to this as the absolute URL link to your picture.

Here is a sample what the copied link should display like when pasted:

http://sphotos.ak.fbcdn.net/hphotos-ak-ash2/hs384.ash2/66267_152285394812739_130336190340993_243731_2410093_n.jpg

(NB: If you upload an image and use its placement url in the FBML application, should you delete the image at any stage, that image will be removed from the server, resulting in an empty placement url.)

Step 4:

Click here to add the Static FBML App

If this is the first time you use the application (and if you manage only one Facebook Page) you will be prompted to add or leave the application. Click on ‘Add Static FBML 2′. If you manage several Facebook Pages you will be prompted to select the Facebook Page to which the App must be applied to. Select the appropriate page.

Step 5:

This image is not to scale

  • Go to the Facebook Page where you just added the app and click ‘Edit page’ (located top-right)
  • Click on ‘Apps’ (located left, below ‘Manage Admins’)
  • Click on ‘Go to App’ (located in the middle, just below the app thumbnail)
  • Enter your Title in the top Box Title “Welcome” Keep this short and to the point.
  • Copy and paste all the code after the line into the content (FBML) area.
It is important that you remember to replace CAPITAL letters with your relevant info.

<img title="ADD YOUR TITLE" src="ABSOLUTE URL TO YOUR PICTURE. STARTING WITH http:// AND ENDING WITH .jpg" border="0" alt="ADD AN IMAGE DESCRIPTION" width="520" height="579" /> 

INFORMATION: Browsers read only code and translate it visually back in accordance to rules and markers, if a marker is missing, the code will be like a bride with a missing groom, confused and all over the place looking for a suitable replacement, upsetting the serene balance of everything else.
Below is the same code, as it should look with details added:


<img title="WELCOME TO BEAUTIFUL PHOTOGRAPHY FAN PAGE)" src="http://yourpictureurl.jpg" border="0" alt="BEAUTIFUL PHOTOGRAPHY" width="520" height="579" />

If your graphic is slightly higher (keep the width at the standard 520px) than the recommended dimensions, you can adjust the code to be stretched or reduced, to do this change the number accordingly found in the code snippet as in the example below:

From –> height=”579″ border=”0″To –> height=”500″ border=”0″
If the dimensions in the code differ from the image dimension, your image will be stretched or squashed.

If you are unsure of what the size settings should be in the code, open the original graphic (which was uploaded to your server) in Photoshop.
Once opened, press: Ctrl + Shift + i (Windows) or Option + Command + i (Mac)

This will open the ‘Image Size Adjustment’ panel. Make sure the box next to ‘Constrain Proportions’ are checked. Enter the width as 520px, your Height settings will be adjusted automatically. Use the new settings for ‘height’ in the code to ensure the graphic is resized proportionally.

Step 6:

Click ‘Save Changes’ on the Edit FBML page in Facebook.

Step 7:

Click ‘edit’ as found top-left, between brackets behind your Fan Page Name. (Displayed in blue) This will take you back to the ‘Page edit’ interface where we will configure how the Facebook Page and Welcome Tab will behave.

Click on ‘Manage Permissions’ (Located top-left, below ‘Your settings’ and above ‘

Basic information’) you should then see the following:

  • Page Visibility:
  • Country Restrictions:
  • Age Restrictions:
  • Wall Tab Shows:
  • Default Landing Tab:

Choose your new landing tab as the ‘Default Landing Tab’

This option will be displayed (named) as whatever you assigned to your FBML title for instance ‘Welcome’. With this setting, a user who visits your Facebook Page, but is not yet connected with the Facebook Page (did not click the “Like” button yet) will be navigated to the Welcome Tab each time they visit your Facebook Page.

Once they connect with your page, they will be redirected to the Wall. Even when they leave the page and return later, a fan will see the Wall and not the Welcome Tab. Your Welcome Tab is thus specially made for welcoming and inviting new visitors only.

Almost done…

Step 8:

Scroll down and click ‘Save Changes’

Remember that you won’t see your  own Welcome Tab when you navigate to the Facebook Page URL,  because you are the Admin. To see your Welcome Tab in action, log out of Facebook and go to your page to see if it displays correctly, or have someone check who is not a fan of your page yet.

Trouble Shooting:

If there is a problem with you Welcome Tab, go back to the ‘Edit Page’ interface and confirm that the settings are set correctly. If your changes to the settings are not reflected, refresh or restart your browser and change the settings again (repeat the process).

You can navigate to the Welcome Tab manually to check if it displays correctly, regardless if you are a Fan, Admin or not. Find the FBML App on the Facebook Page, located under the Profile Picture (on the left-hand side of the screen). Click on the FBML icon. The browser will navigate to the Welcome Tab. If you are happy, start telling a friends!

Conclusion

There are many apps and websites available on the internet which will add a Welcome Tab to your Facebook Page on your behalf. The process is easy and mostly automated and only requires that you fill in the required fields, upload a photo to their servers (not Facebook’s) and grant the service provider’s App permission to access your Facebook Page (often personal profiles as well).

Before you jump on this band wagon, take note that such service providers may require you to create an account and register with them (‘Free Service’) before you can make use of the service or App. Make sure you read their Terms and Conditions thoroughly before accepting and signing up, since they may reserve rights to publish to your Profile Wall, publish to your Fan Page Wall, contact you via your email, send promotional content to your email or Use your information for surveys and marketing purposes.

If you make use of such a service provider, it will be like shooting in Program Auto Mode – your Welcome Tab will have limited functionality, be controlled from the application (not your Facebook Page control interface), and will most likely be displaying their logo and link, directing traffic away from your Facebook Page. (ultimately away from your business.)

This post only covers a small portion of what FBML can do. Amongst other things, the following is also possible:

  • Add a Newsletter Subscribe Form.
  • Add Images, graphics and links.
  • Add a Youtube channel.
  • Add a Comment Box.
  • Add CSS into Your Code.
  • Add a map to find your business.
  • Add an opt-in box.
  • Control Tab content for Fans and Non-Fans.
  • Integrate Flicker and twitter to your Fan Page.
  • Build Engaging One-of-Kind Facebook Fan Pages.
Remember to post some links in the comments to your custom Facebook Page Welcome Tab’s as inspiration.

This post was provided with courtesy by:
Jacques Joubert
Midnight Studios | Inspire Your Imagination.