Home » Tutorials » Facebook » How to create a facebook fan page tab with custom design

How to create a facebook fan page tab with custom design

facebook great fan pages

If you want to create a custom facebook fan page tab like this

facebook fan page tab example

then this tutorial is for you.

The code

Nowadays you can code for facebook  in simple HTML, CSS, PHP, jQuery. Everything works. Just make sure that your app is 810px wide.

And here comes the first problem. Your custom page will be cut or will scroll down, what you want to avoid.

problem with scrolling in facebook custom page tab

You want the user to be able to view the whole page. So this short script is the solution:

<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize( {height: 709} );
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize( {height: 709} );
}
</script>

Just paste it in the head section of your html and change height with the height of your page.

Advertisement

You can also add

body{ overflow: hidden; }

in your css, to make sure that you won’t see the scroll anymore.

Creating the app in facebook

First create a new app by following these steps:

http://ftutorials.com/facebook-api-key/

Update: http://ftutorials.com/create-facebook-app/

You don’t need the App Domains field, so leave it blank.

Then click on Page Tab and fill the fields that way:

creating facebook application

Important!!! You will need and SSL certificate from your hosting provider.

Adding the Page Tab Dialog

This is the final step. Here you connect the app you created with you fan page. The simplest way to do it is by using URL Redirect.

Just paste this url in your browser

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&redirect_uri=YOUR_URL

Change YOUR_APP_ID with the App ID provided by facebook and YOUR_URL with the URL, where your app is hosted. This should be the result:

Add page tab dialog

Enjoy :)

If you want to create a custom facebook fan page tab like this then this tutorial is for you. The code Nowadays you can code for facebook  in simple HTML, CSS, PHP, jQuery. Everything works. Just make sure that your app is 810px wide. And here comes the first problem.&hellip;

Review Overview

0%

User Rating: 4.65 ( 6 votes)
0

About Georgi Dyulgerov

Georgi Dyulgerov

Founder of fTutorials.com - the website aiming to keep you in touch with the latest technologies in the brand. Also a Freelance web developer.

Check Also

find facebook api key and secret key

How to get facebook API Key and Secret

1) Go to https://developers.facebook.com/apps 2) Click on Create New App 1) Go to https://developers.facebook.com/apps 2) ...

Leave a Reply

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


Loading Facebook Comments ...