Custom Facebook Fan Page Part 1

Ok so I'm gonna go thru the preliminary steps... I'm gonna break this up into 3 parts this first installment will teach you how to add a clickable image to your profile side bar on the Left this is the first step in working with the Static FBML Application on facebook.

1. Prerequisites for this Excercise is of course a Facebook fanpage
2. Some basic knowledge of HTML... (Copy Paste is what I call basic for this excercise)
3. Some familiarity with Photoshop and creating images for when we get to the custom landing page part. (I will be adding instructions that will be as basic as possible but I do this for a living so I may take for granted or gloss over some things.
   
4. I will try to provide screen shots of what I'm doing for a visual reference

First things first go to your fan page. Depending on where you land:
If you are on the ads manager page click on pages this will bring you to the page manager...
for the majority of what we will be doing this will be where you will add widgets and applications.
I will refer to this from now on as page manager.
If you are on your actual fanpage click edit page to bring you to the page manager.
Scroll all the way down to the bottom and you will see the More Applications Box. Click the pencil in the right corner select Browse More.
(click images to make larger and not blurry!)





Next on the application screen you will see a list of applications
We want to find the Static FBML APP
Type that into the search field.

When you reach the Static FBML Page
Directly beneath the icon on the left you will see the option to add to page


Click to add to page and this box will pop up:



Your page should be listed here (as I've already added the app to my page mine isn't there) but click add to page directly across from your page. Then hit close.

Now we will return to the main page manager window. Follow the steps above to get back to the page manager.

Now here is a simple simple example of just adding a linkable image to your sidebar. From which you can build upon to add custumization to your page.

Open up a new tab: Go to etsy.com and then go to the community tab and then resources
Find the big orange circle that says find me on etsy. Click on it. A code window should open up.
Copy the code.
Now return to your facebook fan page Page Manager.
Scroll down until you see this:


click the pencil Directly across from the FBML 1 application.




Select Edit.

That will bring you to a screen that says Edit FBML...
Take the code that you copied from etsy and paste it in the LARGE BOX.
The small box at the top will be what this box will be labeled I kept it simple and put Find me on Etsy there as the tittle of my box. You can always come back and change this later.
Now the Etsy code will link out directly to ETSY. We want this to shoot out to YOUR shop.
So we will need to replace the www.etsy.com with your shop url.







Click Save at the bottom.
Then click on your page name in the upper left hand corner of your page.
Click the Boxes Tab on the tab bar on your fan page.
Your Etsy button should be there.
To move this to your profile sidebar you need to click on the pencil to the right of the button and select move to wall tab.
And TADA you have created a button that links out to your page and successfully moved it to your sidebar where it will be EASY Peasy to find.
You can do this with ANY image.
A blog badge a twitter badge anything. (check out my item of the week Badge Using this same code and just changing the img src, and the link info as we did earlier.)
You can pull in images from your blog... from your shop and link them out using the steps we just used. OR... you can create an image and upload it to your website (If you don't have one you need to get one for STEP 2 (photo sharing sites DON'T like you using their sites to upload for websites so it's best to use your own web service. Get the url for your images and replace the img src"http://team.etsy.com/images/downloads/buttons/findme.jpg" with your images url and then replace the link part with whatever you choose to link it to. This Adds so much customization to your page in just a simple step.
This same principal can be used for creating the custom Landing page for the fanpage. For that we will be using photoshop to create some simple boxes and slicing them up in photoshop and inserting all of the links there and then inserting the html code generated when you save for web and devices and dropping that in the FBML box.
If you have no idea what I just said Stay tuned Tonight or Tomorrow I will be putting up the Steps for the next half of the Lesson!
But now you know how to add custom badges and buttons to your page!!! And how to work with the FBML application.
In case you want to go crazy with this and add more go to the Page Manager and click edit on your FBML box (remember you renamed it so it won't be FBML 1 any more) scroll down to the bottom and you will see add another FBML Box click edit to add to that box. Take the steps we did earlier to add more stuff.
Cheers and have fun and I would love to see what you come up with!!!