Yammer-Integration im SharePoint-Add-In-Modell

Artikel
04/08/2023

Zusammenfassung

Der Ansatz zum Integrieren von Yammer in SharePoint ist im neuen SharePoint-Add-In-Modell von der Vorgehensweise her der gleiche wie bei voll vertrauenswürdigem Code.

Allgemeine Richtlinien

Als Faustregel werden die folgenden allgemeinen Richtlinien für die Integration von Yammer in SharePoint bereitgestellt.

Die Yammer-Integration kann sowohl in lokalen als auch in Office 365-SharePoint-Umgebungen erfolgen.
Sie können das Remotebereitstellungsmuster zum Erstellen von Yammer-Gruppen und/oder Yammer OpenGraph-Objekten verwenden, um Unterhaltungen beim Erstellen neuer SharePoint-Websites zu vereinfachen.
Sie können die verfügbaren Funktionen zum Einbetten verwenden, um Yammer schnell und einfach in SharePoint zu integrieren.
- Um die Funktionen zum Einbetten zu verwenden, benötigen Sie einen HTML-Container mit 400 Pixel oder größer in Ihrer Anwendung.
Sie können die Yammer-SDKs und REST-APIs verwenden, um benutzerdefinierte Funktionen für Integration zu erstellen.

Optionen zum Integrieren von Yammer in SharePoint

Es stehen einige Optionen zum Integrieren von Yammer in SharePoint zur Verfügung.

Yammer-Webparts
Einbetten
- Gruppen-, Themen-, Meine und Benutzer-Feeds
- OpenGraph-Feeds
Yammer OpenGraph-API und/oder Yammer-REST-API mit Yammer-SDKs

Yammer-Webparts

Für die Integration von Yammer-Unterhaltungen auf einer SharePoint-Webseite sind zwei Webparts enthalten. Wenn Sie ein Webpart zu einer modernen Seite hinzufügen, geben Sie den Suchbegriff "yammer" ein, um die verfügbaren Webparts anzuzeigen:

In SharePoint enthaltene standardmäßige Yammer-Webparts

Nachdem Sie der Seite ein Webpart hinzugefügt haben, konfigurieren Sie es mithilfe des Eigenschaftenbereichs, um die gewünschten Yammer-Unterhaltungen einzuschließen.

Konfiguration des Webparts für Yammer-Unterhaltungen

Einbetten

Bei dieser Option wird ein Yammer-Feed in eine SharePoint-Webseite eingebettet.

Diese Option kann schnell und einfach implementiert werden.
Mit dieser Option können Sie eingeschränkte Aspekte des Feeds und die Darstellung steuern.

Die Verwendung der Option zum Einbetten auf der SharePoint-Seite kann wie folgt aussehen:

Eine Standardmäßige SharePoint-Teamwebsiteseite mit einem Textfeld, das den Text

Die folgende Tabelle beschreibt die einzelnen Typen von Yammer-Feeds, auf die Sie mit der Option „Einbetten“ zugreifen können.

Feed	Beschreibung	FeedType	Anwendungsfall
Mein Feed	Unter „Mein Feed“ werden die Unterhaltungen für Yammer-Benutzer angezeigt.	MyFeed	Die Startseite oder Arbeitsbereichwebsite auf der eigenen Website.
Benutzer-Feed	Alle Unterhaltungen, die von einem bestimmten Benutzer in Yammer gepostet wurden.	Benutzer	Profilseiten für Benutzer in einem Systemverzeichnis.
Themenfeed	Ein Feed der Unterhaltungen, die mit einem Thema in Yammer gekennzeichnet wurden.	Thema	Eine Ereignisseite im Intranet.
Gruppenfeed	Ein Feed von Unterhaltungen, die in einer bestimmten Gruppe gepostet wurden.	Gruppe	Eine Teamwebseite im Intranet.

Wenn Sie Funktionen benötigen, die über die vordefinierten Yammer-Typs in dieser Tabelle hinaus gehen, können Sie die OpenGraph-Option zum Einbetten verwenden. Diese Option bietet mehr Kontrolle über Feeds. Die folgende Tabelle beschreibt ein solches Beispiel.

Feed	Beschreibung	FeedType	Anwendungsfall
Kommentarfeed	Verwendet Open Graph-API von Yammer, um Unterhaltungen zu einem Anwendungsobjekt zu vereinfachen.	Benutzerdefiniert	Eine Verkaufschance in einer benutzerdefinierten CRM-Anwendung oder eine Mediendetailseite in einem digitalen Asset Management System.

Wann ist die Option geeignet?

Wenn Sie Yammer-Feeds in SharePoint-Websites integrieren und die integrierten Funktionen zum Einbetten von Feeds Ihre Anforderungen erfüllen.

Erste Schritte

Im folgenden Beispiel gezeigt, wie Websites mit einem Yammer-Feed, der mit der Website verknüpft ist, anstelle des standardmäßigen Newsfeeds für die Website bereitgestellt werden.

Provisioning.Yammer (O365-PnP-Beispiel)

Die CreateYammerGroupDiscussionPartXml-Methode in der YammerUtility.cs-Klasse stammt aus dem OfficeDevPnP.Core-Beispiel. Mit dieser Methode wird der XML-Code für eine Add-In-Webpart-Definition erstellt, die zu einer SharePoint-Seite hinzugefügt wird, wenn eine Website bereitgestellt wird. Schauen Sie sich den Codeausschnitt feedType: 'group' an. Hier können Sie sehen, dass feedType für die Verwendung der vordefinierten Gruppe „feedType“ festgelegt ist.

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();
}

