How to Create Facebook Fan Page with Custom Design

Blinky

Owner
In this post, I will share your how you can create a Facebook fan page with your own custom design. Here is some tutorial: http://ftutorials.com/custom-facebook-fan-page/

facebook-fan-page-tab-with-custom-design.jpg


Nowadays you can write in Facebook by using clear HTML, CSS, PHP, jQuery. All of this works. The only thing you should do it to make sure that your application is 810px wide.

After all, it comes the big problem. When you turn your design in HTML code, you will see that the full page does not appears. It stands like is cut, or you have to scroll to see its full size.

The problem here is solved with a little bit of Javascript, that allows you to see the full page in Facebook., no matter what height it has. Just put it in the head part of your HTML code.

Код:
<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>

Do not forget to change the height - 709 with the needed height.

Creating Facebook application

First we need to create new application in Facebook Developers panel. Fill out the fields as it is shown on the image.

It is important to know that you will SSL certificate from your hosting provider. That is because you need to integrate Secure Tab URL, which should begin with https://.


Creating-an-app-in-facebook.jpg


Creating Facebook application with the fan page

The easiest way to do that is to use this URL address: https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&redirect_uri=YOUR_URL

Change the YOUR_APP_ID with APP_ID of your application and YOUR_URL with the full address, that contains the files of the application.

This is the result, that you should get:

Adding-Page-Tab-Dialog.jpg


Good luck.

Resource: MyBlogRoll.eu
 

Прикачени файлове

  • facebook-fan-page-tab-with-custom-design.jpg
    facebook-fan-page-tab-with-custom-design.jpg
    109.4 KB · Преглеждания: 1

Горе