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 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.
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.
You're now editing your settings. Navigate through the left-menu to "Widgets." Once there, click "Create New."
In front of you, there are now four menu options.
- User timeline: this option will feature all the tweets from a particular account, including retweets.
- Favorites: this option will feature everything you 'favorite' from your account.
- List: if you have users you follow grouped into lists, this option will feature tweets from that set group of individuals.
- 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.
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.
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.
Go to the site where your video is located, in this example we will be using YouTube but the steps are essentially the same for other video-hosting sites. Under the video, find the "Share" button.
Under Share, select "Embed" and then change the custom size so that the first number is 220 (if you are using a left or right sidebar web part) or 456 (if you are using a main zone web part). The height of the video should automatically scale itself down. Unselect "Show suggested videos when the video finishes."
Copy the code displayed and proceed to step 1 of Instructions for Embedding Social Feed on SharePoint.
Instructions for Embedding Feed on SharePoint
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.
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.
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.
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."
After opening the 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.