Von Web-Apps für Teams freigeben

  • Artikel

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":

Share-to-Teams-Popup

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":

Freigabe-zu-Teams-Link entpacken

In diesem Artikel erfahren Sie, wie Sie eine Schaltfläche "In Teams teilen" für Ihre Website erstellen und einbetten, ihre Websitevorschau erstellen und freigeben auf Teams für Education 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":

    Symbol

  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 Education 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:

In Teams-Popupschulungen teilen

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[] }

Derzeit werden alle Freigabeschaltflächen 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