You can embed content from providers like Flickr, YouTube, and other social media sites, on your pages. To do this, you need to know what URL to give the Media Browser to use the oEmbed service of the provider’s site. This differs between providers. Below is a list of providers and instructions about how to add its content to your site.

If you have need to include a service not listed below, please contact the ITS Help Desk.

To Begin (All Providers)

  1. Go to the edit tab of a page or node. In its WYSIWYG editor, click on the Media Browser icon. 
    Screen shot of WYSIWYG field icon menu, pointing to the Media Browser icon.
  2. Open the Web tab.
    Screen shot of Media browser dialogue box, pointing to the Web tab
  3. Enter the File URL of the content you wish to display. To determine what that is, find the provider in the section below and follow the instructions specific to that provider.
  1. Open Facebook in your web browser. Open the desired post; this can be done by clicking on the post or image. 
  2. To share a Facebook post, it must be set to “Shared with: Public.” You can tell a post is public by the world icon after the post date, noted by the blue arrow in the screenshot below.
    Screen shot of an opened Facebook post, pointing out the world icon and URL
  3. Copy the web address from your browser, noted by the yellow arrow in the screenshot above. The URL should be in a format similar to one of the following:
  4. Paste the Facebook post’s web address into the File URL field and click
    the Next button
    .
  5. The next Media browser dialogue screen will show a Facebook post placeholder. You will not see the desired post here. Select the Alignment of the post as None, Left, Right, or Center. Then click
    the Submit button
    .
    Screen shot of the second Media browser with Facebook preview.
  6. In the WYSIWYG box, you will again see the Facebook placeholder image. To see the post, you will need to Save or Preview your content. The post will appear on your page, similar to the post below.
    Screen shot of Facebook embed
  1. Open Instagram in your web browser. Open the Instagram post to embed on a page of its own. To do this, click on the ellipsis (…), noted by the blue arrow in the screenshot below and choose “Go to post”.
    Screenshot of Instagram post in browser with arrows noting the ellipsis menu and URL

    On the post’s page, the only content will be that of the picture and its comments.
  2. Copy this page’s URL and paste it into the File URL field of the Media browser, then click
    the Next button
    . The URL should be in one of the following formats:
  3. The next Media browser window will preview the Instagram image and allow you to select the alignment of the image as None, Left, Right, or Center. Click
    the Submit button
    .
    Screenshot of Media browser with Instagram preview, noting Submit button
  4. In the WYSIWYG box, you will again see just the Instagram image. To see the full post, you will need to Save or Preview your content. The post will appear on your page, similar to the post below.
    Screenshot of Instagram embed
  1. To add a track or podcast from SoundCloud, open the page for the piece you want to share. Click on
    the Share button
     then copy the URL provided, optionally including a starting point time in minutes:seconds.
    Screenshot of SoundCloud share pop-up
  2. Paste the URL to the File URL field and click
    the Next button
    . The URL should be in one of the following formats:
  3. The image associated with the program, station, or profile from SoundCloud will be in the file preview. You can set Alignment to None, Left, Right, or Center. When finished, click
    the Submit button
    .
    Screenshot of the Media browser with a preview of a SoundCloud podcast
  4. As in #6, only the image will appear in the WYSIWYG editor. You will need to Save or Preview the content to see the SoundCloud player.
    Screenshot of the SoundCloud player
  1. To get a Twitter tweet’s, or post’s, URL, open the tweet on a page of its own. To do this, click on the content of the post. The Twitter feed and background of the page will gray out when the individual post is opened.
    Screenshot of a Twitter Post, noting tweet and URL
  2. Copy the URL from your browser and paste it into the File URL field of the Media browser, and click
    the Next button
    . The URL should be in one of the following formats:
  3. The next Media browser dialogue screen will show you a twitter post placeholder. You will not see the desired tweet here. You can select Alignment of the post as None, Left, Right, or Center. Once selected, click
    the Submit button
    .
    Screenshot of Tweet in Media Browser, noting the Submit button
  4. Back in the WYSIWYG box, you will again only see the twitter placeholder image. To see the post, you will need to Save or Preview the content. The tweet will appear on your page, similar to the post below.
    Screenshot of an embedded tweet
  1. To get a Twitter timeline’s URL, open the timeline you wish display. The most common format will be https://twitter.com/handle, with the handle being what you use to mention the account @handle. (To get a Twitter account's list or likes, go to those pages.)
    Screenshot of Twitter timeline in browser, noting handle and URL
  2. Copy the URL and put it into the File URL field, and click
    the Next button
    . The URL should be in one of the following formats:
  3. The next Media browser dialogue screen will show you a twitter post placeholder. You will not see the desired Twitter timeline here. You can select Alignment of the post as None, Left, Right, or Center. Once selected, click
    the Submit button
    .
    Screenshot of Media browser with twitter timeline placeholder image, noting submit button
  4. Back in the WYSIWYG box, you will again see the twitter placeholder. To see the timeline, you will need to Save or Preview the content node. The Twitter timeline will appear in your content, similar to the post below. 
    Screenshot of Twitter timeline embed
  1. Go to Vimeo in your web browser. Open the item you wish to embed.
    Screenshot of Vimeo video website, noting URL
  2. Copy the URL and put it into the File URL field, and then click
    the Next button
    . The URL should be in one of the following formats:
  3. The next Media browser dialogue screen will show you an image placeholder for the video. The video will not be playable in this view. You can select Alignment of the post as None, Left, Right, or Center. Once selected, click
    the Submit button
    .
    Screenshot of Media browser with Vimeo preview
  4. Back in the WYSIWYG box, you will again see the image placeholder. To see the video, you will need to Save or Preview the content node. The Vimeo player will appear in your content, similar to the post below.
    Screenshot of Vimeo embed
  1. To get the URL of the YouTube content you wish to embed, navigate to it. YouTube videos, users, profiles, and playlists can all be embedded.  To embed a video, open the page of the video in YouTube. Copy the URL from your browser, or use the share button to embed the video with a starting point other than 0:00.
    Screenshot of YouTube in browser, noting share URL
  2. Paste the URL of your choice into the File URL field, and click
    the Next button
    . The YouTube URLs should be in one of the following formats:
  3. The next Media browser dialogue screen will show you an image placeholder for the video. The video will not be playable in this view. The image will either be the cover image of the video or an image from the start time specified. You can select Alignment of the post as None, Left, Right, or Center. Once selected, click
    the Submit button
    .
    Screenshot of Media browser with YouTube preview
  4. Back in the WYSIWYG box, you will again see the image placeholder. To see the video, you will need to Save or Preview the content node. The YouTube player will appear in your content, similar to the post below.
    Screenshot of YouTube embed
Article number: 
110816
Last updated: 
January 12, 2018
Service: