Yammer integration in the SharePoint Add-in model

Articolo
09/15/2021

Summary

The approach you take to integrate Yammer with SharePoint is the same in the new SharePoint Add-in model as it is with Full Trust Code.

High Level Guidelines

As a rule of a thumb, we would like to provide the following high level guidelines to integrate Yammer with SharePoint.

Yammer integration may be used in both on-premises and Office 365 SharePoint environments.
You can use the remote provisioning pattern to create Yammer groups and/or Yammer OpenGraph objects to facilitate conversations when you create new SharePoint sites.
You can use the out-of-the-box embed functionality to quickly and easily integrate Yammer with SharePoint.
- To use embed you need a HTML container 400 pixels or larger in your application.
You can use the Yammer SDKs and REST APIs to create customized integration functionality.

Options to integrate Yammer with SharePoint

You have a few options to integrate Yammer with SharePoint.

Yammer Web Parts
Embed
- Group, Topic, My, and User Feeds
- OpenGraph Feeds
Yammer OpenGraph API and/or Yammer REST API with Yammer SDKs

Yammer Web Parts

Two web parts are included for integrating Yammer conversations in a SharePoint webpage. When adding a web part to a modern page, enter the search term "yammer" to view the available web parts:

Default Yammer web parts included in SharePoint

Once you have added a web part to the page, configure it using the property pane to include the desired Yammer conversations.

Yammer Conversation web part configuration

Embed

In this option you embed a Yammer feed in a SharePoint webpage.

This option is quickly and easily implemented.
This option allows you to control limited aspects of the feed and how it appears.

Using embed looks like this in your SharePoint page:

A standard SharePoint team site page with a text box that contains the text, Start a conversation. Below the text box is a list box displaying a Yammer conversation thread.

The following table describes each type of Yammer feed you can access with embed out-of-the-box.

Feed	Description	FeedType	Use Case
My Feed	My Feeds are where conversations are delivered for Yammer users.	MyFeed	My Site homepage or workspace site.
User Feed	All the conversations posted by a specific user in Yammer.	User	Profile pages for users in a system directory.
Topic Feed	A feed of conversations that have been tagged with a topic in Yammer.	Topic	An event page on an intranet.
Group Feed	A feed of conversations that have been posted in a specified group.	Group	A team page on an intranet.

If you need to go beyond the capabilities of the out-of-the-box Yammer feeds in the table above you can use the OpenGraph embed option. This option gives you more control of the feed. The following table illustrates such an example.

Feed	Description	FeedType	Use Case
Comment Feed	Uses Yammer’s Open Graph API to facilitate conversation around an application object.	Custom	An opportunity in a custom CRM application, or a media detail page in a digital asset management system.

When is it a good fit?

When you are trying to integrate Yammer feeds with SharePoint sites and the out-of-the-box capabilities of the embed feed meet your needs.

Getting Started

The following sample demonstrates how to provision sites with a Yammer feed associated with the site in place of the default news feed for the site.

Provisioning.Yammer (O365 PnP Sample)

The CreateYammerGroupDiscussionPartXml method in the YammerUtility.cs class comes from the OfficeDevPnP.Core sample. This method creates the XML for an Add-in Part definition that is added to a SharePoint page when a site is provisioned. Notice the feedType: 'group' portion of the code. Here you can see the feedType is set to use the out-of-the-box group feedType.

