Omni CMS Mashup

Omni CMS Mashup connects to your social media accounts and displays content from them on a page in your Omni CMS site. By using a combination of scripts,* the module calls the API of each social media account and pulls in posts to display on the page. The supported social media accounts are Facebook, Flickr, Google+, Instagram, Twitter, Pinterest, Youtube, and RSS. If you want to integrate a type of social media not included, contact your Modern Campus sales representative.

Please note that Mashup integrates with third-party platforms that are not managed by Modern Campus. As such, Modern Campus is not responsible for changes made by third-party platforms that may impact how the module performs. Should such a situation occur, workarounds will be posted as updates are provided by the third-party platforms. Additional work may require a professional services engagement.

There are two versions of Omni CMS Mashup. Mashup v2 was introduced in 2018; all instances of Mashup since then are v2.

*C# or PHP server-side scripting languages only.

Mashup v2Link to this section

The main advantages of Mashup v2 are:

• The ability to add multiple accounts per social media type.
• Faster load times and less strain on resources.
• Integration with tag management and Omni CMS Blogs.

Display Page

The display page is a regular interior page, located within the /social folder off the root of your site. It is named either default.pcf or index.pcf and uses the same styling as the rest of your site.

Note that this page doesn't display when viewed on staging in Omni CMS; to see how the page looks, view it on the live site. It contains no editable regions. The display page can have its theme changed via a separate _settings.pcf page.

When loading the page on the live website, JavaScript is used to pull in the various social media posts. The row of icons at the top is used to filter posts (for example, click the Facebook icon to display only Facebook posts, etc.). The dropdown at the top can also be used to filter posts based on how they have been tagged in Omni CMS. Tagging posts is done by modifying the individual credentials page for that social media account.

Resource Files

The rest of the files for the module are located in /_resources/social. The following folders are consistent across all implementations:

• cache: contains files that instruct the module how to cache the posts it loads in, if a caching method is being used.
• credentials: contains a .pcf for each social media account connected to OU Mashup, as well as a general _settings file. Additional .pcfs can be created to connect more accounts, and the existing .pcfs can be modified.
• images: contains all images used by the module, including the various social media icons.
• js: contains the JavaScript used to display the social media posts.
• themes: contains the css files and html templates that style the display page according to each theme.
• xsl: contains files that style the pages used to edit Mashup, such as the credentials and settings pages. This does not effect the display page.

In addition, there are folders containing code that depend on the programming language of your production server (for example php, aspx).

Credentials Pages

The credentials pages are where you connect your social media accounts to Mashup. Each account gets its own credentials page. The module comes pre-loaded with one credential page for each type of social media (for example Facebook, Instagram), but you can create more by clicking +New at the top of the pages list view.

Editing credentials pages is done via page parameters (as a reminder, a page must be checked out to edit the parameters). There are two sections of the page parameters.

The first is "Title and Metadata." This contains one field for tags. When a credentials page is tagged, all posts from the associated social media account will have that tag attached in Omni CMS. Then these posts can be filtered on the display page via the dropdown. An account can have more than one tag associated, and a tag can be used for multiple accounts. All tags must start with "oumashup_" to be used for filtering.

The second section is "Custom Settings." The settings are:

• Display: Check this to show posts from this account on the display page.
• Count: Determines the number of posts from this account shown on the display page at a given time
• Account Verification: These fields are different for each type of social media account. Fill them out with the appropriate information to connect the social media account to Mashup.

When previewing a page, you see a summary of the custom settings. You can also click "Developer Debug (For Advanced Users)" to see a JSON view of the data being returned by the API. You can use this to determine if the entered credentials are valid; if not, the error message appears under the field "caption."

Credentials pages do not need to be published. For changes made to credentials pages to take effect, republish _settings.pcf.

_settings.pcf

The _settings.pcf page in the credentials folder controls settings that affect all social media accounts linked to Mashup. This is also edited via page parameters. The settings that can be modified are:

• Title and Metadata: Tags can be entered, though they only affect internal Omni CMS filtering, not the display page.
• Icons: Mashup uses images loaded into Omni CMS for the social media icons. When implemented, Mashup comes with these images already uploaded into the appropriate folders in /_resources/social/images/. Selecting an image directs Mashup to look in that location for all other images for that category (filter or feed).
  • Feed icons are those used to label individual posts on the display page.
  • Filter icons are those used at the top of the display page to filter the posts being shown.
• Theme and Handler: Select a theme for the display page. Mashup comes with four themes: Default, Default Flipped, Light, and Dark. Custom themes can also be configured by you or your web designer. The web handler, aka the location the browser requests for data, is also configured here.
• Caching Configuration: Select the type of caching you would like Mashup to use, as well as how long the cache lasts (for certain types). By using caching, Mashup can store posts to display for a certain amount of time instead of loading them from scratch every time the page is refreshed.
  • C# Caching: caches posts in system memory for the set amount of time, and creates a backup cache.
  • PHP Caching: stores the social media posts data structure in a .cache file.
  • PHP Cron: Requires a cron configuration to work and is recommended for advanced users only.
  • Scheduled Publish: Recommended if and only if no other options work. The XSL calls the scripts and generates a static JSON file as a .pcf. This JSON PCF file needs to be set on a recurring publish schedule.
  • No Caching: No caching is enabled.
• Filter Configuration: Choose whether to show the filter icons and the tag filter dropdown on the display page.

Adding New Social Media Accounts

Adding a new social media account is done by adding a new credential page and filling out the appropriate information:

1. Navigate to _resources/social/credentials.
2. Click +New.
3. Choose the type of social media account you would like to add.
4. Give the file a name; make sure it is a different name from existing credentials pages. For example, if you already have a facebook.pcf, this page might be arts-facebook.pcf.
5. Fill out the appropriate account information, such as AppID.
6. Select the number of items to be shown on the display page.
7. Click Create.

Once created, the page does not need to be published. Instead, republish the _settings.pcf file to add the new account to the display.

Mashup v1Link to this section

Mashup v1 consists of three parts: a configuration .pcf file, a page that displays the module on the website, and a folder of all the scripts for both styling the module and calling the APIs. Mashup only supports one account per social media platform.

Display Page

The display page is a regular page, usually named mashup.pcf or social.pcf. It exists in a location of your choosing in the file structure of your website, sometimes in a folder labeled /social as well.

The social media displayed on the page is pulled in using JavaScript. There is an option for editable content on the page, but it does not affect the social media display, only content on the page body itself. This page updates automatically when content is posted on any of the connected social media sites, but must be refreshed to view any updates.

When viewing the page on the live website, content can be filtered by clicking any of the social media icons at the top of the page. Selecting the double-arrow button displays content from all the connected accounts.

Configuration File

The configuration file is a page labeled _oumashup.pcf, placed in the same folder location as the display page. It utilizes MultiEdit, and lists the configuration information (such as User IDs, API keys and Client IDs) that connects each social media account to the module. These code sequences are needed for the scripts to pull posts from the social media sites.

When Mashup is implemented, our professional services team provides you with instructions on how to find the user ID (or similar identifier) for each social media account you wish to integrate with.

In the event that you need to change any of these identifiers, the page is edited by selecting the MultiEdit button and editing the appropriate field. All edits must be saved and the page published for change to take effect.

Styling Folder

All styling for the display page is contained in its own folder, located in _resources/social/css. From here you can edit the source code that controls the styling for the displayed posts, and customize it per social media type. The social folder also contains the JavaScript for calling each social media type.