Home » Make a new tab with a native Facebook App

Make a new tab with a native Facebook App

Note that in 2014, these app tabs have left the building. Facebook seems to want to frustrate the business and marketing sector every year or so. This is a good video to give you some over site.

 This is a republished article that has had major changes to it because of the removal of profile pages for apps which was a significant part of integration a page tab into a page. This process explains the process post February 7, 2012.

To make a new tab through a native Facebook App, do the following:

Profile Box:

Facebook AppAdd an image for thumbnail and icon. The icon is to be 16×16 pixels and the larger App image is 75×75, though Facebook does a good job of resizing the 75 thumbnail down to the 16 icon. To edit the thumbnail click on edit.

 

Basic Info:

Facebook AppApp Display Name: This is the name of the app as displayed when you look at your apps – this is NOT a tab name.

App Name Space: If you use this as a Canvas page or Open Graph. No capitals or spaces and 7 characters. No spaces

Cloud Services: Ignore this for tab creation.

Select how your app integrates with Facebook
Fill out the fields for the link to which you have posted your canvas html. Make sure that your secure page tab is on a webserver with an SSL certificate which is require as of October 11, 2011. This results in allowing those who use Facebook with secure login to see the canvas if the url is https://www…

Facebook App

NOTE:  Removing App Profile Pages: App Profile Pages are now deprecated (unsupported). You will get an error if you try to access old profile pages for any app. See below about canvas to make a standalone canvas page for your tab app if you wish to handle it that way. We recommend updating any links that you have shared to your App Profile Page to point to your new target Page or app. Please save any content or Insights that you wish to keep. This content is accessible via the Graph API with any valid access token. For additional information, please review this post: https://developers.facebook.com/blog/post/2012/02/01/how-to–migrate-your-app-profile-page/.

  • Now click on Save changes.
  • Now go back to your apps and look at the profile for the app.

Here I try to explain the new process as of Februrary 7, 2012 based on  http://developers.facebook.com/docs/appsonfacebook/pagetabs/.

  • So you are on your apps page right? It is at https://developers.facebook.com/apps
  • Select the app that you want to integrate. Yes you were just here a moment ago setting up the information above.
  • You now have to make it live on your page. Install your Page Tab App by modifying
http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

where YOUR_APP_ID and YOUR_URL can be found in the settings on the apps page. The first is a number string. This is YOUR_APP_ID.

You will get YOUR_APP_ID from here:

Facebook App

  • The second to modify the URL is YOUR_URL of the content on your server. The one you pasted here:

Facebook App

  • Put the modified URL in the browser in place of YOUR_URL in the above string.

Now press enter in the url window of the browser to bring up the Add to Page Dialog:

Choose the page you want to tie it too and a NAME for the tab. Press Save then OK.

 

Facebook App

 

  • Go to the page and click more to see tabs and edit – now you can rearrange the order.

Facebook App

 

Make sure you now click  DONE!

If you are not ready to publish the tab, edit your page and then your apps as listed and from there you can hide the tab by publishing it.

That should be it.

Stop the Scroll Bars

Facebook has a restriction on code so that you cannot go deeper than 800 px. TO ensure that there are no scroll bars use the following information

You will need to know your app id from here:

Facebook App

The following goes at the top of the body area of your webpage.

<div id="fb-root"></div>
    <script>
      window.fbAsyncInit = function() {

        FB.init({
appId: 'YOURAPPIDHERE',
 status: true, 
cookie: true,
xfbml: true,
oauth  : true // enable OAuth 2.0
});    
FB.Canvas.setAutoGrow();
      };
      (function() {
        var e = document.createElement('script'); e.async = true;
        e.src = document.location.protocol +
          '//connect.facebook.net/en_US/all.js';
        document.getElementById('fb-root').appendChild(e);
      }());
    </script>

 

 

Make a Canvas page for your App

You must do the same for App on Facebook as you did for Page Tab – however:

  • Canvas URL must point to a directory (i.e., end with a ‘/’ or a dynamic page (i.e., have a ‘?’ somewhere). - This is the folder on YOUR server where you have your facebook content.
  • Secure Canvas URL must point to a directory (i.e., end with a ‘/’ or a dynamic page (i.e., have a ‘?’ somewhere). - This is the folder on YOUR server where you have your facebook content.

The App Namespace is used to find the app page and is appended as follows. http://apps.facebook.com/Tab_promotions in this example.

When a user navigates to the Facebook Page, they will see your Page Tab added in the next available tab position. Broadly, a Page Tab is loaded in exactly the same way as a Canvas Page. Read more about this in the Canvas Tutorial. When a user selects your Page Tab, you will receive the signed_request parameter with one additional parameter, page. This parameter contains a JSON object with an id (the page id of the current page), admin (if the user is a admin of the page), and liked (if the user has liked the page). As with a Canvas Page, you will not receive all the user information accessible to your app in the signed_request until the user authorizes your app.

In addition, your app will also receive a string parameter called app_data as part of signed_request if an app_data parameter was set in the original query string in the URL your tab is loaded on. For the Shop Now link above, that could look like this: “https://www.facebook.com/YourPage?v=app_1234567890&app_data=any_string_here“. You can use that to customize the content you render if you control the generation of the link.

OK. So, the reason we made a canvas page is this:

Apps on Facebook are web apps that are loaded in the context of Facebook in what we refer to as a Canvas Page. You can build your app using any language or tool chain that supports web programming, such as PHP, Python, Java or C#.

Canvas for your app:  Apps on Facebook are loaded into a Canvas Page. A Canvas Page is quite literally a blank canvas within Facebook on which to run your app. You populate the Canvas Page by providing a Canvas URL that contains the HTML, JavaScript and CSS that make up your app. When a user requests the Canvas Page, we load the Canvas URL within an iframe on that page. This results in your app being displayed within the standard Facebook chrome.

 

Posted by textureweb on Mar 07, 2012
Facebook, Social Media 101 • Tags: , , , , , , , , , , , , , - Read this post