Never miss a recipe!

Weekly updates from Living Free

Well, I asked a while back if any of you had an interest in knowing how I went about making my facebook welcome tab and there was a decent amount of response. So here I am :)

The other thing you should know is that you can google ‘how to create a facebook landing page’ or similar and get tons of different tutorial options. But this post is also for me to learn how to create a tutorial! (Aren’t I evil?)

If you know about facebook applications, the developer section, and FBML this will be old news to you. The tutorial that follows is meant to help out those who have a Facebook page but haven’t gone past the average post and ‘add profile image’ steps.

How to Create a Facebook Welcome Tab

You will need:
Internet Access
Adobe Photoshop (or similar)
Facebook Page (used to be known as ‘fan’ page)

Instructions:

There are essentially three parts to setting up a Facebook Welcome tab and they are as follows:

- You need to create the page (a jpeg file, something you create in Photoshop)
- You need to know how to add the page via FBML
- You need to know how to set the welcome tab as the default


Creating the Page

For the page itself, I used photoshop and used elements that I used to create my blog. I’m not sure how many of you run your own blogs, but everything on mine is done ‘in house’. If I don’t know how to do it, my blog doesn’t have it. So, for instance, my banner:

is a good graphic to use. And its already pre-made, so its quick to add to the page.

I’m not going to go into how to use photoshop, there are plenty of instruction video’s out there and I don’t want to bore the average user. But, just to give you an idea, here is a quick video showing how I constructed the page in Photoshop.

Here are some tips to keep in mind:

- The easiest format to work with is a .jpeg file. So even as you create a .psd file from photoshop, be sure to save it as a .jpeg before uploading.

- Use graphic reinforcement. Notice that I used the ‘like’ image just as it would appear above this welcome page. It just makes it easier for people to find the button.

- Before you can move onto the next step, you will need to host your .jpeg file somewhere. I have a directory through my host provider where I upload files as I need them. You can use any photo uploader program as long as it provides you with a URL for the photo (and without changing pixels or photo properties.) Although I don’t use it, I’ve heard Imageshack it a free online option for media hosting.

- IMPORTANT: On August 23, Facebook will be making a few changes to its layout so that its more uniform throughout. I’m personally bummed about the change, but you’ve got to roll with the punches! Any custom tabs you create can now only be 520 pixels wide. The length is up to you. (Before this, it was approximately 800 pixels of width space.) Boxes will also be removed.


Adding it to Facebook

Okay, so now you have an awesome looking graphic page. Now what? Adding it to Facebook does take a couple steps, but I’ll walk you through those as well. First I’m going to list the steps and then I’ll have a video that shows me taking the steps.

1) Open up the Static FMBL Application Page

2) Select ‘Add to my Page’ (a pop up window will appear, select the page you are working on). Leave the application page.

3) Sign in to your facebook page. Underneath your profile photo, select ‘Edit Page’.

4) Scroll down until you see FBML. Select it. Add Welcome to the first line. Next, you’ll want to use this HTML code in the larger form field: <img src=”your photos URL”/>. Between the ” “s, add the URL of the image that you created. Scroll down and hit Save.

Here’s a video showing those steps: (sorry it’s so small!)


Making the Welcome Tab the default (for new visitors):

The last step is the easiest but it can also be the most important. You’ll be setting the default landing page for new visitors as the Welcome Tab. It’s a smart move to make because the average user will think to hit the ‘Like’ button which automatically takes them to your page wall.

1) Sign in to your facebook page. Underneath your profile photo, select ‘Edit Page’.

2) Scroll down to where it says Wall Settings, select ‘Edit’.

3) Where is says ‘Default Landing Page for Everyone Else’, select ‘Welcome’.

That’s it! Here’s me taking those steps:

And there you have it. Although you can also create applications to go on your welcome tab, this is an easy and simple way for those of us who aren’t developers to still have a nice added feature to our Facebook page.

I hope this has been helpful for at least some of you; any feedback is appreciated :)

Thanks!

Related Posts with Thumbnails
Share
Share →

6 Responses to How to Create a Facebook Welcome Tab (Aubree Cherie Style)

  1. Ricki says:

    I am so in awe that you know about things like this! My first question would be, “What IS a FB welcome tab?” ;)

  2. Camilla (Italy) says:

    Hi Aubree,
    I’m trying to build a welcome landing tab too and I would like to ask you something. In your instructions you stated:

    “Use graphic reinforcement. Notice that I used the ‘like’ image just as it would appear above this welcome page. It just makes it easier for people to find the button.”

    I saw your page and I actually wanted to do the same thing (use the “Like” button image to make it easier to those who visit) but I wasn’t sure I could do it…I didn’t know if there was any FB restriction; is it allowed then? Can I do it?

    Thank you…and great tutorial!

    Camilla

  3. Jennifer Niles says:

    I don’t seem to have this…

    ) Where is says ‘Default Landing Page for Everyone Else’, select ‘Welcome’.

    Did Facebook change this where we can make our Welcome (or other tabs) show first?

  4. @Jennifer

    Hmm, I’m not sure why that isn’t showing up for you. I just went to my page to check it out and it’s still an option on the drop down menu. The only thing I can think of is that it won’t show the ‘Welcome’ option if the Welcome tab isn’t first created in FBML.

    There HAVE been a lot of changes with Facebook recently though, so this may be causing the issue. Sorry I wasn’t any more help! ~Aubree Cherie

  5. @Camilla

    Hi Camilla, thanks for checking out the tutorial, glad you like it!

    About the ‘like’ button as a graphic reinforcement, I’ve seen it on many other Facebook tabs and it seems to not be a problem (ie, Facebook doesn’t mind if we do that). I didn’t specify this in the tutorial, but I took a screen capture of a facebook page that still showed the ‘like’ button and then using photoshop extracted the ‘like’ image and put it on to MY created page.

    I hope this helps, please let me know if you have any other questions! I’m no expert at this, but if I don’t know I’m likely interested to find out! :) ~Aubree Cherie

  6. Hey! I know this is kind of off topic but I was wondering if
    you knew where I could get a captcha plugin for
    my comment form? I’m using the same blog platform as yours and I’m
    having problems finding one? Thanks a lot!

    my website; click through the following website

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>