Monday, June 13, 2011

How to Edit Facebook Fan Page - Custom design


Just open Facebook.com without getting login. At the first page, Look beneath sign up you will see create fan page. You just click and follow the step to create your fan page.
Now the real part. The main purpose of this hub page is to give you the idea how to customize your fan page by putting new tab and customizing them according to your wish. As you can see in the above picture, in the fan page of Cricket Australia they have edited new tabs which includes fixture , players, welcome etc.
 
Step 1: To customize your Facebook fan page at first you have to add static FBML to your fan page. Type Static FBML in Facebook search bar. Then you will find the page of this application , look at the left side and click Add to my page. Then select the fan page you wished to add this application. (see at picture 2)

Step 2: When you have finished adding FBML to your page then go to your fan page and click Edit Page from the left side of your fan page bar. Now again look at the left side click Apps and then find out the FBML . Please follow the picture.

Step 3

Now the most important part. Click Edit setting (from the FBML as i have marked in the picture) an then click add. You have just added a new tab in your fan page but it will appear as FBML and there will be nothing, it's because you haven't customized the new tab yet. Now click go to application (from FBML same as it is given in the picture) . When you will click go to application a new box will appear. Box Title & FBML: .Here in the Box Title you have to give the name of your Tab. For example i have a fan page of Bangladesh cricket team so i wanted to create a tab for showing the list of the players name , picture, details etc. SO at first i have given the Title as "Players". Mow in the FBML: you have to give the HTML code of the content you want to post.
To post a picture at first i have uploaded the picture to any random site for example (facebook, photo bucket etc) . Then copy the link for that picture. Below is a sample HTML code for a picture
<img src="http://www.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.jpg" width="225" height="151" alt="Milford Sound in New Zealand" />
Paste your picture code instead of that (http:://www.xxxxxxxxxxxxxxxxxx.jpg) . Adjust the height and width of your picture according to your wish.
Follow the picture below:
 

Final Part:

Edit the Html code according to your wish and then click Save changes. Reach your fan page and the check the new tab whether everything is correct or not. If you don't feel it is good enough go to Edit page again and click Apps. Then in the same way edit the Html code. You can try different code to make your fan page one of the most attractive fan page . I hope i have helped you to understand the basic concept to Edit your Facebook fan page. Below i am posting the picture of  my fan page Tab after editing with FBML code.