Setting up OU Social

Overview

The OU Social app is a means by which the landing page content on a Facebook Page can be managed using OU Campus. Utilizing OU Social involves an integration between OU Campus and Facebook.

The OU Campus Facebook pages can be added by a Level 10 administrator from Setup > Facebook. For more information, visit the Setup Facebook page.

The OU Social app is set up for a Facebook Page by the administrator of the Facebook account. For information regarding the app setup on Facebook, refer to OU Social Setup.

Configuring XSL and PCF

  1. After adding and configuring the app in Facebook, download the sample XSL file, or configure an XSL file in OU Campus
  2. If using the sample XSL file, update the included CSS as necessary, and make sure that the XPath is correct for the page to be used. For instance, is the XPath document/content/node() or document/maincontent/node()?
  3. Upload the XSL file to the XSL folder in OU Campus.
  4. Create the page to be used with Facebook using a template, or identify the page that should be published to both the website and Facebook.
  5. In the Source Editor, 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 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" ?>
  6. Save the changes.
  7. Publish the page.
  8. Navigate to Setup > Facebook
  9. Hover over the desired Facebook Page row and click Edit.
  10. In the OU Social Page field, browse for the file created earlier.

    Choose OU Social Page

  11. Find and select the desired page using the filechooser.
  12. Save the changes.

Note: An HTML template/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.

  • The landing page code cannot contain any header or body tags. 
  • The landing page cannot reference any external CSS.
  • All styling must be within the designed page.
  • All URLs within the page must be absolute.
  • Do not use root relative or page relative URLs.

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 are changed for the OU Social page(s). 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.

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.

  • The width of the page should not exceed 760px when styling for the OU Social Welcome URL landing page.
  • Styling should be achieved using in-line coding when styling for the OU Social Welcome URL landing page.
  • 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.

A basic landing page template for OU Social's Welcome URL landing page can be downloaded in zip file format:

Landing Page Template (ZIP)

This template attached is configured to work with Facebook. In order to utilize this template with both Facebook and the main website, an additional XSL page will need to be created containing the header, body and footer tags, as well as the content for the header and footer. The PCF will need to be updated with an additional processing instructions to call in that XSL stylesheet when the page is being published to the main website. 

Additional Resources

Facebook offers information for developers and Page administrators.

Read more information on Facebook Pages.

Read more information on Apps on Facebook.