Differences

This shows you the differences between two versions of the page.

--- addons:social_connect:hide_header [2012/04/09 17:58]
jonyo
+++ addons:social_connect:hide_header [2015/08/03 19:40] (current)
geojames
@@ Line 1: / Line 1: @@
 ====== Hide Sections in Facebook Page/App ======
-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!
+This tutorial has moved to the [[startup_tutorial_and_checklist:usability_configuration:connecting_with_social_sites:facebook_page_display|display facebook page tutorial here in the support wiki]]
-<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**((For example, if your site is at example.com you must be able to access your site using **https**<nowiki>://</nowiki>example.com.)).  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:**
-  - 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. <
-  - Find this part: <code html><div id="header"></code> <
-  - Add the CSS class "no_facebook", so that it looks like this: <code html><div id="header" class="no_facebook"></code> <
-  - Save the changes. <
-  - 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):
-    - Edit **front_page.tpl** <
-    - Find this line (which is the "start" of the left hand column): <code html>		<!-- START LEFT COLUMN -->
-		<div id="navigation_column_left"></code> <
-    - Add the "no_facebook" CSS class like this: <code html>		<!-- START LEFT COLUMN -->
-		<div id="navigation_column_left" class="no_facebook"></code> <
-    - Save changes <
-<
-  - 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: <code html><div class="center">...</div></code> You would add a space then **no_facebook** to the existing classes, like this: <code html><div class="center no_facebook">...</div></code> <
-  - 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. <
-  - 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. <
-  - In the **head.tpl** file, find this section: <code html></head></code> <
-  - **Replace** that with((NOTE: Make sure it does not already have this in the template, if it does then no need to add it again!)): <code html><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></code>
-<
-  - Save the changes. <
-  - Now browse your site "normally", and make sure everything displays normally.  If you the sections do not show when browsing normally((they should show once the main part of the page is done loading)), 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. <
-  - Go to http://developers.facebook.com/apps and edit your app's **Basic** settings((This assumes you have already set up a Facebook app and that it is working correctly, as is needed to use the **Login with Facebook** functionality built into the Social Connect Addon.)).
-    * 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 "<nowiki>http://</nowiki>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**<nowiki>://</nowiki>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 App settings((On http://developers.facebook.com/apps/)), click on the **Advanced** section on the left hand menu. <
-    - Under **Canvas Settings**, change **Canvas Width** to **Fluid**. <
-    - Save changes, then refresh (or re-visit) your app's canvas page, and make sure it displays without the horizontal scroll-bar now. <
-<
-  - **Optional:**  The above concludes setting up the //main// parts necessary to show/hide different sections based on if the page is loaded as a Facebook App or not.  You may wish to further configure your Facebook App and Canvas page settings, the above is the "minimum" necessary.  For example you can set the **App Namespace** setting, and that will affect the APP's Canvas Page URL so that it isn't some really long number.  There are other settings as well that you may wish to use, that are beyond the scope of these instructions.  See the Facebook App documentation on how to use them((One common pitfall to watch out for:  you most likely do **not** want to set, use, or "sign up for" any of the **hosting** related settings.  If your site is already up and running, that means you already have your own hosting, so you don't need to use any hosting provided by Facebook or their affiliates/partners.  A good "rule of thumb": Setting up your Facebook App when you already have your site up and running, should be entirely free.  If you ever get to a page asking you to pay something, or asking for CC or other payment info, most likely you are signing up for something you do not need.)). <

Geodesic Solutions Community Wiki

User Tools

Site Tools

Differences

Page Tools