SlideShare une entreprise Scribd logo
1  sur  23
Télécharger pour lire hors ligne
How to build a social media
sharing 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 sitein SharePoint 2013                                                      February 2013




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

Project overview ....................................................................................................................4
         Permission-level                                                                                                                 5
         Setting up the Content Structure                                                                                                 6
         Lists and Library                                                                                                                6

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

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 sitein 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 it’s 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 moral 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 non-functional
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. The product team is working on
enabling it in the future. 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 sitein 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 sitein 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 sitein 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.   Navigate to the Site Contents
    2.   Select Add an app
    3.   Select Asset Library from the list of apps
    4.   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 sitein 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 sitein SharePoint 2013                                    February 2013




Configuring the navigation settings
    1.   Choose the navigation snippet from the snippet gallery, and configure it from the navigation settings.
    2.   Choose Managed Navigation as the Current Navigation.
    3.   Choose the term set you created to use for navigation.
    4.   Enable adding new pages to navigation automatically, and creating friendly URLs for new pages automatically.
    5.   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 sitein 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 sitein 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 sitein 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-created-
channels) 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 sitein 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 sitein 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 sitein SharePoint 2013                                    February 2013



    1.   Choose Edit Page from the ribbon.
    2.   Click on the Media Web Part that is inserted and choose Edit Web Part.
    3.   Select the Media tab from the ribbon.
    4.   Select the featured video from the videos asset library.
    5.   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 sitein 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 sitein 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="ContentSearch-
ContosoPictureDataContainer"> 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 sitein 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 sitein 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 sitein 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 sitein 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 sitein 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 sitein 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-b3d6-
adc85a977241&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. Edit the Recommendations Web Part.
    2. Open the query builder by selecting Change query.
    3. Choose Specify a URL under Get recommended items for.
    4. 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 sitein 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.

Contenu connexe

Tendances

10 Best SharePoint Features You’ve Never Used (But Should)
10 Best SharePoint Features You’ve Never Used (But Should)10 Best SharePoint Features You’ve Never Used (But Should)
10 Best SharePoint Features You’ve Never Used (But Should)Christian Buckley
 
Introduction to SharePoint 2013
Introduction to SharePoint 2013Introduction to SharePoint 2013
Introduction to SharePoint 2013Shahbaz Ahmer
 
Tips and Tricks for the Yammer Power User presented by Christian Buckley
Tips and Tricks for the Yammer Power User presented by Christian BuckleyTips and Tricks for the Yammer Power User presented by Christian Buckley
Tips and Tricks for the Yammer Power User presented by Christian BuckleyEuropean SharePoint Conference
 
20 M365 Productivity Tips That You've Probably Never Used (But Should)
20 M365 Productivity Tips That You've Probably Never Used (But Should)20 M365 Productivity Tips That You've Probably Never Used (But Should)
20 M365 Productivity Tips That You've Probably Never Used (But Should)Christian Buckley
 
Benefits of SharePoint 2013 over SharePoint 2010
Benefits of SharePoint 2013 over SharePoint 2010Benefits of SharePoint 2013 over SharePoint 2010
Benefits of SharePoint 2013 over SharePoint 2010Anup Venu
 
Ahg microsoft stream_insight_queries
Ahg microsoft stream_insight_queriesAhg microsoft stream_insight_queries
Ahg microsoft stream_insight_queriesSteve Xu
 
Everything you need to know to create a modern Intranet/Digital Employee Expe...
Everything you need to know to create a modern Intranet/Digital Employee Expe...Everything you need to know to create a modern Intranet/Digital Employee Expe...
Everything you need to know to create a modern Intranet/Digital Employee Expe...Thomas Maeder
 
SharePoint Governance Planning - Microsoft
SharePoint Governance Planning - MicrosoftSharePoint Governance Planning - Microsoft
SharePoint Governance Planning - MicrosoftCheryl McKinnon
 
