First of all design your fan page i suggest you design width within 790px so you can completely get rid of scroll bars, Once you have designed your fan page then code it into xhtml/css, after doing that convert your html document to scripting language page, whatever your server support asp or php so you should have a fan page link like me https://www.webfulcreations.com/fanpage/index.php This is the url i will use for my custom fan page application.
Step 1
Create new facebook application.
First of all login to your account in facebook then go to facebook developers page. On that page you will see a button on top left under facebook header bar, Create new app, A dialogue box will appear select app name, and namespace there.
Once you have selected your application name and namespace, click continue. You will get a box to enter captcha for facebook enter captcha there and continue.
Setting up facebook application
Here you will see many options first of all select App on facebook area and put canvas url and secure canvas url here. Remember you have to put here the url of directory in which your fan page is suppose its on https://www.webfulcreations.com/fanpage/ here we dont and we cant put page file name. Also for secure canvas url we will use https://www.webfulcreations.com/fanpage/ This depends on you if your server support secure browsing or not but the method have to be same.
Select canvas width fluid, select canvas height fluid as well see image below.
Once you have done steps above now here you have to set Page tab options click on Page tab area, Here select what you want to put in Page tab name area this will appear above page tab box in your fan page, Let’s put welcome! for now. On next line put page URL with file name our is https://www.webfulcreations.com/fanpage/index.php and Secure page tab url https://www.webfulcreations.com/fanpage/index.php let’s leave blank page tab edit url and select an icon by clickin on change link there, then select 810 width and click on save changes, Remember if you want your fan page to support secure browsing for users of facebook who activated secure browsing you have to buy SSL certificate i have another post related to this.
Now click on save changes and copy the app id cause you need this to put it in your fan page tab. See below copy that App Id and save in somewhere notepad maybe.
Add custom app to your fan page tab
Now go to this url http://www.facebook.com/add.php?api_key=[APP-ID]&pages=1 Remember change [APP-id] with your app id you recently copied My URL would be like this where i have to go http://www.facebook.com/add.php?api_key=280533832060932&pages=1 There is drop down of pages select the page where you want to add this application tab in fan page, and click Add this app. That’s it now go to your fan page and you will see a new box there this is how you can add new fan page tabs.
Remove scroll bars from 810px width fan page.
Since facebook changed its rules so here is new code put this code before </body> in your fan page file and you will get rid of scroll bars in 810px wide fan page. So to remove scroll bars from 810px new fan page we will use following code.
[code lang=”js”]
<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : ‘258196427616916’, //Your facebook APP here
cookie : true, // enable cookies to allow the server to access the session
});
}
window.onload = function() {
FB.Canvas.setAutoGrow(91);
}
</script>
</body>
</html>
[/code]
Facebook tab tutorial can be helpful as well if you want to read more stuff about facebook fan page tabs.
