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 the source code of a page.

Source codeLink to this section

To add the widget or feed on a single page:

1. Copy the embed code of the widget or feed.
2. In Modern Campus CMS, navigate to Content > Pages.
   
3. Find the page you want to add the widget to.
4. Click on the page name.
5. Open the editable region where you want to add the widget.
6. In the What You See Is What You Get (WYSIWYG) toolbar, click the Source Code  icon.
7. Paste in the widget code where you want it to appear on the page.
8. Click Save.
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.

AssetsLink to this section

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 Modern Campus CMS, navigate to Content > Assets.
3. Click +New.
4. Click Source Code.
5. Fill out the asset info and access settings.
6. In "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, for example, <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