This article provides instructions on how to add your organization's Facebook page as a widget in your Higher Logic environment.
TIP: Open a text editor such as Notepad so you can store some information throughout this process.
Steps - Facebook
- Open a browser and navigate to the Facebook Page Plugin page: https://developers.facebook.com/docs/plugins/page-plugin.
- In the Facebook Page URL field, replace the default Facebook URL with your organization's Facebook page URL (for example, https://www.facebook.com/higherlogic).
- Specify the dimensions of the widget and select your display preferences.
- Below the preview, click Get Code. A pop up will appear with two sets of code. Do not close the browser.
TIP: As a fail-safe, copy the code from both sections and paste it into the blank text editor. Minimize the editor to your system tray.
Steps - Higher Logic
In Higher Logic:
- Access the CMS and navigate to the page that will host the Facebook widget.
- Click the ellipsis menu and select Edit.
You will now create two HTML content items and populate each with the code from the Page Plugin site.
- Add an HTML content item by dragging and dropping it from the Build menu to the Canvas.
- Click the HTML content item to select it. Name it Facebook JavaScript and ensure the Show Title Above Content option is unchecked.
- With the HTML content item still selected, click the pen and paper icon to display the WYSIWYG editor.
- Click the HTML button, and in the Source code field, paste the div id code from the Step 1 section of the Get Code pop up.
- Add another HTML content item. Click the HTML content item to select it. Name it Facebook Widget and ensure the Show Title Above Content option is unchecked.
- With the HTML content item still selected, click the pen and paper icon to display the WYSIWYG editor.
- Click the HTML button in the editor and in the Source code field, paste the div class code from the Step 2 section of the Get Code pop up.
- Click Publish.
NOTE: The widget should display after a few moments.
You can close the browser and text editor.