January 15, 2011

Creating a Welcome Page on Facebook

When I'm not at work I study ways to improve the visibility of a non-profit organization I help in my city.  I hope to improve their presence online.  And one very good way for any business or non-profit to get attention on the web is to have a Facebook page.  And once they have their own page they would benefit from keeping up-to-date on current trends.

One of these trends is to capture the attention of potential new clients by creating a 'Welcome' tab.  It is also called a splash page or landing page.

There are several methods one could use to accomplish this task such as hiring a professional designer but that will cost you a pretty penny.  An other alternative is to use services online that allow you to make your own custom pages, but again, to get fancy results you have to pay.  On the bright side this option is normally not as high a cost as hiring the professional designer.

But if you're like me and don't wish to spend more than you have to then set aside a day or so and play around with the following.  

  1. The first thing you need to do is create the art you will want on your page. 

          Whether you do this via Photoshop or another program depends on what you are most 
          comfortable using.  But there are many great programs available.

          You can also use photos.  

     2.  Load your images into a reliable service online such as Photobucket.  

     3.  Now if you are comfortable with html and fbml, facebook's version of html, then you can skip to 
          step 7.  Otherwise if you don't have the time, or you don't feel up to studying another markup 
          language keep reading. ;)

          For a fast and free solution utilize an online Image Mapping Tool.  I used www.image-maps.com/.  
          Remember that facebook is finicky and your pages might not come out right with regular html 
          code.  But don't worry because image-maps has a nifty little box that will transform your code to        
          facebook perfection.

          Upload your image using the url (http://....) link provided by Photobucket or your online image 
          tool of choice.   After a few seconds of waiting you will be shown a link that will take you 
          directly to the image map tool boxes.

      4.  Under the box heading New Map click on the button that says 'rectangle'.  Use the button that 
           says 'custom shape' if  you desire to place a link in an image that has an uncommon shape.   A 
           box will appear asking you to type in the url link and title you wish to use. Click Save found just 
           under this box.

      5.  Once you've finished mapping all your links go under the Advanced Tool Box and uncheck the 
           following boxes:  Base Url, Show Text Links, and Allow Backlink.  

           Remember that nifty little box I was talking to you about earlier?  Well now is the time to use it.  
           Go just above the Advanced Tool Box and check the little white box that says Use CSS for 
           Facebook. Click the Get Your Code button.  And watch the magic.

      6.  Go to the top of the page and click on the tab that says CSS Code.  Scroll back down and copy 
           the code created for you.  Voila!

Okay.  Now that we have our code its time to focus on that awesome, or soon-to-be awesome, facebook page of yours.  So ... step seven.

      7.  Log on to your facebook page and go to Applications.  Search for FBML if you don't see it right 
           away.  It looks like this.  When you find it add it.  

           If you see something that looks like "Added (Remove)" don't worry.  Your good! 

       8.  You should now be able to find FBML in your Applications list.  It should looks like this.

             Click on Edit and that will bring up the following box.

        9.   In the Box Title type whatever you want your tab to say.  I typed in Welcome.  In the big white 
              empty space paste the code you copied from step 6.

        10.  Click on Save Changes.

        11.  In order to make this tab/page the first thing new visitors see go to your wall and click on 
               Settings.  It should be just under all your tabs and status box to the left.   This will bring up 
               options for security settings.  Go to Default Landing Tab for Everyone Else and choose from 
               the scroll menu which tab you want to use.  

               I should also say that you can use an FBML page for advertisements and/or special announcements just to keep things interesting and get people curious to drop by again.  

And there you have it!  Have fun and if I have helped anyone I would so love to see your hard work.  Just include a link to your awesome FBML page in your comment.  Thanks and God bless!

" All hard work brings a profit, but mere talk leads only to poverty."  Proverbs 14:23

1 comment:

Munish said...

Sincerity: You could also use software from http://hy.ly to create a welcome tab or a coupon tab for free. There is no FBML or coding skills required.

As an example, here is a coupon tab created using http://hy.ly