You are on page 1of 23

How to build a social mediasharing site in SharePoint 2013

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.

2013 Microsoft Corporation. All rights reserved.


This document is provided "as-is." Information and views expressed in this document, including URL and
other Internet website references, may change without notice. You bear the risk of using it.
Some examples are for illustration only and are fictitious. No real association is intended or inferred.
This document does not provide you with any legal rights to any intellectual property in any Microsoft
product. You may copy and use this document for your internal, reference purposes. You may modify this
document for your internal, reference purposes.

How to build a social media-sharing site in SharePoint 2013

February 2013

Contents
Introduction ................................................................................................................................3
Note about host-ability

Target Audience

Project overview .......................................................................................................................4


Permission-level

Setting up the Content Structure

Lists and Library

Project #1. Creating master page and page layout for the home page ............7
Step #1: Creating and customizing the master page

Step #2: Creating the Page Layout

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

Project #4. Customizing the channels page .............................................................. 19


Creating a page layout

19

Configuring the Content Search Web Part

19

Project # 5. Customizing the video player page ...................................................... 21


Configuring the Recommendations Web Part

21

Conclusion ................................................................................................................................ 23
Acknowledgements .............................................................................................................. 23

How to build a social media-sharing site in SharePoint 2013

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.

Note about host-ability


Many features of the social media-sharing site (ContosoTube) that we build in this white paper rely heavily on
the Content Search Web Part, which is not yet available on SharePoint Online. As of today, the guidance
included in this white paper is applicable to on-premises deployments.

Target Audience
The target audience for this white paper is a SharePoint expert with a working knowledge of each of the
following areas:

Basic HTML knowledge


Basic CSS knowledge
Basic JavaScript programming

2013 Microsoft Corporation. All rights reserved.


Page 3 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.

How to build a social media-sharing site in SharePoint 2013

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.

2013 Microsoft Corporation. All rights reserved.


Page 4 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.

How to build a social media-sharing site in SharePoint 2013

February 2013

Figure 1. ContosoTube Home Page

Permission-level
Permission-level required: Site collection administrator

2013 Microsoft Corporation. All rights reserved.


Page 5 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.

How to build a social media-sharing site in SharePoint 2013

February 2013

Setting up the Content Structure


All of the guidance covered in this white paper presumes the following content structure, which can be
created trivially using either SharePoint Designer or the SharePoint browser user interface.
Site Template
The recommended site template to use for creating the Social Media site is the publishing site template. Using
this template will automatically activate the features listed below. If you choose to use a different template,
then you may need to manually activate the following features.
Features Activated
1. Site Collection features
o SharePoint Server Publishing Infrastructure
o Ratings
2. Site features
o SharePoint Server Publishing
3. Video and rich media

Lists and Library


The videos that we use in the site are stored in a library called Videos. Videos can be uploaded to any library,
but you can get the most out of SharePoint 2013 if you upload videos to a library that has the video content
type enabled. The Asset Library is customized for storing digital assets and is recommended to be used. If you
do not use an Asset Library, the video content type needs to be manually added.
How to configure an asset library
1.
2.
3.
4.

Navigate to the Site Contents


Select Add an app
Select Asset Library from the list of apps
Give your library a unique name (Videos will be the name used in this paper)

Note: It is recommended to upload videos to the library after configuring the channel column in project
#2.

2013 Microsoft Corporation. All rights reserved.


Page 6 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.

How to build a social media-sharing site in SharePoint 2013

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.

Step #1: Creating and customizing the master page


The first step is to create a minimal master page which can be customized later according to the site design.
Navigate to the Design Manager under the site settings and map your network drive to edit your master pages
using any HTML editor. Create a minimal master page and preview it. Next, add the required snippets to the
master page from the snippet gallery. The location to paste these snippets depends on where you want them
to appear in your master page.
Adding the search box snippet
A search box on the home page helps users find videos on the site. Insert a search box snippet from the
snippet gallery after configuring the search settings. Navigate to the search settings from the Design Manager,
and add the search center URL. Update the search snippet and copy the HTML snippet to paste it inside <div
id="s4-bodyContainer"> in the MasterPage.HTML file. Use CSS to position the search box.
Adding the vertical navigation
The vertical navigation is required to navigate between different channels from the pages on the site.
Creating the term set
1. Navigate to the Term Store Management Tool from the Site Settings.
2. Create a new group called ContosoTube.
3. Create a new term set called Channels and configure the term set as follows:
a. Under the general tab, choose the submission policy as Closed.
b. Under intended use, select Available for Tagging, and Use this Term Set for Site Navigation and Save
your changes. This means that these channels are available for tagging for users to tag their videos with
the relevant channel, and this term set can be used for the site navigation.
c. Under custom sort, choose Use default sort order.
d. Under term-driven pages, under Target Page Settings, browse to your pages library and select
Topics.aspx as the channels roll-up page. What this essentially means is that all the channels pages are
instances of one single page called Topics.aspx- each displaying the content they are tagged with.
Note: You will have to create a page called Topics in the pages library prior to this step.
4. Create new terms (such as Marketing, HR, Engineering, Research) in this term set.
2013 Microsoft Corporation. All rights reserved.
Page 7 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.

