​Social media feeds (facebook, twitter, youtube, flickr)

In this guide we describe the process for fetching the embed code from a social media site and embedding it in SharePoint.​​

​Instructions for Pulling Embed Code from Social Media Site

​Facebook

Facebook is an integral part of Babson's social media strategy. If your department has a Facebook page we encourage you to link to it from your SharePoint page where appropriate. Facebook offers a variety of social plugins from like buttons to page feeds . Go to the Facebook Developer's Page to review the types of plugins and follow the steps to generate the neccesary embed code.

​​ 

Twitter

Step 1:

Visit Twitter, and sign in if you haven't already done so. On the upper right-hand corner, you will see a gear wheel with an arrow pointing down, select this dropdown menu. "Select Settings.

Screenshot Twitter Edit Settings

Step 2:

You're now editing your settings. Navigate through the left-menu to "Widgets." Once there, click "Create New."

Step 3:

In front of you, there are now four menu options.Screenshot Twitter Select API

  1. User timeline: this option will feature all the tweets from a particular account, including retweets.
  2. Favorites: this option will feature everything you 'favorite' from your account.
  3. List: if you have users you follow grouped into lists, this option will feature tweets from that set group of individuals.
  4. Search: this option can be used to display a particular #hashtag, all tweets mentioning a particular @user, or a particular keyword. Be very careful in using this option as it will feature any with the search term.

Step 4:

After selecting a widget type, fill in the appropriate field. Be sure to preview the content before clicking "Create widget." Please do not change the default height and do not change the theme from Light to Dark. Please change the link color to #004E74.

Step 5:

Now you will see some code underneath your preview. Copy the code displayed and proceed to step 1 of Instructions for Embedding Social Feed on SharePoint.

YouTube

These instructions are for embedding YouTube videos, our reccommended video hosting platform. Embedding videos hosted on Vimeo, Kaltura, etc. will be a slightly different process, but esentially the same.

Step 1

Navigate to the hosted video page

Step 2

Click Share, then Embed, then Show More

Share, Embed, Show More

Step 3

Select Custom Size from the "Video Size" dropdown and enter the number 692 in the first (width) field. The second (height) field will automatically fill with the number 389.

url, title, code, width

Step 4

Select and Copy the code from the box above the video preview. It should look similar to this:

<iframe width="692" height="389" src="https://www.youtube.com/embed/McVWMGzdd18?rel=0" frameborder="0" allowfullscreen></iframe>

In order to comply with accessibility guidelines, we add information to the embed code—title text, and a link to watch the video on YouTube that will appear if the user's device is unable to load the video. We also "unsecure" the video so it will work in SharePoint. The easiest way to do this is to paste the code into a text editor to modify it, then copy and paste the modified code into the SharePoint web part.

This is what the code should look like after it’s been modified (additions are highlighted):

<iframe title="Live Babson / Love Babson: Living on Campus" width="692" height="389" src="http://www.youtube.com/embed/McVWMGzdd18?rel=0" frameborder="0" allowfullscreen>Watch <a title="Visit youtube.com" href="https://www.youtube.com/watch?v=McVWMGzdd18" target="_blank">Live Babson / Love Babson: Living on Campus</a> on YouTube</iframe>

Additions

Add the video’s title as the "title" attribute to the <iframe> tag—title="video title"

Add the video’s title as a link within the <iframe></iframe>—use the format "Watch <a>video title</a> on YouTube"

Be sure the <a> link contains title="Visit youtube.com" (hover text) and target="_blank" (to open the link in a new window/tab). The "href" attribute is the URL of the hosted video page.

Subtraction

In the <iframe> "src" attribute, remove the letter "s" from "https" (the beginning of the URL). The video may not embed correctly otherwise.

In the <a> link, if the "href" attribute (hosted video page URL) contains "https" it can be left as-is—the "s" won’t affect the link functionality.

Step 5

Copy the code displayed and proceed to step 1 of Instructions for Embedding Social Feed on SharePoint.

Instructions for Embedding Feed on SharePoint

Step 1:

Go back the page where you want to add the social feed. In editing mode, select Add a Web Part > Forms > HTML Form Web Part, click Add. Once your web part has appeared, from the drop down menu select "Edit Web Part.

Screenshot Add a Form Web Part 

Step 2:

Select "Source Editor..." A pop-up window should open. Delete all the existing code and Paste the code from the social media site to replace everything. Click Save to close the pop-up.

Screenshot Web Part Source Editor 

Step 3:

Now you just need to configure how your web part looks. If you would like a title to appear for your video, change the default "HTML Form Web Part" to something you like. If you do not need a title, change the Chrome Type to "None." Click OK to save and close.

 

Step 4:

If you embed a video in main column, you must wrap the web part in a responsive container to ensure the video resizes properly on mobile devices. Under the Format Text menu select  "Edit Source." ​

​​​​

Step 5:

After opening t​he HTML source editor, locate the web part html code and wrap it with a div class of "js-responsive-container" (highlighted in yellow below). Click OK to save. JS Responsive Container​​​​​​​​​​​​​​​​​​​​​​​​​​​​

How to Resize and Float Videos

If you do not want your video to take up the full width of the webpage, you can both resize and float the video by using one of the following within the div class:

  • ​js-responsive-container one-third-left 
  • js-responsive-container one-half-left 
  • js-responsive-container two-thirds-left 
  • js-responsive-container one-third-right
  • js-responsive-container one-half-right 
  • js-responsive-container two-thirds-right