Von Web-Apps für Teams freigeben

Websites von Drittanbietern können das Launcher-Skript verwenden, um Schaltflächen für die Weitergabe an Teams in ihre Webseiten einzubetten. Wenn Sie die Schaltfläche Für Teams freigeben auswählen, wird die Benutzeroberfläche Für Teams freigeben in einem Popupfenster gestartet. Auf diese Weise können Sie einen Link direkt mit jeder Person oder einem Microsoft Teams-Kanal teilen, ohne den Kontext zu wechseln.

Die folgende Abbildung zeigt das Popupfenster für die Vorschauoberfläche "In Teams teilen":

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 die Schaltfläche "In Teams teilen" geteilt werden, die in einer Web-App, einer persönlichen App oder einer Registerkarte gehostet wird. Weitere Informationen finden Sie unter Link unfurling.

Die folgende Abbildung zeigt die Link-Bereitstellungserfahrung über die Schaltfläche "In Teams teilen":

In diesem Artikel erfahren Sie, wie Sie eine Schaltfläche "In Teams teilen" für Ihre Website erstellen und einbetten, ihre Websitevorschau erstellen und die Freigabe für Teams für Bildungseinrichtungen erweitern.

Im folgenden Video erfahren Sie, wie Sie die Schaltfläche "In Teams teilen" einbetten:

Schaltfläche "In Teams teilen" einbetten

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 dem teams-share-button Class-Attribut und dem Link hinzu, der data-href im Attribut freigegeben werden soll.

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

   Nach Abschluss dieses Vorgangs wird das Teams-Symbol zu Ihrer Website hinzugefügt. Die folgende Abbildung zeigt das Symbol "Für Teams freigeben":

   

3. Wenn Sie eine andere Symbolgröße für die Schaltfläche "In Teams teilen" verwenden möchten, verwenden Sie alternativ das data-icon-px-size -Attribut.

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

4. Wenn der freigegebene Link eine Benutzerauthentifizierung erfordert und die URL-Vorschau ihres links, der freigegeben werden soll, in Teams nicht gut gerendert wird, können Sie die URL-Vorschau deaktivieren, indem Sie das data-preview auf falsefestgelegte Attribut hinzufügen.

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

5. Um eine Nachricht Ihrer Wahl im Feld "Verfassen" anzuzeigen, 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>
   

6. Wenn Ihre Seite Inhalte dynamisch rendert, können Sie die shareToMicrosoftTeams.renderButtons() -Methode verwenden, um share zu erzwingen, dass an der entsprechenden Stelle in der Pipeline gerendert wird.

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	nichts.	<meta property="og:image" content="http://example.com/image.jpg">

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

Für 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. Die folgende Abbildung zeigt In Teams für Bildungseinrichtungen freigeben:

Vollständige launcher.js Definition

Eigenschaft	HTML-Attribut	Typ	Standard	Beschreibung
href	data-href	string	n/v	Die href des inhalts, der freigegeben werden soll.
Vorschau	data-preview	Boolescher Wert (als Zeichenfolge)	true	Gibt an, ob eine Vorschau der inhalte angezeigt werden soll, die freigegeben werden sollen.
iconPxSize	data-icon-px-size	number (als Zeichenfolge)	32	Die Größe der zu rendernden Schaltfläche "In Teams freigeben" in Pixel.
msgText	data-msg-text	string	n/v	Standardtext, der vor dem Link im Feld zum Verfassen von Nachrichten eingefügt werden soll. Die maximale Anzahl von Zeichen beträgt 200.
assignInstr	data-assign-instr	string	n/v	Standardtext, der in das Feld "Anweisungen" der Zuordnungen eingefügt werden soll. Die maximale Anzahl von Zeichen beträgt 200.
assignTitle	data-assign-title	string	n/v	Standardtext, der in das Feld "Titel" der Zuordnungen eingefügt werden soll. Die maximale Anzahl von Zeichen beträgt 50.

Methoden

shareToMicrosoftTeams.renderButtons(options)

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

Alle Freigabeschaltflächen werden auf der Seite gerendert. Wenn ein optionales options Objekt mit einer Liste von Elementen bereitgestellt wird, werden diese Elemente in Freigabeschaltflächen gerendert.

Festlegen von Standardformularwerten

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

Beispiel

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>

Siehe auch

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