How to build a social media-sharing site in SharePoint 2013

February 2013

Configuring the navigation settings


1.
2.
3.
4.
5.

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:

Figure 2. Master Page Preview from the Design Manager

Step #2: Creating the Page Layout


Page layouts define the look and feel of a set of pages by styling page fields and Web Part zones within the
common elements of a master page. The network drive mapped earlier can be used to edit the page layouts
using any HTML editor. Create a page layout that the home page of the site will use. Note that the default
page layout that you create will contain certain snippets that are not required. You may keep or remove them
according to your site design.
Adding Web Part zone snippet for the media Web Part
The home page of ContosoTube contains a media Web Part and three Content Search Web Parts. The Web
Part zone snippets create a placeholder for these Web Parts to be positioned correctly in the home page.
Choose a Web Part zone snippet from the snippet gallery and copy the HTML snippet and paste it inside the
PlaceHolderMain. The snippet code will look as follows:
2013 Microsoft Corporation. All rights reserved.
Page 8 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.

How to build a social media-sharing site in SharePoint 2013

February 2013

<!--CS: Start Web Part Zone Snippet-->


<!--SPM:<%@Register Tagprefix="WebPartPages"
Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint,
Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<div xmlns:ie="ie">
<!--MS:<WebPartPages:WebPartZone runat="server" AllowPersonalization="false"
ID="x337a5a8d939248d49e9c39d87693bef0" FrameType="TitleBarOnly"
Orientation="Vertical">-->
<!--MS:<ZoneTemplate>-->
<!--DC: Replace this comment with default web parts for new pages. ->
<!--ME:</ZoneTemplate>-->
<!--ME:</WebPartPages:WebPartZone>-->
</div>
<!--CE: End Web Part Zone Snippet-->

Adding actions for users to interact


Users can interact with the site by performing basic actions such as create channel, upload videos, browse
videos, and read the about (help) page. The code for these actions is inserted in the page layout that has been
created.
Adding Create Channels
We redirect this action to the Create_Publishing_Page.aspx as the channel pages are essentially publishing
pages where the videos are surfaced using the Content Search Web Part. Add the following code after the first
Web Part zone snippet that you added for the media Web Part.
<div>
<a href="javascript:{}
onclick="OpenPopUpPage('https://contoso.com/_layouts/15/CreatePublishingPageDialo
g.aspx', RefreshPage);"> /* Use a similar URL corresponding to your Publishing
site */ </a>
<span> Create </span>
<img class="icon" src="createicon.png" /> /*Use an image to represent this
action*/
</div>

Adding Upload Videos


The videos must be uploaded to the Videos Asset Library which was created earlier. SharePoint 2013 considers
video as a content type as opposed to a file, and a video set is created for the video. Thus, the upload action is
redirected to the NewVideoSet.aspx page, which is the upload dialog that you get while uploading a video
from the ribbon in the asset library.
<div>
2013 Microsoft Corporation. All rights reserved.
Page 9 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.

How to build a social media-sharing site in SharePoint 2013

February 2013

<a href="https://contoso.com/_layouts/15/NewVideoSet.aspx> /* Use the URL of the


upload dialog from the ribbon for your videos asset library */ </a>
<span> Upload </span>
<img class="icon" src="upload.png"/> /* Use an image to represent this
action */
</div>

Adding Browse Videos


The browse action lets users browse all the videos from the video asset library. Thus, this action directs the
users to the location of the asset library.
<div>
<a href="https://contoso.com/videos"> /* Use the URL of the videos asset library
*/ </a>
<span> Browse </span>
<img class="icon" src="browse.png" /> /* Use an image to
represent this action */
</div>

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:

