Master Pages

The Master pages used in FaceSharp are based on HTML5 Boilerplate, which includes a CSS reset, a hack-free CSS technique for targeting different versions of IE, CSS feature detection, and page load optimizations.

In addition to HTML5 Boilerplate, we've added some Facebook configurations and .NET ContentPlaceHolder regions for greater flexibility. The documentation below focuses on FaceSharp configurations. More in-depth documentation for HTML5 Boilerplate is available at http://html5boilerplate.com/.

html Tag

The html tag includes the following attributes:
  • lang - primary language of the document
  • xmlns:og - XML Namespace for the Open Graph Protocol
  • xmlns:fb - XML Namespace for FBML
  • class - the IE version is defined here so it can be used for IE version-specific styles

<!--[if lt IE 7 ]> <html lang="en" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]>--> <html lang="en" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" class="no-js"> <!--<![endif]-->

Style Sheets

The 3 CSS files included by default are:
  • reset.css - global style reset used on all pages to eliminate discrepancies between browsers
  • template.css - application and page specific styles
  • reset-print.css - global print style sheet

.NET ContentPlaceHolder Regions

  • HeaderContent - additional style sheet references or other code to be included in the <head>
  • MainContent - content in views
  • PageBottomContent - additional JavaScript file references or code blocks included at the bottom of the page to optimize page load
  • PageSpecificJsDomReadyMethods - JavaScript code that will execute on DOM ready
  • PageSpecificJs - JavaScript code that will execute immediately

body Tag ID

In order to have the ability to target specific pages with jQuery or CSS, a ViewData was created to set the id on the body tag. The format of the resulting id is AreaName-AreaFolder-ViewName

<body id="<%= ViewData["BodyId"] %>">

JavaScript Files

  • jQuery - primary JavaScript library used by FaceSharp
  • swfObject - common JavaScript method for embedding Flash
  • template.js?v=version - application and page specific JavaScript (time-stamped version number prevents caching by Facebook)

Facebook Configuration

FaceSharp uses Object-Oriented JavaScript, which also incorporates namespaced variables and methods. In the Master page, we create a Facebook namespace, then define several application-specific variables within the namespace that are available to all pages. Since these are created during page load, they are available on DOM ready and when FB.init executes.

Facebook = {};

Facebook.Config = {
    FbApplicationId: '<%= ViewData["ApplicationId"] %>'
    , FbApplicationUrl: '<%= ViewData["ApplicationUrl"] %>'
    , FbApplicationToken: '<%= ViewData["ApplicationToken"] %>'
    , FbExtendedPermissions: '<%= ViewData["ExtendedPermissions"] %>'
    , SiteUrl: '<%= ViewData["SiteRootUrl"] %>'
    , IsUnauthenticated: false
};

Last edited Apr 21, 2011 at 3:58 PM by bluehazetech, version 5

Comments

No comments yet.