Facebook Example

The following is an example guide to configuring XSL and PCF for Facebook Pages in OU Campus

Configuring XSL and PCF

  1. After adding a page and configuring the app in Facebook, download the sample XSL file, or configure an XSL file in OU CampusSample XSL File (ZIP)

    The zip package includes:
    • fb.xsl
    • index.pcf
  1. If using the sample XSL file, update the included CSS as necessary and desired, and make sure that the XPath is correct for the page to be used. For instance, the XPath included in the file is:

document/content/node()

But the XPath might also be:

document/maincontent/node()

  1. Upload the XSL file to the XSL folder in OU Campus.
  2. Create the page to be used with Facebook using the New Page Wizard, or identify the page that should be published to both the website and Facebook.
  3. Update the existing PCF-stylesheet declaration (if using a page exclusively for Facebook) or add a new PCF-stylesheet declaration (if using a page for both the website and Facebook).

Example of Update Existing:

<?pcf-stylesheet path="/_resources/xsl/fb.xsl" extension=".fb.html" title="Facebook" ?>

Example Add Another Instruction:

<?pcf-stylesheet path="/_resources/xsl/default.xsl" extension="html" title="Web Page" ?>
<?pcf-stylesheet path="/_resources/xsl/fb.xsl" extension=".fb.html" title="Facebook" alternate="yes" ?>

This specifies that an additional page product is to be created using the fb.xsl stylesheet, with an extension of fb.html, and in Preview mode the tab title is Facebook.

  1. Save the changes.
  2. Publish the page.
  3. Navigate Setup > Facebook.
  4. Edit the added Facebook page.
  5. Select Choose under the Welcome URL.
  6. Find and select the desired page.
  7. Save the changes.

Example of the Page in OU Social

Example of the Page in OU Social

Note: An HTML template or page can be used as well. XSL is not required for use with OU Social.

Required Styling for Welcome URL Landing Page

When creating or modifying the landing page in OU Campus that will be the landing page on the linked Facebook Page, there are some styling requirements that must be noted.

  1. The landing page should not reference any external CSS. All styling must be within the designed page.
  2. All URLs within the page must be absolute. If the site is set up to use root relative or page relative URLs with directories and pages inheriting the settings from the site, it is advisable that the settings be changed for any OU Social pages. This can be done within the Access Settings. If this setting is not changed, the URL may be converted on publish to the inherited type. Do not use root relative or page relative URLs.

For more details on configuring the landing page, visit Facebook’s Apps page.

Best Practices

In addition to the required styling, there are a couple of best practices that should be included in the design of the landing page.

  1. The width of the page should not exceed 760px when styling for the OU Social Welcome URL landing page.
  2. Assets and snippets can also be used within the content area on the OU Social Welcome URL landing page as it is with the main website.