Die CreateYammerOpenGraphDiscussionPartXml-Methode in der YammerUtility.cs-Klasse stammt aus dem OfficeDevPnP.Core-Beispiel. Mit dieser Methode wird der XML-Code für eine Add-In-Webpart-Definition erstellt, die zu einer SharePoint-Seite hinzugefügt wird, wenn eine Website bereitgestellt wird. Schauen Sie sich den Codeausschnitt feedType: 'open-graph' an. Hier können Sie sehen, dass feedType für die Verwendung der OpenGraph-API festgelegt ist.

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();
}

Sehen Sie sich das Video zum Integrieren von Yammer-Feeds in SharePoint-Websites (O365-PnP-Video) an, um eine exemplarische Vorgehensweise fürProvisioning.Yammer (O365-PnP-Beispiel) zu erhalten.

Weitere Informationen zum Einbetten von Yammer finden Sie im Artikel Yammer Embed Feed (Yammer Developer Center).

Weitere Informationen zu Yammer OpenGraph finden Sie im Artikel Open Graph Introduction & Format (Yammer Developer Center).

Yammer OpenGraph-API und/oder Yammer-REST-API mit Yammer-SDKs

Bei dieser Option verwenden Sie die Yammer OpenGraph-API und/oder Yammer-REST-API mit Yammer-SDKs für die Integration von Yammer in SharePoint. Diese APIs können auch zum Integrieren von Yammer in Prozesse außerhalb von Webseiten verwendet werden. Beispiele für solche Szenarien sind Dienste und lange ausgeführte Vorgänge.

Die Implementierung dieser Option nimmt mehr Zeit in Anspruch.
Mit dieser Option können Sie alle Aspekte des Feeds, die Darstellung und die Interaktion mit diesem steuern.

Wann ist die Option geeignet?

Wenn Sie Yammer-Feeds in SharePoint-Websites integrieren und die integrierten Funktionen zum Einbetten von Feeds Ihre Anforderungen nicht erfüllen.
Wenn Sie Yammer-Feeds in Dienste oder lange ausgeführte Vorgänge integrieren möchten.

Erste Schritte

Weitere Informationen zu Yammer OpenGraph finden Sie im Artikel Open Graph Introduction & Format (Yammer Developer Center).

Yammer-SDKs bieten die Möglichkeit zum Authentifizieren bei Yammer. Weitere Informationen zu den Yammer-SDKs finden Sie in den folgenden Artikeln:

Nachdem Sie über die Yammer-SDKs eine Authentifizierung bei Yammer vorgenommen haben, können Sie die Yammer-REST-APIs aufrufen.

Weitere Informationen zu Yammer-REST-APIs finden Sie im Artikel REST API & Rate Limits (Yammer Developer Center).

Hinweis zur Authentifizierung

In einem Szenario, in dem Sie für die Anmeldung bei SharePoint andere Anmeldeinformationen als die für Yammer verwenden, möchten Sie möglicherweise eine Funktion für einmaliges Anmelden für die Benutzer entwickeln. Ein Beispiel für ein solches Szenario ist, wenn Sie sich bei SharePoint mit einer LiveID anmelden und bei Yammer mit einem persönlichen Microsoft-Konto oder einem Microsoft-Geschäftskonto anmelden.

Um ein einmaliges Anmelden zu implementieren, können Sie die Benutzer anweisen, sich bei Yammer anzumelden, wenn Sie das erste Mal eine SharePoint-Seite aufrufen, indem Sie eine benutzerdefinierte Yammer-Komponente verwenden. Nachdem sich der Benutzer über das Yammer-SDK in Yammer angemeldet hat, können Sie das Aktualisierungstoken für den Benutzer in seinem Benutzerprofil speichern. Sie können dann bei nachfolgenden Aufrufen der Seite das Aktualisierungstoken aus dem Benutzerprofil abrufen und es für die Authentifizierung verwenden. Bei dieser Vorgehensweise müssen sich die Endbenutzer nur bei Yammer anmelden, wenn das Aktualisierungstoken abgelaufen ist.

Integrieren von Yammer-Feeds in SharePoint-Websites (O365-PnP-Video)
Yammer Embed Feed (Yammer Developer Center)
Open Graph Introduction & Format (Yammer Developer Center)
Leitfadenartikel unter https://aka.ms/OfficeDevPnPGuidance
Verweise in MSDN unter https://aka.ms/OfficeDevPnPMSDN
Videos bei https://aka.ms/OfficeDevPnPVideos

Provisioning.Yammer (O365-PnP-Beispiel)
OfficeDevPnP.Core
Beispiele und Inhalte bei Microsoft 365 Patterns and Practices (PnP)

Gilt für

Office 365 mit mehreren Mandanten (MT)
Office 365 dediziert (D)
SharePoint 2013 lokal

Freigeben über

Yammer-Integration im SharePoint-Add-In-Modell

Zusammenfassung

Allgemeine Richtlinien

Optionen zum Integrieren von Yammer in SharePoint

Yammer-Webparts

Einbetten

Yammer OpenGraph-API und/oder Yammer-REST-API mit Yammer-SDKs

Gilt für

Zusätzliche Ressourcen

Freigeben über

Yammer-Integration im SharePoint-Add-In-Modell

Zusammenfassung

Allgemeine Richtlinien

Optionen zum Integrieren von Yammer in SharePoint

Yammer-Webparts

Einbetten

Yammer OpenGraph-API und/oder Yammer-REST-API mit Yammer-SDKs

Verwandte Links

Verwandte PnP-Beispiele

Gilt für

Zusätzliche Ressourcen