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 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
Fügen Sie das
launcher.js
Skript auf Ihrer Webseite hinzu.<script async defer src="https://teams.microsoft.com/share/launcher.js"></script>
Fügen Sie auf Ihrer Webseite ein HTML-Element mit dem
teams-share-button
Class-Attribut und dem Link hinzu, derdata-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":
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>
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
auffalse
festgelegte Attribut hinzufügen.<div class="teams-share-button" data-href="https://<link-to-be-shared>" data-preview="false"> </div>
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>
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:
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>