Snippets for News Articles

As web editors, news writers have access to all of the snippets available to our larger web publishing community. If you want to use a snippet designed for a full-width region, you will need to add a new page region. 

Here are instructions on how to add the Social Media Snippet which was designed to be added only to news article pages.  

Social Media Snippet

The social media snippet can be used to embed a social media post from Facebook, Twitter or Instagram on a TU news article page. This snippet can only be added to the "Main Content" region. Here’s how you add the social media snippet to a webpage.

Copy the Embed Code

Before you can add a social media post to a TU webpage you will need to access the embed code from the original post. Here’s how you access the embed code for Facebook, Twitter and Instagram.

Screenshot of a Facebook embed menu

Facebook Image/Text Post

Login to Facebook and locate the post you wish to embed. Click the top right corner ellipsis in the post.

Select “</> Embed” and then click on “Copy Code.”

The embed code will be needed once you add the snippet to a webpage (see below).

Screenshot of Facebook Advanced Settings

Facebook Video Post

Login to Facebook and locate the post you wish to embed.

Click the bottom right “Share” icon in the post.

Select “Embed,” this will open the “Embed Video” pop-up window. Select ”Advanced Settings.” This will open the “Embedded Video Player Configurator.” Click the “Get Code” button.

Screenshot of a Facebook video embed pop-up window

This will open the “JavaScript SDK” pop-up window.

Place your cursor in “Step 2” and copy the code.

The embed code will be needed once you add the snippet to a webpage (see below).

Twitter Image/Text/Video Post

Open Twitter and find the post you wish to embed. Open the upper right corner drop-down menu from the post by clicking the three dots (the “More” menu). Select “Embed Tweet.” This will open a new window called “Twitter Publish.” Click the “Get Code” button. This will copy the embed code to the clipboard that you will paste into the snippet (see below).

Instagram Image/Video Post

Open Instagram and find the post you wish to embed. Open the upper right corner drop-down menu from the post by clicking the three dots menu. Click “Embed” and then click “Get Code.” This will copy the embed code to the clipboard that you will paste into the snippet (see below).

For Instagram you won't need the entire embed code. You instead will need to extract only a small portion of the code. To do this paste the code into Notepad (or Notes on a Mac) and highlight and copy the URL in quotes after the word “permalink.” For example:

  • <blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/CeExKMOOXVR/?utm_source=ig_embed&amp;utm_campaign=loading" data-instgrm-version="14" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:16px;">

You will use this URL string to paste into the snippet (see below).

Screenshot of the selection of a Social Media Callout snippet

Insert the Snippet

Working within “Edit” mode of Modern Campus CMS, select the “Insert Snippet” icon from the top tool bar. The “Choose Snippet” pop-up window will open. Select the “Social Media Post Callout.” In the row that says “Enter Embed URL” paste the video embed code. In the row that says “Type: Twitter, Facebook, Instagram” type the name of the social media platform you are pasting from and then click “Save and Exit” (the floppy disk icon in the top tool bar). The social media post will be embedded into your webpage.