The Ultimate guide to Enterprise Social Technologies
The Ultimate guide to Enterprise Social TechnologiesThe Ultimate guide to Enterprise Social Technologies
The Ultimate guide to Enterprise Social TechnologiesKINSHIP enterprise
 
High-level Guide: Upgrading to SharePoint 2013
High-level Guide: Upgrading to SharePoint 2013High-level Guide: Upgrading to SharePoint 2013
High-level Guide: Upgrading to SharePoint 2013C5 Insight
 
Why Is SharePoint Still So Hard? by Michal Pisarek - SPTechCon
Why Is SharePoint Still So Hard? by Michal Pisarek - SPTechConWhy Is SharePoint Still So Hard? by Michal Pisarek - SPTechCon
Why Is SharePoint Still So Hard? by Michal Pisarek - SPTechConSPTechCon
 
SharePoint - You've got it, now what?
SharePoint - You've got it, now what?SharePoint - You've got it, now what?
SharePoint - You've got it, now what?Robert Crane
 
SharePoint Opportunities
SharePoint OpportunitiesSharePoint Opportunities
SharePoint OpportunitiesRobert Crane
 
Managing metadata in_share_point_2010
Managing metadata in_share_point_2010Managing metadata in_share_point_2010
Managing metadata in_share_point_2010LiquidHub
 
Hilo cppxaml
Hilo cppxamlHilo cppxaml
Hilo cppxamlSteve Xu
 
Deployment guide-for-share point-2013
Deployment guide-for-share point-2013Deployment guide-for-share point-2013
Deployment guide-for-share point-2013prconcepcion
 
Taking SharePoint beyond the default
Taking SharePoint beyond the defaultTaking SharePoint beyond the default
Taking SharePoint beyond the defaultRobert Crane
 
Sharpen SharePoint Adoption in SharePoint 2013 with Gamification
Sharpen SharePoint Adoption in SharePoint 2013 with GamificationSharpen SharePoint Adoption in SharePoint 2013 with Gamification
Sharpen SharePoint Adoption in SharePoint 2013 with GamificationJoel Oleson
 
Introduction to Attini Social Suite for SharePoint - by Rapid Circle
Introduction to Attini Social Suite for SharePoint - by Rapid CircleIntroduction to Attini Social Suite for SharePoint - by Rapid Circle
Introduction to Attini Social Suite for SharePoint - by Rapid CircleWilco Turnhout
 
Don’t let your training fall off of a cliff
Don’t let your training fall off of a cliffDon’t let your training fall off of a cliff
Don’t let your training fall off of a cliffSYMBIONT, INC.
 

Tendances (20)

10 Best SharePoint Features You’ve Never Used (But Should)
10 Best SharePoint Features You’ve Never Used (But Should)10 Best SharePoint Features You’ve Never Used (But Should)
10 Best SharePoint Features You’ve Never Used (But Should)
 
Introduction to SharePoint 2013
Introduction to SharePoint 2013Introduction to SharePoint 2013
Introduction to SharePoint 2013
 
Tips and Tricks for the Yammer Power User presented by Christian Buckley
Tips and Tricks for the Yammer Power User presented by Christian BuckleyTips and Tricks for the Yammer Power User presented by Christian Buckley
Tips and Tricks for the Yammer Power User presented by Christian Buckley
 
20 M365 Productivity Tips That You've Probably Never Used (But Should)
20 M365 Productivity Tips That You've Probably Never Used (But Should)20 M365 Productivity Tips That You've Probably Never Used (But Should)
20 M365 Productivity Tips That You've Probably Never Used (But Should)
 
Benefits of SharePoint 2013 over SharePoint 2010
Benefits of SharePoint 2013 over SharePoint 2010Benefits of SharePoint 2013 over SharePoint 2010
Benefits of SharePoint 2013 over SharePoint 2010
 
Ahg microsoft stream_insight_queries
Ahg microsoft stream_insight_queriesAhg microsoft stream_insight_queries
Ahg microsoft stream_insight_queries
 
