Von Web-Apps für Teams freigeben

Mithilfe von Web-Apps für Teams freigeben können Benutzer Inhalte direkt für einen Chat, Kanal oder eine Besprechung freigeben, ohne den Kontext zu wechseln. Websites von Drittanbietern können das Startprogrammskript verwenden, um die Schaltfläche In Teams teilen auf ihren Webseiten einzubetten. Wenn der Benutzer Für Teams freigeben auswählt, wird das Dialogfeld Für Teams freigeben angezeigt, und der Benutzer wird aufgefordert, die erforderlichen Details anzugeben, um den Inhalt zu teilen.

Die folgende Abbildung zeigt das Dialogfeld, das angezeigt wird, wenn der Benutzer Für Teams freigeben auswählt:

Standardmäßig unterstützt Die Freigabe für Teams das Markieren von Benutzern mit @username und @everyone, und die markierten Benutzer erhalten Benachrichtigungen in Microsoft Teams, wenn Inhalte in Teams freigegeben werden.

Hinweis

• Nur die Desktopversionen von Microsoft Edge und Google Chrome werden unterstützt.
• Die Verwendung von Freemium- oder Gastkonten wird nicht unterstützt.

Sie können auch die Linkentflechtung für die Links hinzufügen, die über "Für Teams freigeben" freigegeben werden und in einer Web-App, einer persönlichen App oder einer Registerkarte gehostet werden. Weitere Informationen finden Sie unter Link unfurling.

Die folgende Abbildung zeigt die Link-Bereitstellungserfahrung über "Für Teams freigeben":

Die hier beschriebenen Inhalte führen Sie zum Erstellen und Einbetten von Share to Teams für Ihre Website, zum Erstellen ihrer Websitevorschau und zum Erweitern der Freigabe auf Teams für Education.

Das folgende Video enthält die grundlegenden Schritte zum Einbetten der Freigabe in Teams:

Einbetten von Freigaben in Teams

Es gibt zwei Methoden, mit denen Sie Share to Teams auf Ihrer Webseite einbetten können. Basierend auf dem Steuerelement, das Sie für Die Freigabe für Teams verwenden möchten, können Sie eine der folgenden Methoden verwenden:

Methode 1

Diese Methode zeigt die einfache und einfache Möglichkeit zum Einbetten von Share in Teams, wo Sie die Schaltfläche und ihre Funktionalität entsprechend Ihren Anforderungen anpassen können:

1. Fügen Sie das launcher.js Skript auf Ihrer Webseite hinzu.

   <script async defer src="https://teams.microsoft.com/share/launcher.js"></script>
   

2. Fügen Sie auf Ihrer Webseite ein HTML-Element mit teams-share-button im class -Attribut und dem Link hinzu, der im data-href -Attribut freigegeben werden soll.

   <div
     class="teams-share-button"
     data-href="https://<link-to-be-shared>">
   </div>
   

   Nach der Konfiguration wird die Schaltfläche Für Teams freigeben zu Ihrer Website hinzugefügt.

   • Wenn Sie eine andere Symbolgröße für die Schaltfläche verwenden möchten, verwenden Sie das data-icon-px-size -Attribut.

     <div
       class="teams-share-button"
       data-href="https://<link-to-be-shared>"
       data-icon-px-size="64">
     </div>
     

   • Wenn der freigegebene Link eine Benutzerauthentifizierung erfordert oder die URL-Vorschau Ihres Links in Teams nicht ordnungsgemäß gerendert wird, können Sie die URL-Vorschau deaktivieren, indem Sie das data-preview Attribut hinzufügen und auf falsefestlegen.

     <div
       class="teams-share-button"
       data-href="https://<link-to-be-shared>"
       data-preview="false">
     </div>
     

   • Wenn Sie eine Nachricht Ihrer Wahl im Feld zum Verfassen anzeigen möchten, können Sie Ihren Text im data-msg-text -Attribut definieren.

     <div
      class="teams-share-button"
      data-href="https://<link-to-be-shared>"
      data-msg-text="<default-message-to-be-populated-in-compose-box>"
      data-preview="false">
      </div>
     

Methode 2

Mit dieser Methode können Sie steuern, welche Schaltfläche dynamisch gerendert wird oder wann das Skript ausgeführt wird. Das Skript wird nur ausgeführt, wenn window.shareToMicrosoftTeams.renderButtons() aufgerufen wird. Sie können bestimmte HTML-Elemente über die renderButtons({elements: []}) API übergeben. Sie können die Stile, Größe und Sprachen der Schaltfläche anpassen.