2013 Microsoft Corporation. All rights reserved.


Page 10 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.

How to build a social media-sharing site in SharePoint 2013

February 2013

Figure 3. Page Layout preview from the Design Manager

Project #2. Linking videos and channels: how tagging works


There needs to be some property that links videos in the videos asset library to the terms (or user-createdchannels) in the term store manager. Channels are essentially publishing pages with friendly URLs. Each page
is associated with a Managed Metadata term (which is the user-given-name of that channel) that can then be
used to tag videos that are part of that channel. To enable this, a new column needs to be created from the
library setting. To create a new column:
1. Navigate to videos asset library.
2. Choose library settings from the ribbon.
3. Choose Create Column under columns, and fill in the following metadata for this column.

Name and Type:


a. Column Name: Channels (Users see in the video edit property dialog).
b. Type: Managed Metadata (as this needs to be linked to the term set created in the term store management
tool).

Additional Column Settings:


c. Description: Choose the channel under which you want your video to be displayed.
d. Require that this column contains information: Yes (so that we have enough data to display under each
channel).
Note: If the value is set to Yes after videos have been uploaded to the library, then this value must be set
to No until this column information is filled out for existing videos.
e. Enforce Unique Values: No (A video can be displayed in more than one channel).
2013 Microsoft Corporation. All rights reserved.
Page 11 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.

How to build a social media-sharing site in SharePoint 2013

February 2013

f. Add to all content types: Enable


g. Add to default view : Enable

Multiple Value Field:


h. Allow multiple values: Enable

Display Value Field:


i.

Choose Display term label in the field.

Term Set Settings:


j.

Choose Use a managed term set.


Find the term set Channels that we created in project #1, step #1.

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.

2013 Microsoft Corporation. All rights reserved.


Page 12 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.

How to build a social media-sharing site in SharePoint 2013

February 2013

Figure 4. Video edit property dialog displaying the channel terms to tag the video

Project #3. Customizing the home page


After creating and customizing the master page and page layouts, the next step is customizing the home page
of the site. The default.aspx page present in your pages library is used as the home page of ContosoTube. The
home page contains the featured video (which can be chosen based on several criteria such as most popular
video, most viewed video, etc.), three Content Search Web Parts displaying the most popular videos, most
recent videos, and my uploads (specific to every user). These are included as Web Parts in the Home Page. Edit
the default.aspx page and apply the page layout that was created earlier for this page.

Step #1: Adding the Media Web Part


Insert a Media Web Part from the Media and Content drop drown in the ribbon. The Media Web Part is
positioned correctly as a placeholder area was already provisioned earlier in the page layout.
Setting a featured video
The featured video can be set based on a variety of criteria. For ContosoTube, we use the Most Popular video
as the featured video.
2013 Microsoft Corporation. All rights reserved.
Page 13 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.

How to build a social media-sharing site in SharePoint 2013

1.
2.
3.
4.
5.

February 2013

Choose Edit Page from the ribbon.


Click on the Media Web Part that is inserted and choose Edit Web Part.
Select the Media tab from the ribbon.
Select the featured video from the videos asset library.
A different preview image for the featured video can be added from the Change Image option.

Figure 5. Home Page with the Media Web Part

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.

How to build a social media-sharing site in SharePoint 2013

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.

How to build a social media-sharing site in SharePoint 2013

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.

How to build a social media-sharing site in SharePoint 2013

February 2013

<div class="ContentSearch-ContosoPictureImageContainer" id="_#=


pictureContainerId =#_">
<a class="ContentSearch-pictureImgLink" href="_#= linkURL =#_"
title="_#= line1 =#_" id="_#= pictureLinkId =#_">
_#= pictureMarkup =#_
</a>
</div>
<div class="ContentSearch-ContosoPictureDataOverlay" id="_#=
dataContainerOverlayId =#_"></div>
<div class="ContentSearch-ContosoPictureDataContainer" id="_#=
dataContainerId =#_">
<a class="ContentSearch-ContosoPictureLine1Link" href="_#=
linkURL =#_" title="_#= line1 =#_" id="_#= line1LinkId =#_">
<h3 class="ContentSearch-ContosoPictureLine1 ms-noWrap"
id="_#= line1Id =#_"> _#= line1 =#_</h3>
</a>
</div>
</div>
</div>

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.

How to build a social media-sharing site in SharePoint 2013

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