Everything you need to know to create a modern Intranet/Digital Employee Expe...
Everything you need to know to create a modern Intranet/Digital Employee Expe...Everything you need to know to create a modern Intranet/Digital Employee Expe...
Everything you need to know to create a modern Intranet/Digital Employee Expe...
 
SharePoint Governance Planning - Microsoft
SharePoint Governance Planning - MicrosoftSharePoint Governance Planning - Microsoft
SharePoint Governance Planning - Microsoft
 
The Ultimate guide to Enterprise Social Technologies
The Ultimate guide to Enterprise Social TechnologiesThe Ultimate guide to Enterprise Social Technologies
The Ultimate guide to Enterprise Social Technologies
 
High-level Guide: Upgrading to SharePoint 2013
High-level Guide: Upgrading to SharePoint 2013High-level Guide: Upgrading to SharePoint 2013
High-level Guide: Upgrading to SharePoint 2013
 
Why Is SharePoint Still So Hard? by Michal Pisarek - SPTechCon
Why Is SharePoint Still So Hard? by Michal Pisarek - SPTechConWhy Is SharePoint Still So Hard? by Michal Pisarek - SPTechCon
Why Is SharePoint Still So Hard? by Michal Pisarek - SPTechCon
 
SharePoint - You've got it, now what?
SharePoint - You've got it, now what?SharePoint - You've got it, now what?
SharePoint - You've got it, now what?
 
SharePoint Opportunities
SharePoint OpportunitiesSharePoint Opportunities
SharePoint Opportunities
 
Managing metadata in_share_point_2010
Managing metadata in_share_point_2010Managing metadata in_share_point_2010
Managing metadata in_share_point_2010
 
Hilo cppxaml
Hilo cppxamlHilo cppxaml
Hilo cppxaml
 
Deployment guide-for-share point-2013
Deployment guide-for-share point-2013Deployment guide-for-share point-2013
Deployment guide-for-share point-2013
 
Taking SharePoint beyond the default
Taking SharePoint beyond the defaultTaking SharePoint beyond the default
Taking SharePoint beyond the default
 
Sharpen SharePoint Adoption in SharePoint 2013 with Gamification
Sharpen SharePoint Adoption in SharePoint 2013 with GamificationSharpen SharePoint Adoption in SharePoint 2013 with Gamification
Sharpen SharePoint Adoption in SharePoint 2013 with Gamification
 
Introduction to Attini Social Suite for SharePoint - by Rapid Circle
Introduction to Attini Social Suite for SharePoint - by Rapid CircleIntroduction to Attini Social Suite for SharePoint - by Rapid Circle
Introduction to Attini Social Suite for SharePoint - by Rapid Circle
 
Don’t let your training fall off of a cliff
Don’t let your training fall off of a cliffDon’t let your training fall off of a cliff
Don’t let your training fall off of a cliff
 

Similaire à How to-build-a-social-media-sharing-site-in-share point-2013

Manager's guidebook on intranet redesign projects
Manager's guidebook on intranet redesign projectsManager's guidebook on intranet redesign projects
Manager's guidebook on intranet redesign projectsPebbleRoad
 
Tushar Mahapatra - Portfolio for SharePoint projects
Tushar Mahapatra - Portfolio for SharePoint projectsTushar Mahapatra - Portfolio for SharePoint projects
Tushar Mahapatra - Portfolio for SharePoint projectsTushar Mahapatra
 
Brightwork Project Management Introductory Guide - From Atidan
Brightwork Project Management Introductory Guide - From AtidanBrightwork Project Management Introductory Guide - From Atidan
Brightwork Project Management Introductory Guide - From AtidanDavid J Rosenthal
 
Working on Tasks in Microsoft Project Web Access
Working on Tasks in Microsoft Project Web AccessWorking on Tasks in Microsoft Project Web Access
Working on Tasks in Microsoft Project Web AccessDavid J Rosenthal
 
