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!

Additionally while you can do this for yourself and your whole Geo site through your facebook page you can apply the same for storefront pages and let individual client display their storefront pages within their facebook pages.

<tip 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/Requirements:

• 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">

   or

   <header>

   <

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

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

   or

   <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 <
6. 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>

   <

7. 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. <
8. Now, you will add a section to the head.tpl or to the end of the html head of any page template that contains the html </head> that will "show" the hidden sections if the page is being viewed normally. Do this by editing the file head.tpl (for older designs) or search all page templates for the </head>, again make sure you are using the <..> Source Code Editor tab. <
9. In all template(s) you find the closing tag html head tag…again search for:

   </head>

   <

10. 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).
    		 */
     
    		if (top.location!=location) {
    			document.write('<style type="text/css"> .no_facebook { display: none; } </style>');
    		}
     
     
    		//]]>
    	</script>
    </head>

    <

11. Save the changes. <
12. 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. <
13. Go to http://developers.facebook.com/apps and set up your facebook page.
14. Optional: There are settings within your facebook page to set for standard 520 pixel page width or 810 pixel page width. <
15. Optional: There is also the ability to set the url used for your facebook page within the setup details for your page <
16. The above changes can be applied to the page template used for storefront pages so that individual clients can display their storefront pages within their own facebook pages. The default storefront page template is the /main_page/storefront_default_template.tpl