Die asynchrone shareToMicrosoftTeams.renderButtons(options) API rendert alle Freigabeschaltflächen mit dem Klassennamen teams-share-button auf der Seite. Wenn ein options (optional) Objekt mit einer Liste von Elementen bereitgestellt wird, wie im folgenden Code gezeigt, werden diese Elemente in den Schaltflächen Freigeben gerendert.

`options` (optional): `{ elements?: HTMLElement[] }`

1. Fügen Sie das launcher.js-Skript auf Ihrer Webseite hinzu.

   <script async defer src="https://teams.microsoft.com/share/launcher.js" onload="onLoadComplete()"></script>
   

2. Erstellen Sie ein HTML-Element, und geben Sie die erforderlichen Attribute an. Nachdem das Startprogrammskript vollständig geladen wurde, stellen Sie sicher, dass die Renderinglogik ausgeführt wird.

   async function onLoadComplete() {
       const shareButton = document.createElement("div");
       shareButton.setAttribute("data-app-id", "<app-id>");
       shareButton.textContent = "Share Test App"
       shareButton.setAttribute("data-href", "<app-content-url>");
       shareButton.setAttribute("data-preview", "false");
       shareButton.setAttribute("data-msg-text", "<default-message-to-be-populated-in-compose-box>");
       await window.shareToMicrosoftTeams.renderButtons({elements: [shareButton]});
   }
   

Hier sehen Sie das Endbenutzerszenario, in dem der Inhalt mithilfe von "Für Teams freigeben" für Chats oder Kanäle freigegeben wird:

Freigeben von Inhalten für einen Chat oder Kanal

1. Öffnen Sie die Web-App im Browser, und wählen Sie Für Teams freigeben aus. Das Dialogfeld Für Teams freigeben wird geöffnet.

   

2. Fügen Sie den Chat- oder Kanalnamen hinzu.

   

   Hinweis

   Wenn die App noch nicht im Chat- oder Kanalbereich hinzugefügt wurde, wird im Dialogfeld Für Teams freigeben ein Haftungsausschluss für die App-Zustimmung angezeigt.

3. Wählen Sie Freigeben aus. Der App-Inhalt wird im jeweiligen Bereich freigegeben.

Freigeben von Inhalten in Besprechungen

Mithilfe von Web-Apps für Teams freigeben können Benutzer Inhalte für live oder anstehende Besprechungen freigeben. Wenn Sie die Inhaltsfreigabe in Besprechungen aktivieren, können Benutzer Informationen freigeben, die einen arbeitsbereich für die Zusammenarbeit innerhalb der Besprechung erstellen. Benutzer können z. B. Workboards aus einer Web-App direkt in der Besprechungsphase freigeben, was eine gemeinsame Anstrengung zum Sammeln und Organisieren von Ideen ermöglicht.

So werden die freigegebenen Webinhalte in der Besprechungsphase angezeigt:

Bevor Sie die Freigabe von Inhalten für Besprechungen aktivieren, müssen Sie Folgendes sicherstellen:

1. Eine Microsoft Teams-App mit einer Registerkarte , die den Besprechungsseitenbereich und die APIs für die Freigabe für Phasen unterstützt.

2. Die Besprechungs-App muss Share to Stage-APIs mit zwei primären Anforderungen unterstützen, um den Inhalt in der Besprechungsphase anzuzeigen:

   • Das App-Manifest , das sowohl als auch meetingStagemeetingSidePanel als Framekontexte konfiguriert unterstützt. Wenn nicht konfiguriert, können Besprechungsteilnehmer den Inhalt möglicherweise nicht auf der Bühne anzeigen.
   • Die App, die Berechtigungen unterstützt, MeetingStage.Write.Chat um die Kontrolle über die Phase zu übernehmen. Dies ist eine Leseberechtigungsanforderung.

Hinweis

• Wenn die App nicht über Besprechungsphasen- und Seitenbereichsfunktionen verfügt, werden die Inhalte nicht gespeichert, und die Nachrichten werden im regulären Besprechungschat gesendet.
• Wenn eine App-Installation vom Administrator blockiert wird, wird die App dem Chat und nicht der Besprechung des Benutzers hinzugefügt.
• Die Freigabe für Teams in Besprechungen wird nur für Registerkartenszenarien und teamsspezifisch unterstützt.

Aktivieren der Freigabe für Teams für Besprechungen

1. Fügen Sie das launcher.js Skript auf Ihrer Webseite hinzu.

   <script async defer src="https://teams.microsoft.com/share/launcher.js"></script>
   