Deployment guide for share point 2013
Deployment guide for share point 2013Deployment guide for share point 2013
Deployment guide for share point 2013Vinh Nguyen
 
Deployment guide-for-share point-2013
Deployment guide-for-share point-2013Deployment guide-for-share point-2013
Deployment guide-for-share point-2013Steve Xu
 
Deployment guide for Microsoft SharePoint 2013
Deployment guide for Microsoft SharePoint 2013Deployment guide for Microsoft SharePoint 2013
Deployment guide for Microsoft SharePoint 2013Vinh Nguyen
 
Deployment guide-for-share point-2013
Deployment guide-for-share point-2013Deployment guide-for-share point-2013
Deployment guide-for-share point-2013Heo Gòm
 
How to build a Project Hub with Hubsites and Sitedesign and Sitescripts
How to build a Project Hub with Hubsites and Sitedesign and Sitescripts How to build a Project Hub with Hubsites and Sitedesign and Sitescripts
How to build a Project Hub with Hubsites and Sitedesign and Sitescripts Knut Relbe-Moe [MVP, MCT]
 
SharePoint 2013 Site Administration Guide
SharePoint 2013 Site Administration GuideSharePoint 2013 Site Administration Guide
SharePoint 2013 Site Administration GuideLearning SharePoint
 
Seo Sample Site Analysis Doc
Seo Sample Site Analysis DocSeo Sample Site Analysis Doc
Seo Sample Site Analysis DocAnuradha
 
Ps training mannual power users
Ps training mannual   power usersPs training mannual   power users
Ps training mannual power usersSoumya De
 
Basic powershell scripts
Basic powershell scriptsBasic powershell scripts
Basic powershell scriptsMOHD TAHIR
 
Proposal for development of Music Distribution Website proposal
Proposal for development of Music Distribution Website proposalProposal for development of Music Distribution Website proposal
Proposal for development of Music Distribution Website proposalMakeNET
 
Just Enough Web Design.doc.doc
Just Enough Web Design.doc.docJust Enough Web Design.doc.doc
Just Enough Web Design.doc.docbutest
 
Content Management Training
Content Management TrainingContent Management Training
Content Management Trainingguestb3bf88
 
Content Management Training
Content Management TrainingContent Management Training
Content Management TrainingNuno Nunes
 

Similaire à How to-build-a-social-media-sharing-site-in-share point-2013 (20)

Spo dev guide
Spo dev guideSpo dev guide
Spo dev guide
 
Manager's guidebook on intranet redesign projects
Manager's guidebook on intranet redesign projectsManager's guidebook on intranet redesign projects
Manager's guidebook on intranet redesign projects
 
Tushar Mahapatra - Portfolio for SharePoint projects
Tushar Mahapatra - Portfolio for SharePoint projectsTushar Mahapatra - Portfolio for SharePoint projects
Tushar Mahapatra - Portfolio for SharePoint projects
 
Brightwork Project Management Introductory Guide - From Atidan
Brightwork Project Management Introductory Guide - From AtidanBrightwork Project Management Introductory Guide - From Atidan
Brightwork Project Management Introductory Guide - From Atidan
 
Working on Tasks in Microsoft Project Web Access
Working on Tasks in Microsoft Project Web AccessWorking on Tasks in Microsoft Project Web Access
Working on Tasks in Microsoft Project Web Access
 
Deployment guide for share point 2013
Deployment guide for share point 2013Deployment guide for share point 2013
Deployment guide for share point 2013
 
Deployment guide-for-share point-2013
Deployment guide-for-share point-2013Deployment guide-for-share point-2013
Deployment guide-for-share point-2013
 
Deployment guide for Microsoft SharePoint 2013
Deployment guide for Microsoft SharePoint 2013Deployment guide for Microsoft SharePoint 2013
Deployment guide for Microsoft SharePoint 2013
 
Deployment guide-for-share point-2013
Deployment guide-for-share point-2013Deployment guide-for-share point-2013
Deployment guide-for-share point-2013
 