Figure 6. Most Popular Content Search Web Part returning results


Most Recent
Steps 1,2, and 4 are same as above.
For step 3:
Sort By: Views Recent
Descending
My Uploads
The query for this Content Search Web Part is a bit different as it needs to only display videos that were
uploaded by a specific user. You should specify the path to your videos asset library, and the video content
type ID corresponding to your site.
For step 2:
2013 Microsoft Corporation. All rights reserved.
Page 18 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.

How to build a social media-sharing site in SharePoint 2013

February 2013

author:{User.Name} (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))

Step 3:
Sort By: Last Modified Time
Descending

Project #4. Customizing the channels page


As channels are publishing pages, the videos tagged with a specific channel term are surfaced using a Content
Search Web Part. The Content Search Web Part queries the video library to roll up video results that match the
name of the channel. This configuration needs to apply to all the channels pages, meaning it needs to apply
dynamically to the new channel pages that ContosoTube users create. If you recall, channel pages are all
instances of one page (topics.aspx) that was created in the pages library. Hence, we create a new page layout
that can be applied to topics.aspx.

Creating a page layout


Insert a Web Part Zone snippet from the snippets gallery in the page layout similar to Project #1, step #2.
Publish the page layout as a major version in the Design Manager and apply this as the page layout for
topics.aspx. The Web Part Zone snippet acts the placeholder for the Content Search Web Part.

Configuring the Content Search Web Part


Edit topics.aspx and insert a Content Search Web Part from the Dynamic Content drop drown from the ribbon.
The Content Search Web Part can be configured as follows:
1. Click change query in the Content Search dialog box. This opens the query builder.
2. In Quick Mode, configure the query as follows:
a. Select a query: Local Video Results (System)
b. Restrict by app: Current site collection (or you can also specify a URL to the videos library)
c. Restrict by tag: Restrict by navigation term of current page

The query will look similar to the following in the advanced mode:

2013 Microsoft Corporation. All rights reserved.


Page 19 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.

How to build a social media-sharing site in SharePoint 2013

February 2013

path:"https://contoso.com/videos" owstaxIdMetadataAllTagsInfo:{Term} (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))
To display the most recent videos on the first page of the channel, switch to the Sorting tab in the query builder,
and choose:
Sort By: Last Modified Time
Descending
d. 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: 20
Under display templates:
Control: List with paging (this is an out-of-the-box control display template)
Item: Choose the one created earlier in Project #1.
Under Settings:
Result Table: Relevant Results
Under appearance:
Enter the title for this Web Part: Videos in this channel
Set the height and width to fit zone.
Choose the chrome state to normal.
Chrome type: None

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.

2013 Microsoft Corporation. All rights reserved.


Page 20 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.

How to build a social media-sharing site in SharePoint 2013

February 2013

Figure 7. Engineering channel page displaying videos tagged with the term engineering

Project # 5. Customizing the video player page


SharePoint 2013 has an individual video player page for every video in the asset library. ContosoTube uses all
the out-of-the-box features in the video player page such as related items, tagging people, ratings, etc. One
additional customization we add to the video player page is the Recommendations Web Part.
Recommendations are a great way to increase usage, and suggest new content to your users.

Configuring the Recommendations Web Part


No custom code is required to configure recommendations for ContosoTube. Insert the Recommendations
Web Part as follows: Edit video player page -> Insert -> Web Part -> Search-Driven-Content -> Recommended
Items.

2013 Microsoft Corporation. All rights reserved.


Page 21 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.

How to build a social media-sharing site in SharePoint 2013

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.

Edit the Recommendations Web Part.


Open the query builder by selecting Change query.
Choose Specify a URL under Get recommended items for.
Specify the URL as https://contoso.com{\QueryString.RecSrc} where the {\QueryString.RecSrc} means that the
RecSrc argument should be fetched from the URL of the page. Hence, the query is built dynamically for the page
the Web Part is on. It is prefixed with https://contoso.com to build a full URL because the RecSrc argument does
not contain the full URL on ContosoTube. The URL can be passed in other ways as well.
5. Restrict by app: current site

The results users see are People who looked at this video, also looked at the following videos.

2013 Microsoft Corporation. All rights reserved.


Page 22 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.

How to build a social media-sharing site in SharePoint 2013

February 2013

Figure 8. Video player page displaying recommended videos

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.

2013 Microsoft Corporation. All rights reserved.


Page 23 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.

You might also like