Setting up OU Social
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:
The OU Social app is setup for a Facebook Page by the administrator of the Facebook account. For information regarding the app setup at Facebook, refer to:
- After adding and configuring the app in Facebook, download the sample XSL file, or configure an XSL file in OU Campus.
- 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()?
- Upload the XSL file to the XSL folder in OU Campus.
- 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.
- 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
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" ?>
- Save the changes.
- Publish the page.
- Navigate Setup > Facebook. (See the Setting up a Facebook Page page for complete details.)
- Edit the added Facebook page.
- Select Choose under the "Welcome URL."
- Find and select the desired page.
- Save the changes.
Note: An HTML template/page can be used as well. XSL is not required for use with OU Social.
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.
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.
Do not use root relative or page relative URLs.
For more details on configuring the landing page, visit Facebook's Apps page.
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 template for OU Social's Welcome URL landing page is available here.
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.