One of the things you can do with a Facebook App, is make your website display inside Facebook as a "Facebook App". The problem is, when you do this it still shows everything on the page just like it would show as if you were viewing the website directly. You may wish to hide the logo, or maybe hide the left or right column of certain pages. Or if you want to get really fancy, maybe use the Facebook page tabs, and make it not display the normal menu links/tabs within the design. Below are instructions for how to do just that!

<tic c n>Note: These steps are optional: If you want to show your website as a "Facebook App" within Facebook, follow these instructions. If you simply want to allow "login with Facebook" to work, and have no desire to display your website as a Facebook App, you do not need to follow these instructions.</tip>

Notes:

• These instructions assume you are using a site design close to the default design in versions 5.0 and up. If your site is dramatically different, the template files you edit and where you need to add certain parts like JS code and CSS will be different. <
• You will need to already have your Facebook App set up and configured correctly, as instructed in the instructions for setting up Login with Facebook. <
• Your site must have an SSL certificate, so that you are able to view your site using https¹⁾. This is a requirement for Facebook apps, so that visitors that choose to browse Facebook using a secure connection, will be able to view your site. If you do not have it set up, anyone trying to view your Facebook app while they are using a secure connection, will see an error message. <
• In the admin at Site Setup > General Settings:
  • You must have the setting Force SSL URL turned off (un-checked), to avoid errors/problems when someone tries to view your Facebook app using a secure connection. <
  • Make sure the setting Secure SSL Site URL is set correctly. <

<

Instructions:

1. Go to Design > Manager and edit the template file header.tpl in your main template set, usually my_templates. Make sure you are on the <..> Source Code Editor tab. <
2. Find this part:

   <div id="header">

   <

3. Add the CSS class "no_facebook", so that it looks like this:

   <div id="header" class="no_facebook">

   <

4. Save the changes. <
5. Browse your templates, and find any other sections or parts that you do not want to show when the site is in Facebook, and add the no_facebook CSS class to those parts. For example, if you do not want the left hand column to show on the front page (if you are using the default front page):
   1. Edit front_page.tpl <
   2. Find this line (which is the "start" of the left hand column):

      		<!-- START LEFT COLUMN -->
      		<div id="navigation_column_left">

      <

   3. Add the "no_facebook" CSS class like this:

      		<!-- START LEFT COLUMN -->
      		<div id="navigation_column_left" class="no_facebook">

      <

   4. Save changes <

<

1. If you wish to do this on an element that already has class=, you would add a space after the CSS class(es) already set, then add no_facebook. For instance if you wanted to make something that look like this:

   <div class="center">...</div>

   You would add a space then no_facebook to the existing classes, like this:

   <div class="center no_facebook">...</div>

   <

2. Later on, you will be able to add the no_facebook CSS class to other parts of the template as well, so don't worry too much about finding everything you want to hide right now. Just get the "main parts" you might not want to show, such as anything in the header or footer that you do not want to show. You just need enough so that it is easy to see if the show/hide sections is working correctly. <
3. Now, you will add a section to the head.tpl that will "show" the hidden sections if the page is being viewed normally. Do this by editing the file head.tpl, again make sure you are using the <..> Source Code Editor tab. <
4. In the head.tpl file, find this section:

   </head>

   <

5. Replace that with²⁾:

   <script type="text/javascript">
   	//<![CDATA[
   	/*
   	 * Facebook show/hide sections of the page, based on if it is in a frame
   	 * or not.  (if in a frame, assume it is inside facebook app).  Note that
   	 * we "start" by hiding all the sections for everyone, then if it detects
   	 * it is NOT in facebook, it "un-hides" those sections...  Using this method
   	 * should prevent the "shows for a second" problem.
   	 */
   	if (top.location == location) {
   		//This is "normal" page load, so show all the sections that should
   		//only be hidden when in facebook.
   		Event.observe(window, 'load', function () {
   			$$('.no_facebook').each (function (elem) {
   				elem.removeClassName('no_facebook');
   			});
   		});
   	}
   	//]]>
   </script>
   <style type="text/css">
   /* don't show sections in facebook */
   .no_facebook { display: none; }
   </style>
   </head>

<

1. Save the changes. <
2. Now browse your site "normally", and make sure everything displays normally. If you the sections do not show when browsing normally³⁾, check to see if you have any JS errors. If your design has any JS errors they can prevent those sections of the page from showing when you are not in facebook. <
3. Go to http://developers.facebook.com/apps and edit your app's Basic settings⁴⁾.
   • If not already configured, click on App on Facebook <
   • Enter the Canvas URL to be the main URL for your classifieds site, for instance if the software was installed at the base of example.com you would enter "http://example.com/" (without quotes). < * Enter the Secure Canvas URL to be the "secure" main URL for your classifieds site (this is required now for Facebook Apps, see notes at top of this page). Using same example as above, the value would be "https://example.com/" (without quotes). < < - Save the Facebook App settings. < - Visit the URL it shows for the Canvas Page in the same section within the Facebook App settings. When you visit the site using the Facebook App page (aka the Canvas Page), those sections you added the no_facebook class to, should not display! You can now browse the site using the facebook app page, and find any other parts of the page you may not want to show when browsing using Facebook. One place in particular you may wish to pay attention to, if you are using the Storefront Addon, is the Storefront template(s), so that parts of the Storefront pages do not show within Facebook. That way your users can set up their own Facebook apps and "point" them to their own Storefront pages, without it displaying the main site menu links and such. < - Optional: Depending on how "wide" your main site is, you may wish to change the Facebook Canvas page to use a "fluid" layout rather than a "fixed" width. If you see a horizontal scroll-bar along the bottom, even after removing parts of the page you do not wish to show within Facebook, you may want to make this change: - Within the Facebook Page settings, click on the Advanced section on the left hand menu. < - Under Canvas Settings, change Canvas Width to Fluid**. <
   1. Save changes, then refresh (or visit) your app's canvas page, and make sure it displays without the horizontal scroll-bar now. <

<