Saturday, December 3, 2011

Developing Facebook Applications for Your Company Fan Page

Developing an application on Facebook’s platform is a great way to add functionality and customized content to your company page. If you are familiar with coding languages you already have half the work done. Applications on Facebook for the most part are simply web pages hosted from within the site. Aside from some style constraints, most any HTML, CSS, Java, PHP and other languages can be displayed from within your company page using Facebook Applications. Perhaps one of the easiest applications to develop is a landing page for your brand. Check out this one developed for Malloy Incorporated in Ann Arbor (now Edwards Brothers Malloy).



Simply log into your Facebook account and then visit Facebook.com/developer. On the developer home page click “create a new app” in the upper right hand corner. You will be prompted to enter an app display and namespace. These can be whatever you want and can be modified later. Once your new app has been generated you can add a profile image and icon (which later will appear next to your app tab when added to your page). If you are hosting to code for your app on a server you have access too, you will not need to fill out information related to the Cloud server. If not, you can host your code on a third party hosting service provided through Facebook.



Enter your Canvas and secure canvas URL’s under “App on Facebook”. Your canvas URL is the location where your app (HTML, PHP, CSS and/or other documents) are stored. For example http://www.yourserver.com/yourappdocuments.htm. The secure URL should be the same except an S should be added after the http. You must add either a backslash or a question mark after your URL for it to work.


Next create a tab for your app. This will allow it to show up in the right column underneath your profile picture once the app has been added to your company page. The URL’s for the tab should be the same as for the Canvas fields. Once you are finished click the save button.

Adding your app to your page

In the left column there is a link that says “View App Profile Page”. Click it and once on your app’s profile page, there is a link in the left column that says “add to my page”. A list of pages (or apps) that you administer should appear in a popup window. Select the page you would like to add the app to. Go to your page and you should see the new tab in the left column.




Programming note

Displaying an app on your fan page is akin to displaying a web page from within another web page. There are a variety of constraints in terms of style that must be adhered to for all your content to appear. For instance the width of your content should not be greater than 500 to 510 pixels. The height of your content should not be greater than 800 pixels. Further, by default Facebook will produce scroll bars regardless of whether your content will fit into the allotted space. To eliminate these simply use the CSS property “overflow” with a value of “hidden”. This should eliminate both horizontal and vertical scroll bars. You must also modify the settings of your application from the “edit app” page within Facebook developer. Under “settings” and “advanced” scroll down to “Canvas settings”. Here set the Canvas width and height to “fixed” and “settable” respectively.


Adding a customized app to your company page allows you to engage your fans much more effectively. You can add links, images, calls to action, and once you get good at it, you can develop tools that visitors will find useful or fan-gate your page to generate more "likes".

Facebook applications can be used for a lot of different businesses and for all kinds of different uses.  Whether you're an accountant or an RV Dealer, you can find some way to leverage Facebook's developer tools to market your business online.

Happy developing!!!

No comments:

Post a Comment

3 Attorney Blogs That Are Crushing the Content Game

I always recommend to lawyers that they should have a blog on their site. There are several fundamental reasons that blogs are a good idea f...