2. Fügen Sie auf Ihrer Webseite ein HTML-Element mit teams-share-button im class -Attribut und dem Link hinzu, der im data-href -Attribut freigegeben werden soll. Damit Ihre Benutzer Inhalte in Besprechungen von Share to Teams freigeben können, fügen Sie das Attribut hinzu allow-share-in-meeting , und legen Sie es auf fest true.

       <div
       class="teams-share-button"
       data-href="https://<link-to-be-shared>"
       data-allow-share-in-meeting="true"
       data-app-id="<app-id>"
       >
       </div>
   

   Nach der Konfiguration wird das Dialogfeld Für Teams freigeben mit der Option Jetzt präsentieren angezeigt. Mit "Präsentieren" können Benutzer jetzt Inhalte für eine laufende Besprechung freigeben. Für den Benutzer, der Inhalte in der Besprechungsphase freigegeben hat, wird der Seitenbereich automatisch geöffnet, sobald die Besprechung beginnt, und füllt den freigegebenen Inhalt im Besprechungsseitenbereich auf.

   

Im Folgenden finden Sie einige Szenarien für Endbenutzer, in denen der Inhalt mithilfe von "Für Teams freigeben" für Besprechungen freigegeben wird:

Freigeben von Inhalten für eine anstehende Besprechung

1. Öffnen Sie die Web-App im Browser, und wählen Sie Für Teams freigeben aus. Das Dialogfeld Für Teams freigeben wird geöffnet.

   

2. Fügen Sie den Besprechungsnamen hinzu.

   

   Hinweis

   Wenn die App noch nicht im Besprechungsbereich hinzugefügt wurde, wird im Dialogfeld Für Teams freigeben ein Haftungsausschluss für die App-Zustimmung angezeigt.

3. Wählen Sie Freigeben aus. Der App-Inhalt wird in einem anstehenden Besprechungschat als adaptive Karte freigegeben.

   

Wenn die Besprechung beginnt, wird der für die Besprechung freigegebene Inhalt auf der Grundlage der geöffneten App in einer Seitenbereichsoberfläche angezeigt.

Freigeben von Inhalten in einer laufenden Besprechung

1. Öffnen Sie die Web-App im Browser, und wählen Sie Für Teams freigeben aus. Das Dialogfeld Für Teams freigeben wird geöffnet.

   

2. Wählen Sie Jetzt präsentieren aus. Ein Zustimmungsdialogfeld wird angezeigt, um den Inhalt in der Besprechung freizugeben.

   

   Hinweis

   • Wenn die App noch nicht im Besprechungsbereich hinzugefügt wurde, wird im Dialogfeld Für Teams freigeben ein Haftungsausschluss für die App-Zustimmung angezeigt.
   • Wenn es keine laufende Besprechung gibt, kann der Benutzer Jetzt besprechen auswählen, um eine Besprechung zu beginnen und Inhalte zu teilen.

3. Wählen Sie Freigabe starten aus.

   

4. Die Web-App wird für die Besprechungsphase freigegeben, und alle Teilnehmer können interagieren und zusammenarbeiten.

   

Starten einer Besprechung und Freigeben von Inhalten

Wenn es keine laufende Besprechung gibt und der Benutzer eine Besprechung initiieren und den Inhalt präsentieren möchte, kann er dies mit der Option Für Teams freigeben tun. So starten Sie eine Besprechung und teilen den Inhalt:

1. Öffnen Sie die Web-App im Browser, und wählen Sie Für Teams freigeben aus. Das Dialogfeld Für Teams freigeben wird geöffnet.

   

2. Fügen Sie entweder den Besprechungsnamen oder die Teilnehmer hinzu, um eine neue Besprechung zu beginnen.

3. Wählen Sie Jetzt präsentieren aus. Ein Zustimmungsdialogfeld wird angezeigt, um die Besprechung zu starten.

   

   Hinweis

   Wenn die App noch nicht im Besprechungsbereich hinzugefügt wurde, wird im Dialogfeld Für Teams freigeben ein Haftungsausschluss für die App-Zustimmung angezeigt.

4. Wählen Sie OK aus. Das Besprechungsfenster wird angezeigt, um an der Besprechung teilzunehmen.

   

5. Wählen Sie Jetzt beitreten aus. Nachdem Sie an der Besprechung teilnehmen, wird ein Zustimmungsdialogfeld angezeigt, um den Inhalt in der Besprechung freizugeben.

   

6. Wählen Sie Freigabe starten aus.

   

7. Die Web-App wird für die Besprechungsphase freigegeben, und alle Teilnehmer können interagieren und zusammenarbeiten.

   

Erstellen der Websitevorschau