How to build a Project Hub with Hubsites and Sitedesign and Sitescripts
How to build a Project Hub with Hubsites and Sitedesign and Sitescripts How to build a Project Hub with Hubsites and Sitedesign and Sitescripts
How to build a Project Hub with Hubsites and Sitedesign and Sitescripts
 
SharePoint 2013 Site Administration Guide
SharePoint 2013 Site Administration GuideSharePoint 2013 Site Administration Guide
SharePoint 2013 Site Administration Guide
 
Web Programming Assignment
Web Programming AssignmentWeb Programming Assignment
Web Programming Assignment
 
Seo Sample Site Analysis Doc
Seo Sample Site Analysis DocSeo Sample Site Analysis Doc
Seo Sample Site Analysis Doc
 
Ps training mannual power users
Ps training mannual   power usersPs training mannual   power users
Ps training mannual power users
 
Basic powershell scripts
Basic powershell scriptsBasic powershell scripts
Basic powershell scripts
 
Proposal for development of Music Distribution Website proposal
Proposal for development of Music Distribution Website proposalProposal for development of Music Distribution Website proposal
Proposal for development of Music Distribution Website proposal
 
Just Enough Web Design.doc.doc
Just Enough Web Design.doc.docJust Enough Web Design.doc.doc
Just Enough Web Design.doc.doc
 
Content Management Training
Content Management TrainingContent Management Training
Content Management Training
 
Content Management Training
Content Management TrainingContent Management Training
Content Management Training
 
Workshop Report
Workshop ReportWorkshop Report
Workshop Report
 

Plus de David J Rosenthal

Microsoft Teams Phone - Calling Made Simple
Microsoft Teams Phone  - Calling Made SimpleMicrosoft Teams Phone  - Calling Made Simple
Microsoft Teams Phone - Calling Made SimpleDavid J Rosenthal
 
Whats New in Microsoft Teams Calling November 2021
Whats New in Microsoft Teams Calling November 2021Whats New in Microsoft Teams Calling November 2021
Whats New in Microsoft Teams Calling November 2021David J Rosenthal
 
Viva Connections from Microsoft
Viva Connections from MicrosoftViva Connections from Microsoft
Viva Connections from MicrosoftDavid J Rosenthal
 
Protect your hybrid workforce across the attack chain
Protect your hybrid workforce across the attack chainProtect your hybrid workforce across the attack chain
Protect your hybrid workforce across the attack chainDavid J Rosenthal
 
A Secure Journey to Cloud with Microsoft 365
A Secure Journey to Cloud with Microsoft 365A Secure Journey to Cloud with Microsoft 365
A Secure Journey to Cloud with Microsoft 365David J Rosenthal
 
Azure Arc Overview from Microsoft
Azure Arc Overview from MicrosoftAzure Arc Overview from Microsoft
Azure Arc Overview from MicrosoftDavid J Rosenthal
 
Microsoft Windows Server 2022 Overview
Microsoft Windows Server 2022 OverviewMicrosoft Windows Server 2022 Overview
Microsoft Windows Server 2022 OverviewDavid J Rosenthal
 
Windows365 Hybrid Windows for a Hybrid World
Windows365 Hybrid Windows for a Hybrid WorldWindows365 Hybrid Windows for a Hybrid World
Windows365 Hybrid Windows for a Hybrid WorldDavid J Rosenthal
 
Windows 11 for the Enterprise
Windows 11 for the EnterpriseWindows 11 for the Enterprise
Windows 11 for the EnterpriseDavid J Rosenthal
 
Microsoft Scheduler for M365 - Personal Digital Assistant
Microsoft Scheduler for M365 - Personal Digital AssistantMicrosoft Scheduler for M365 - Personal Digital Assistant
Microsoft Scheduler for M365 - Personal Digital AssistantDavid J Rosenthal
 
