Professional Documents
Culture Documents
Vidya Srinivasan
Microsoft Corporation
February 2013
Applies to: SharePoint 2013
Summary:
This white paper addresses how to build a social media-sharing site on SharePoint 2013 by using
the out-of-the-box video, and web content management feature sets.
February 2013
Contents
Introduction ................................................................................................................................3
Note about host-ability
Target Audience
Project #1. Creating master page and page layout for the home page ............7
Step #1: Creating and customizing the master page
Project #2. Linking videos and channels: how tagging works ......................... 11
Project #3. Customizing the home page ..................................................................... 13
Step #1: Adding the Media Web Part
13
Step #2: Adding and configuring the Content Search Web Part
14
19
19
21
Conclusion ................................................................................................................................ 23
Acknowledgements .............................................................................................................. 23
February 2013
Introduction
Social media for the enterprise has become quite a hot topic among many organizations. The benefits of
sharing videos in this world of social media are well-known. Videos are revolutionizing the way teams and
organizations communicate with each other because its the fastest way to convey information. This white
paper addresses how to build a social media-sharing site on Microsoft SharePoint 2013 (aka ContosoTube)
using the out-of-the-box video, and web content management (WCM) feature sets. The video experience in
SharePoint 2013 helps users create, upload, discover, view, share, and find videos easily. ContosoTube
leverages all the great features SharePoint 2013 offers, and uses additional features such as the Content
Search Web Part, Managed Metadata, Display Templates, Designer, and other WCM features to provide a
complete enterprise video portal experience. ContosoTube can be used by everyone to share videos across
the entire organization- be it training, knowledge transfer, or just fun morale event videos. Please note that
this white paper is NOT intended as a comprehensive introduction to the various features involved it is
assumed that intro topics will be coming for other sources. Additionally, this white paper will NOT cover nonfunctional visual customization (e.g., Master Pages, Style sheets, etc.).The final site design included in the
screenshots is a result of CSS customizations. This paper does NOT include the CSS used to build the site. This
paper is organized into different projects, which are essentially the various steps to build the site.
Target Audience
The target audience for this white paper is a SharePoint expert with a working knowledge of each of the
following areas:
February 2013
Project overview
This section will briefly describe the key components of ContosoTube so that there is enough context when we
get to the next sections.
Home Page
o Contains a featured video and display templates that display videos according to specific
criteria (such as Most Popular, Most Recent, etc.).
o Users can perform actions such as creating channels, uploading videos, browsing videos, and
navigating to the about/help page.
o Users can also search for videos using the search bar from the home page.
o Navigation displays video channels that contain videos from that channel.
Video Channels
o Channels are publishing pages with friendly URLs. Each page is associated with a Managed
Metadata term that can then be used to tag videos that are part of that channel.
Video Player Page
o Uses the out-of-the-box video player page on SharePoint 2013.
o Recommendations are built using the Content Search Web Part, and customizing the query.
February 2013
Permission-level
Permission-level required: Site collection administrator
February 2013
Note: It is recommended to upload videos to the library after configuring the channel column in project
#2.
February 2013
Project #1. Creating master page and page layout for the
home page
The Design Manager helps you create your own site design in SharePoint 2013. The first page that we need to
create is the master page. The master page defines common elements across all the pages of your site.
February 2013
Choose the navigation snippet from the snippet gallery, and configure it from the navigation settings.
Choose Managed Navigation as the Current Navigation.
Choose the term set you created to use for navigation.
Enable adding new pages to navigation automatically, and creating friendly URLs for new pages automatically.
Choose OK to save this configuration.
Update the snippet and copy the it in the <div id="s4-bodyContainer"> in the MasterPage.HTML
file. Publish the MasterPage.HTML as a major version from the Master Page gallery. The preview will
appear as follows:
February 2013
February 2013
Adding About
The About page is a help page giving users information about what ContosoTube is, and other FAQs. It is
always a good practice to have an FAQs page for your site. Create a page in the pages library in this publishing
site, and redirect the About action to the URL of that page.
<div>
<a href="https://contoso.com/Pages/About.aspx"> /* Use the URL of the page from
pages library */ </a>
<span> About </span>
<img class="icon" src="about.png" /> /* Use an image to represent this
action */
</div>
Adding Web Part zone snippets for the Content Search Web Part:
The next step in customizing our page layout is to add another Web Part zone snippet which is a placeholder
for the Content Search Web Part on the home page. Choose a Web Part zone snippet from the snippets gallery
and paste it after the code for the actions. Publish the page layout as a major version from the page layouts
gallery in the Design Manager. The page layout preview will look as follows:
February 2013
February 2013
Allow Fill-in: No
Default Value: Choose one of the terms as the default value so that even if the user does not tag a video
with a channel, the videos still show up under the default channel.
Click OK to save the settings.
Users can now tag their videos with Channels from the video edit property dialog when they upload their
videos to the site. Auto-fill helps users find their required channel.
February 2013
Figure 4. Video edit property dialog displaying the channel terms to tag the video
1.
2.
3.
4.
5.
February 2013
Step #2: Adding and configuring the Content Search Web Part
The next step is to include three content search snippets to roll up videos from the Most Popular, Most Recent
and My Uploads category. Insert the Content Search Web Part from the Dynamic Content drop-drown from
the ribbon. The three Content Search snippets can be added in the same zone so that they appear one after
the other.
Building your own display templates:
SharePoint 2013 offers a set of out-of-the-box display templates that can be used to display the Content
Search results. However, custom display templates would be built and configured in this project.
1. Create a new Control Display Template in the Display Templates folder -> Content Web Parts folder in the
Master Page gallery. You can do so by copying an existing out-of-the-box display template and editing the HTML
file. Please note that SharePoint automatically generates a .js file for every display template.
2. Include the title in the <head>.
<html xmlns:mso="urn:schemas-microsoft-com:office:office"
xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
2013 Microsoft Corporation. All rights reserved.
Page 14 of 23
To comment on this paper or request more documentation about these features, contact the Microsoft Office and Servers Team at
itspdocs@microsoft.com.
February 2013
<title>Contoso Popular</title>
</head>
3. Create a <div> in the <body> and include the following code:
<div id="Control_List_Contoso">
<!--#_
if (!$isNull(ctx.ClientControl) &&
!$isNull(ctx.ClientControl.shouldRenderControl) &&
!ctx.ClientControl.shouldRenderControl())
{
return "";
}
ctx.ListDataJSONGroupsKey = "ResultTables";
var $noResults =
Srch.ContentBySearch.getControlTemplateEncodedNoResultsMessage(ctx.ClientControl)
;
var noResultsClassName = "ms-srch-result-noResults";
var ListRenderRenderWrapper = function(itemRenderResult, inCtx, tpl)
{
var iStr = [];
iStr.push('<li>');
iStr.push(itemRenderResult);
iStr.push('</li>');
return iStr.join('');
}
ctx['ItemRenderWrapper'] = ListRenderRenderWrapper;
_#-->
<ul class="ContentSearch-List_Contoso">
<li id="Contoso_Header_Item" class="ContentSearch-ContosoPictureContainer
ContentSearch-ContosoPictureGroupHeader">
<div class="ContentSearch-ContosoPictureDataOverlay"></div>
<div class="ContentSearch-ContosoPictureDataContainer">
<h2 class="ms-noWrap ContentSearch-ContosoPictureLine1">most
popular</h2>
</div>
</li>
_#= ctx.RenderGroups(ctx) =#_
</ul>
<!--#_
if (ctx.ClientControl.get_shouldShowNoResultMessage())
{
_#-->
<div class="_#= noResultsClassName =#_">
Search is down!
_#= $noResults =#_
</div>
<!--#_
}
2013 Microsoft Corporation. All rights reserved.
Page 15 of 23
To comment on this paper or request more documentation about these features, contact the Microsoft Office and Servers Team at
itspdocs@microsoft.com.
February 2013
_#-->
</div>
Note: We create two more copies of the Control Display Template to use for the Most Recent and My Uploads
Content Search Web Parts. The title inside <div class="ContentSearchContosoPictureDataContainer"> needs to be changed accordingly.
4. The next step is to create an Item Display Template that can be used for rendering individual items in the
Content Search Web Part. Create an Item Display Template by copying the Large Picture template and change
the title element code in the <head> as shown below.
<title>Contoso LargePic</title>
5. Include the following <script> in the <body> of the Item Display Template.
<script>
$includeLanguageScript(this.url,
"~sitecollection/_catalogs/masterpage/Display Templates/Language
Files/{Locale}/CustomStrings.js");
</script>
6. Create a <div> inside the <body> and include the following code.
<div id="Item_ContosoLargePicture">
<!--#_
var encodedId = $htmlEncode(ctx.ClientControl.get_nextUniqueId() +
"_ContosoLargePicture_");
var linkURL = $getItemValue(ctx, "Link URL");
linkURL.overrideValueRenderer($urlHtmlEncode);
var line1 = $getItemValue(ctx, "Line 1");
var pictureURL = $getItemValue(ctx, "Picture URL");
var pictureId = encodedId + "picture";
var pictureMarkup = Srch.ContentBySearch.getPictureMarkup(pictureURL, 300, 162,
ctx.CurrentItem, "ContentSearch-ContosoPictureImg", line1, pictureId);
var containerId = encodedId + "container";
var pictureLinkId = encodedId + "pictureLink";
var pictureContainerId = encodedId + "pictureContainer";
var dataContainerId = encodedId + "dataContainer";
var dataContainerOverlayId = encodedId + "dataContainerOverlay";
var line1LinkId = encodedId + "line1Link";
var line1Id = encodedId + "line1";
_#-->
<div class="ContentSearch-ContosoPictureContainer" id="_#= containerId
=#_" data-displaytemplate="ItemContosoPicture">
2013 Microsoft Corporation. All rights reserved.
Page 16 of 23
To comment on this paper or request more documentation about these features, contact the Microsoft Office and Servers Team at
itspdocs@microsoft.com.
February 2013
We will be using this Item Display Template for all the three Content Search Web Parts on the home page.
Configuring the Content Search Web Part queries
The next step is to configure the Content Search Web Part queries so that they roll up the video results
according to the specified criteria.
Most Popular
The Most Popular Web Part will roll up videos from the videos library that have been viewed the most.
1. Click change query in the Content Search dialog box. This opens the query builder.
2. Switch to advanced mode and insert the following query in the query text. The query selects videos based on the
ContentTypeId and the SecondaryFIleExtension from the path specified. You should specify the path to your
videos asset library, and the video content type ID corresponding to your site.
(path:https://contoso.com/videos) (ContentTypeId:0x0120D520A808* OR (SecondaryFileExtension=wmv OR
SecondaryFileExtension=avi OR SecondaryFileExtension=mpg OR SecondaryFileExtension=asf OR
SecondaryFileExtension=mp4 OR SecondaryFileExtension=ogg OR SecondaryFileExtension=ogv OR
SecondaryFileExtension=webm))
3. Now, for the Most Popular Web Part, we need to display results that have been viewed the most. Switch to the
Sorting tab in the query builder, and choose:
Sort By: Views Recent
Descending
You can add additional sorting conditions if needed.
2013 Microsoft Corporation. All rights reserved.
Page 17 of 23
To comment on this paper or request more documentation about these features, contact the Microsoft Office and Servers Team at
itspdocs@microsoft.com.
February 2013
4. The next step is to configure the appearance and other properties in the Edit Web Part dialog.
Under search criteria:
Enter the number of items to show: 5
Under display templates:
Choose and apply the Control Display Template and the Item Display Template that we created earlier.
Under appearance:
Enter the title for this Web Part: Most Popular
Set the height and width to fit zone.
Choose the chrome state to normal.
Chrome type: None
February 2013
Step 3:
Sort By: Last Modified Time
Descending
The query will look similar to the following in the advanced mode:
February 2013
Once search finishes crawling all the videos in the videos library, the channel pages will display videos that
have been tagged with that channel name.
February 2013
Figure 7. Engineering channel page displaying videos tagged with the term engineering
February 2013
In general, the Recommendations Web Part issues a query on the recommendedfor managed property that
looks like this: Recommendedfor:<URL to item I want recommendations for> and renders the results, and this
URL is configurable.
On ContosoTube, the URL we want recommendations for is an argument of the URL to the video player page,
and this is configured as follows in the query builder. For example, consider the following URL to a video
player page on ContosoTube,
https://contoso.com/Videos/Forms/Contoso%20Video/videoplayerpage.aspx?ID=4926&FolderCTID=0x0120D
520A8080081BC7E163CE0BF4D98666E07E097BBEE001BB4D0DB47C68C41800B28E2FF105C35&List=45b4a21
3-012e-43da-b3d6adc85a977241&RootFolder=%2Fsites%2Fcontoso%2FVideos%2FSeagull%20visit%2020120521%2FAdditional%
20Content&RecSrc=%2Fsites%2Fcontoso%2FVideos%2FSeagull%20visit%2020120521
< RecSrc=%2Fsites%2Fcontoso%2FVideos%2FSeagull%20visit%2020120521> is the URL to the item we need
recommendations for.
To configure the recommendations:
1.
2.
3.
4.
The results users see are People who looked at this video, also looked at the following videos.
February 2013
Conclusion
You can now leverage the benefits of the Video and Web Content Management features to build a social
media-sharing site on Microsoft SharePoint 2013. The out-of-the-box features can be used to build a complete
end-to-end portal. CSS can be used to further brand and customize your site. The possibilities for designing
your site are limited only by your creativity!
Acknowledgements
Many thanks to Jeremy Kelly, Anton Labunets, and Kai-Marius Pedersen for providing help with the display
templates and recommendations code.