Skip to Content

Embedding a Feed or Widget

Many social media and other platforms offer embeddable widgets so that a feed or other content can be loaded onto your website page. The specific instructions for obtaining and configuring the widget vary from platform to platform, so read their instructions carefully in addition to the steps on this page.

Common platforms and widgets include Twitter, Facebook, Instagram, ShareThis, and AddThis.

Once you have the embed code, you can either add it directly to a page's code, or you can make it an asset to place on multiple pages. Keep in mind that depending on your user level or access settings, you might not be able to access these options.

Because you are adding third-party code to an OU Campus page, the code may need to be modified to work with OU Campus. A transformation error indicates that the embed code isn't XML-valid. If you need assistance, contact a web developer at your institution.

Page Code

To add the widget or feed on a single page:

  1. Copy the embed code of the widget or feed.
  2. In OU Campus, navigate to Content > Pages.
    A dropdown menu with the heading "Content." The first item,"Pages," is selected.
  3. Find the page you want to add the widget to.
  4. Either hover over the page and select Edit strong>> Page:
    A list of files in a folder. The cursor hovers over one file, with a dropdown menu titled "Edit." The "Page" menu option is highlighted.
    Or click on the page name.
  5. Open the editable region where you want to add the widget.
  6. In the WYSIWYG toolbar, click the Source Code (A blue HTML icon or A greater than symbol and less than symbol icon) button. This opens the source code of the editable region.
  7. Paste in the widget code where you want it.
  8. Click OK.
  9. Save your page and preview to make sure the widget is displaying how you want it to.
  10. Once you're satisfied with your changes, publish the page.

Assets

If you want the same widget or feed to display on multiple pages, consider making it a source code asset. Then the same asset can be placed on as many pages as you want, and if the original widget or feed needs to be changed, those pages are automatically updated.

  1. Copy the embed code of the widget or feed.
  2. In OU Campus, navigate to Content > Assets.
    A dropdown menu titled "Content." The "Assets" option is highlighted.
  3. Click the green +New button.
  4. Select Source Code.
  5. Fill out the asset info and access settings.
  6. In the Asset Content, paste the widget or feed code.
    • Source code assets must be XML-valid to work on a page. A common error with embedding feeds is Boolean attributes, or attributes that don't have a value assigned. For these attribute types, add the attribute name as the value, e.g., <script async></script>should be written as <script async="async"></script>. All "&" must be encoded as well.
  7. Click Create.
  8. Publish the asset.

The asset can now be inserted onto pages.

⇐ Return to Tutorials