What is New in Teams Meetings and Meeting Rooms July 2021
What is New in Teams Meetings and Meeting Rooms July 2021What is New in Teams Meetings and Meeting Rooms July 2021
What is New in Teams Meetings and Meeting Rooms July 2021David J Rosenthal
 
Modernize Java Apps on Microsoft Azure
Modernize Java Apps on Microsoft AzureModernize Java Apps on Microsoft Azure
Modernize Java Apps on Microsoft AzureDavid J Rosenthal
 
Microsoft Defender and Azure Sentinel
Microsoft Defender and Azure SentinelMicrosoft Defender and Azure Sentinel
Microsoft Defender and Azure SentinelDavid J Rosenthal
 
Microsoft Azure Active Directory
Microsoft Azure Active DirectoryMicrosoft Azure Active Directory
Microsoft Azure Active DirectoryDavid J Rosenthal
 
Better Meetings with Microsoft Teams
Better Meetings with Microsoft TeamsBetter Meetings with Microsoft Teams
Better Meetings with Microsoft TeamsDavid J Rosenthal
 

Plus de David J Rosenthal (20)

Microsoft Teams Phone - Calling Made Simple
Microsoft Teams Phone  - Calling Made SimpleMicrosoft Teams Phone  - Calling Made Simple
Microsoft Teams Phone - Calling Made Simple
 
Whats New in Microsoft Teams Calling November 2021
Whats New in Microsoft Teams Calling November 2021Whats New in Microsoft Teams Calling November 2021
Whats New in Microsoft Teams Calling November 2021
 
Viva Connections from Microsoft
Viva Connections from MicrosoftViva Connections from Microsoft
Viva Connections from Microsoft
 
Protect your hybrid workforce across the attack chain
Protect your hybrid workforce across the attack chainProtect your hybrid workforce across the attack chain
Protect your hybrid workforce across the attack chain
 
Microsoft Viva Introduction
Microsoft Viva IntroductionMicrosoft Viva Introduction
Microsoft Viva Introduction
 
Microsoft Viva Learning
Microsoft Viva LearningMicrosoft Viva Learning
Microsoft Viva Learning
 
Microsoft Viva Topics
Microsoft Viva TopicsMicrosoft Viva Topics
Microsoft Viva Topics
 
A Secure Journey to Cloud with Microsoft 365
A Secure Journey to Cloud with Microsoft 365A Secure Journey to Cloud with Microsoft 365
A Secure Journey to Cloud with Microsoft 365
 
Azure Arc Overview from Microsoft
Azure Arc Overview from MicrosoftAzure Arc Overview from Microsoft
Azure Arc Overview from Microsoft
 
Microsoft Windows Server 2022 Overview
Microsoft Windows Server 2022 OverviewMicrosoft Windows Server 2022 Overview
Microsoft Windows Server 2022 Overview
 
Windows365 Hybrid Windows for a Hybrid World
Windows365 Hybrid Windows for a Hybrid WorldWindows365 Hybrid Windows for a Hybrid World
Windows365 Hybrid Windows for a Hybrid World
 
Windows 11 for the Enterprise
Windows 11 for the EnterpriseWindows 11 for the Enterprise
Windows 11 for the Enterprise
 
Microsoft Scheduler for M365 - Personal Digital Assistant
Microsoft Scheduler for M365 - Personal Digital AssistantMicrosoft Scheduler for M365 - Personal Digital Assistant
Microsoft Scheduler for M365 - Personal Digital Assistant
 
What is New in Teams Meetings and Meeting Rooms July 2021
What is New in Teams Meetings and Meeting Rooms July 2021What is New in Teams Meetings and Meeting Rooms July 2021
What is New in Teams Meetings and Meeting Rooms July 2021
 
Modernize Java Apps on Microsoft Azure
Modernize Java Apps on Microsoft AzureModernize Java Apps on Microsoft Azure
Modernize Java Apps on Microsoft Azure
 
Microsoft Defender and Azure Sentinel
Microsoft Defender and Azure SentinelMicrosoft Defender and Azure Sentinel
Microsoft Defender and Azure Sentinel
 
