Adding a Twitter or Facebook feed

* decoration

Step 1: To add a Twitter or Facebook feed, you need to first retrieve the widget codes generated by Twitter or Facebook:

Twitter feed

To obtain the widget code for a certain Twitter feed, you need to already have a Twitter account or ask whoever has access to one to retrieve the respective widget code. This can be accomplished by following the steps below:

  1. Log into your account.
  2. Visit the profile page whose Twitter feed you wish to embed (e.g. @uOttawaArts). At the top right, beside the “Follow” button, there should be a gear icon. Click on it. A dropdown menu should appear. Select “Embed this Profile”.
  3. A new window should appear. The default settings should be ok, but you may wish to lower the Height value (something like 400px should be ok).
  4. Once done, click on the button “Create widget” and copy & paste the code.

Facebook page feed

For Facebook pages, anyone can generate the code by visiting the following page (https://developers.facebook.com/docs/plugins/like-box-for-pages) and filling out the form. The recommended settings are the following:

  1. Provide the Facebook Page URL.
  2. Color Scheme: Light
  3. Disable: Show Friends' Faces, Show Header and Show Border
  4. Enable: Show Posts

Click on “Get Code” to obtain the code.

100%

<script type="text/javascript">
var fbsheet = document.createElement('style');
fbsheet.type = 'text/css';
window.customSheet = fbsheet;
(document.head || document.getElementsByTagName('head')[0]).appendChild(fbsheet);
fbsheet.appendChild(document.createTextNode(".fb_iframe_widget span[style], .fb_iframe_widget span iframe[style] { width: 100% !important; }"));
</script>

Step 2: The code then needs to be added into a Content Snippet with the WYSIWYG editor disabled:

  1. Navigate to “Content”.
  2. In the top-right of the page, select the tab called “Snippets”.
  3. Click on “+ Add Content Snippet” and then select “General Content Snippet”.
  4. Provide a descriptive Title.
  5. Under the “Body” field, change the “Text format (editor)” to “FULL HTML (No WYSIWYG”. This will disable the text editor so that it doesn’t strip out your code.
  6. In the “Body” field, enter the code you obtained in Step 1.
  7. In the “Label” field, provide a descriptive label (e.g. “Home – Facebook feed”).

Step 3: Finally, you need to add the Content Snippet to a panel page. When doing so, make sure to set the View Mode to “Content Body” instead of “Full Content” so that no title shows up.

When styling the newly added Content Snippet, select “Component Styles” and then set the “Container Type” to “Teaser”. You may also wish to configure the “Spacing” as necessary. After that, save all of your changes.

    Sujets: 
  • Soutien
    Types: 
  • Tutoriels
Haut de page