Wenn Ihre Website für Teams freigegeben wird, enthält die Karte, die in den ausgewählten Kanal eingefügt wird, eine Vorschau Ihrer Website. Sie können das Verhalten dieser Vorschau steuern, indem Sie sicherstellen, dass der freigegebenen Website die entsprechenden Metadaten hinzugefügt werden, z. B. die data-href URL.

So zeigen Sie die Vorschau an:

• Sie müssen entweder ein Miniaturbild oder einen Titel und eine Beschreibung einschließen. Um optimale Ergebnisse zu erzielen, schließen Sie alle drei ein.
• Die freigegebene URL erfordert keine Authentifizierung. Wenn eine Authentifizierung erforderlich ist, können Sie sie freigeben, aber die Vorschau wird nicht erstellt.

In der folgenden Tabelle sind die erforderlichen Tags aufgeführt:

Wert	Metatag	Diagramm öffnen
Titel	<meta name="title" content="Example Page Title">	<meta property="og:title" content="Example Page Title">
Beschreibung	<meta name="description" content="Example Page Description">	<meta property="og:description" content="Example Page Description">
Miniaturansicht	Keine	<meta property="og:image" content="http://example.com/image.jpg">

Sie können entweder die HTML-Standardversionen oder die Open Graph-Version verwenden.

In Teams für Bildungseinrichtungen freigeben

Für Lehrkräfte, die die Schaltfläche Für Teams freigeben verwenden, gibt es eine zusätzliche Option, Create an Assignment mit der Sie schnell eine Aufgabe im ausgewählten Team erstellen können, basierend auf dem freigegebenen Link.

Sie können die Standardwerte für die folgenden Felder im Formular Für Teams freigeben festlegen:

• Sagen Sie etwas dazu: msgText
• Zuweisungsanweisungen: assignInstr
• Aufgabentitel: assignTitle

Die folgende Abbildung zeigt In Teams für Bildungseinrichtungen freigeben:

Beispiel

Die Standardformularwerte werden im folgenden Beispiel angegeben:

<span
    class="teams-share-button"
    data-href="https://www.microsoft.com/education/products/teams"
    data-msg-text="Default Message"
    data-assign-title="Default Assignment Title"
    data-assign-instr="Default Assignment Instructions"
></span>

Im Folgenden sind die launcher.js Definitionen aufgeführt:

Eigenschaft	HTML-Attribut	Typ	Standard	Beschreibung
url	data-href	string	–	Die URL des inhalts, der freigegeben werden soll. Diese URL kann verwendet werden, um den Inhalt an eine anstehende Besprechung anzuheften oder in einer laufenden Besprechung zu teilen. Erforderlich, wenn allow-share-in-meeting als truefestgelegt ist.
Vorschau	data-preview	Boolescher Wert (als Zeichenfolge)	true	Der Wert gibt an, ob eine Vorschau des freigegebenen Inhalts angezeigt werden soll.
appId	data-app-id	Zeichenfolge	–	Die ID der app, die freigegeben werden soll. Erforderlich, wenn allow-share-in-meeting als truefestgelegt ist.
iconPxSize	data-icon-px-size	number (als Zeichenfolge)	32	Die Größe der schaltfläche "In Teams teilen", die gerendert werden soll, in Pixel.
msgText	data-msg-text	string	–	Der Standardtext, der vor dem Link im Feld zum Verfassen von Nachrichten hinzugefügt werden soll. Die maximale Anzahl von Zeichen beträgt 200.
assignInstr	data-assign-instr	string	–	Der Standardtext, der im Feld " Zuordnungsanweisungen " hinzugefügt werden soll. Die maximale Anzahl von Zeichen beträgt 200.
assignTitle	data-assign-title	string	–	Der Standardtext, der im Feld " Zuordnungstitel " hinzugefügt werden soll. Die maximale Anzahl von Zeichen beträgt 50.
In Besprechung teilen	data-allow-share-in-meeting	Zeichenfolge	–	Der Wert, der es Benutzern ermöglicht, Inhalte in Besprechungen zu teilen, zusätzlich zu vorhandenen Funktionen zum Teilen im Chat oder Kanal. Sie wird standardmäßig als false betrachtet.

Codebeispiel

Beispielname	Beschreibung	Node.js
Für Teams freigeben	Diese Beispiel-App zeigt eine Webseite als Registerkarte an und enthält die Schaltfläche Für Teams freigeben mit der Option Jetzt präsentieren.	Anzeigen

Siehe auch

• Integrieren von Web-Apps
• Für Teams über persönliche App oder Registerkarte freigeben
• In Besprechung freigeben