Microsoft Azure Active Directory
Microsoft Azure Active DirectoryMicrosoft Azure Active Directory
Microsoft Azure Active Directory
 
Nintex Worflow Overview
Nintex Worflow OverviewNintex Worflow Overview
Nintex Worflow Overview
 
Microsoft Power BI Overview
Microsoft Power BI OverviewMicrosoft Power BI Overview
Microsoft Power BI Overview
 
Better Meetings with Microsoft Teams
Better Meetings with Microsoft TeamsBetter Meetings with Microsoft Teams
Better Meetings with Microsoft Teams
 

Dernier

Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Juan Carlos Gonzalez
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimization100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimizationarrow10202532yuvraj
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"DianaGray10
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdfPaige Cruz
 
UiPath Studio Web workshop series - Day 5
UiPath Studio Web workshop series - Day 5UiPath Studio Web workshop series - Day 5
UiPath Studio Web workshop series - Day 5DianaGray10
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...Daniel Zivkovic
 

Dernier (20)

Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimization100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimization
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdf
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
UiPath Studio Web workshop series - Day 5
UiPath Studio Web workshop series - Day 5UiPath Studio Web workshop series - Day 5
UiPath Studio Web workshop series - Day 5
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
 

How to-build-a-social-media-sharing-site-in-share point-2013

  • 1. How to build a social media sharing 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.
  • 2. How to build a social media sharing sitein SharePoint 2013 February 2013 Contents Introduction .............................................................................................................................3 Note about host-ability 3 Target Audience 3 Project overview ....................................................................................................................4 Permission-level 5 Setting up the Content Structure 6 Lists and Library 6 Project #1. Creating master page and page layout for the home page ............7 Step #1: Creating and customizing the master page 7 Step #2: Creating the Page Layout 8 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
  • 3. How to build a social media sharing sitein 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 it’s 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 moral 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 non-functional 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. The product team is working on enabling it in the future. 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.
  • 4. How to build a social media sharing sitein 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.
  • 5. How to build a social media sharing sitein 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.
  • 6. How to build a social media sharing sitein 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. Navigate to the Site Contents 2. Select Add an app 3. Select Asset Library from the list of apps 4. 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.
  • 7. How to build a social media sharing sitein 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.
  • 8. How to build a social media sharing sitein SharePoint 2013 February 2013 Configuring the navigation settings 1. Choose the navigation snippet from the snippet gallery, and configure it from the navigation settings. 2. Choose Managed Navigation as the Current Navigation. 3. Choose the term set you created to use for navigation. 4. Enable adding new pages to navigation automatically, and creating friendly URLs for new pages automatically. 5. 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.
  • 9. How to build a social media sharing sitein 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.
  • 10. How to build a social media sharing sitein 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.
  • 11. How to build a social media sharing sitein 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-created- channels) 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.
  • 12. How to build a social media sharing sitein 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.
  • 13. How to build a social media sharing sitein 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.
  • 14. How to build a social media sharing sitein SharePoint 2013 February 2013 1. Choose Edit Page from the ribbon. 2. Click on the Media Web Part that is inserted and choose Edit Web Part. 3. Select the Media tab from the ribbon. 4. Select the featured video from the videos asset library. 5. 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.
  • 15. How to build a social media sharing sitein 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.
  • 16. How to build a social media sharing sitein 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="ContentSearch- ContosoPictureDataContainer"> 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.
  • 17. How to build a social media sharing sitein 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.
  • 18. How to build a social media sharing sitein 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.
  • 19. How to build a social media sharing sitein 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.
  • 20. How to build a social media sharing sitein 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.
  • 21. How to build a social media sharing sitein 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.
  • 22. How to build a social media sharing sitein 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-b3d6- adc85a977241&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. Edit the Recommendations Web Part. 2. Open the query builder by selecting Change query. 3. Choose Specify a URL under Get recommended items for. 4. 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.
  • 23. How to build a social media sharing sitein 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.