public static string CreateYammerGroupDiscussionPartXml(string yammerNetworkName, int yammerGroupId, bool showHeader, bool showFooter, bool useSSO = true)
{
    StringBuilder wp = new StringBuilder(100);
    wp.Append("<?xml version=\"1.0\" encoding=\"utf-8\" ?>");
    wp.Append("<webParts>");
    wp.Append("	<webPart xmlns='http://schemas.microsoft.com/WebPart/v3'>");
    wp.Append("		<metaData>");
    wp.Append("			<type name='Microsoft.SharePoint.WebPartPages.ScriptEditorWebPart, Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c' />");
    wp.Append("			<importErrorMessage>Cannot import this web part.</importErrorMessage>");
    wp.Append("		</metaData>");
    wp.Append("		<data>");
    wp.Append("			<properties>");
    wp.Append("				<property name='Title' type='string'>$Resources:core,ScriptEditorWebPartTitle;</property>");
    wp.Append("				<property name='Description' type='string'>$Resources:core,ScriptEditorWebPartDescription;</property>");
    wp.Append("				<property name='ChromeType' type='chrometype'>None</property>");
    wp.Append("				<property name='Content' type='string'>");
    wp.Append("				<![CDATA[");
    wp.Append("				    <div id='embedded-feed' style='height: 500px;'></div>");
    wp.Append("				    <script type='text/javascript' src='https://assets.yammer.com/assets/platform_embed.js'></script>");
    wp.Append("				    <script type='text/javascript'>  
                yam.connect.embedFeed({ container: '#embedded-feed', network: '"
                + yammerNetworkName
                + @"', feedType: 'group', feedId: '" + yammerGroupId			
                + @"', config: { use_sso: " + useSSO.ToString().ToLower()			
                + @", header: " + showHeader.ToString().ToLower()
                + @", footer: " + showFooter.ToString().ToLower()
                + " }}); </script>");
    wp.Append("				]]>");
    wp.Append("				</property>");
    wp.Append("			</properties>");
    wp.Append("		</data>");
    wp.Append("	</webPart>");
    wp.Append("</webParts>");

    return wp.ToString();
}

The CreateYammerOpenGraphDiscussionPartXml method in the YammerUtility.cs class comes from the OfficeDevPnP.Core sample. This method creates the XML for an Add-in Part definition that is added to a SharePoint page when a site is provisioned. Notice the feedType: 'open-graph' portion of the code. Here you can see the feedType is set to use the OpenGraph API.

public static string CreateYammerOpenGraphDiscussionPartXml(string yammerNetworkName, string url, bool showHeader, 
                                                            bool showFooter, string postTitle="", string postImageUrl="", 
                                                            bool useSso = true, string groupId = "")
{
    StringBuilder wp = new StringBuilder(100);
    wp.Append("<?xml version=\"1.0\" encoding=\"utf-8\" ?>");
    wp.Append("<webParts>");
    wp.Append("	<webPart xmlns='http://schemas.microsoft.com/WebPart/v3'>");
    wp.Append("		<metaData>");
    wp.Append("			<type name='Microsoft.SharePoint.WebPartPages.ScriptEditorWebPart, Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c' />");
    wp.Append("			<importErrorMessage>Cannot import this web part.</importErrorMessage>");
    wp.Append("		</metaData>");
    wp.Append("		<data>");
    wp.Append("			<properties>");
    wp.Append("				<property name='Title' type='string'>$Resources:core,ScriptEditorWebPartTitle;</property>");
    wp.Append("				<property name='Description' type='string'>$Resources:core,ScriptEditorWebPartDescription;</property>");
    wp.Append("				<property name='ChromeType' type='chrometype'>None</property>");
    wp.Append("				<property name='Content' type='string'>");
    wp.Append("				<![CDATA[");
    wp.Append("				    <div id='embedded-feed' style='height: 500px;'></div>");
    wp.Append("				    <script type='text/javascript' src='https://assets.yammer.com/assets/platform_embed.js'></script>");
    wp.Append("				    <script>");
    wp.Append("				        yam.connect.embedFeed({");
    wp.Append("				          container: '#embedded-feed'");
    wp.Append("				                , feedType: 'open-graph'");
    wp.Append("				                , feedId: ''");
    wp.Append("				                , config: {");
    wp.Append("				                     use_sso: " + useSso.ToString().ToLower());
    wp.Append("				                     , header: " + showHeader.ToString().ToLower());
    wp.Append("				                     , footer: " + showFooter.ToString().ToLower());
    wp.Append("				                     , showOpenGraphPreview: false");
    wp.Append("				                     , defaultToCanonical: false");
    wp.Append("				                     , hideNetworkName: false");
    wp.Append("				                     , promptText: 'Start a conversation'");
    if (!string.IsNullOrEmpty(groupId))
    {
        wp.Append("				                 , defaultGroupId: '" + groupId + "'"); 
    }
    wp.Append("				                }");
    wp.Append("				                , objectProperties: {"); 
    wp.Append("				                  url: '" + url + "'");
    wp.Append("				                  , type: 'page'");
    wp.Append("				                  , title: '" + postTitle + "'");
    wp.Append("				                  , image: '" + postImageUrl + "'");
    wp.Append("				                }");
    wp.Append("				            });");
    wp.Append("				        </script>");
    wp.Append("				]]>");
    wp.Append("				</property>");
    wp.Append("			</properties>");
    wp.Append("		</data>");
    wp.Append("	</webPart>");
    wp.Append("</webParts>");

    return wp.ToString();
}

Watch the Integrate Yammer feeds to SharePoint sites (O365 PnP Video) to see a walk through of the - Provisioning.Yammer (O365 PnP Sample).

For more information about Yammer embed see the Yammer Embed Feed (Yammer Developer Center) article.

For more information about Yammer OpenGraph see the Open Graph Introduction & Format (Yammer Developer Center) article.

Yammer OpenGraph API & Yammer REST API with Yammer SDKs

In this option you use the Yammer OpenGraph API and/or Yammer REST API with Yammer SDKs to integrate Yammer with SharePoint. These APIs may also be used to integrate Yammer with processes outside of webpages. Examples of such scenarios include services and long running operations.

This option takes longer to implement.
This option allows you to control all aspects of the feed and how it appears and how you interact with it.

When is it a good fit?

When you are trying to integrate Yammer feeds with SharePoint sites and the out-of-the-box capabilities of the embed feeds do not meet your needs.
When you are trying to integrate Yammer feeds into services or long running operations.

Getting Started

For more information about Yammer OpenGraph see the Open Graph Introduction & Format (Yammer Developer Center) article.

Yammer SDKs provide you the ability to authenticate to Yammer. For more information about the Yammer SDKs see the following articles:

After you have authenticated to Yammer via the Yammer SDKs you can call the Yammer REST APIs.

For more information about Yammer REST APIs see the REST API & Rate Limits (Yammer Developer Center) article.

Authentication Note

In a scenario where you sign into SharePoint with credentials that differ from the credentials you use to sign into SharePoint with you may wish to develop a single-sign-on capability for your users. An example of such a scenario is when you sign into SharePoint with a LiveID and you need to sign into Yammer with a Microsoft personal or work account.

To implement a single-sign-on scenario you can direct your users to sign into Yammer the first time they come to a SharePoint page with your custom Yammer component on it. After the user signs into Yammer via the Yammer SDK you can store the refresh token for the user in their user profile. Then, on subsequent visits to the page you can retrieve the refresh token from the user profile and use it to authenticate. With this approach your end users only need to sign into Yammer when their refresh token expires.

Integrate Yammer feeds to SharePoint sites (O365 PnP Video)
Yammer Embed Feed (Yammer Developer Center)
Open Graph Introduction & Format (Yammer Developer Center)
Guidance articles at https://aka.ms/OfficeDevPnPGuidance
References in MSDN at https://aka.ms/OfficeDevPnPMSDN
Videos at https://aka.ms/OfficeDevPnPVideos

Provisioning.Yammer (O365 PnP Sample)
OfficeDevPnP.Core
Samples and content at Microsoft 365 Patterns and Practices (PnP)

Applies to

Office 365 Multi Tenant (MT)
Office 365 Dedicated (D)
SharePoint 2013 on-premises

Condividi tramite

Yammer integration in the SharePoint Add-in model

Summary

High Level Guidelines

Options to integrate Yammer with SharePoint

Yammer Web Parts

Embed

Yammer OpenGraph API & Yammer REST API with Yammer SDKs

Applies to

Risorse aggiuntive

Condividi tramite

Yammer integration in the SharePoint Add-in model

Summary

High Level Guidelines

Options to integrate Yammer with SharePoint

Yammer Web Parts

Embed

Yammer OpenGraph API & Yammer REST API with Yammer SDKs

Related links

Related PnP samples

Applies to

Risorse aggiuntive