Erstellen einer eingebetteten Schaltfläche "freigeben für Microsoft Teams"Creating a Share to Teams embedded button

Hinweis

  • Nur die Desktop Versionen von Edge und Chrome werden unterstützt.Only the desktop versions of Edge and Chrome are supported.
  • Die Verwendung von Freemium-oder Gastkonten wird nicht unterstützt.Use of Freemium or guest accounts is not supported.

Drittanbieterwebsites können das Startprogramm Skript verwenden, um Share to Teams-Schaltflächen auf Ihren Webseiten einzubetten, wodurch die Benutzeroberfläche für Teams in einem Popupfenster gestartet wird, wenn darauf geklickt wird.Third-party websites can use the launcher script to embed Share to Teams buttons on their webpages which will launch the Share to Teams experience in a popup window when clicked. Auf diese Weise können Sie einen Link direkt für einen beliebigen Benutzer oder Microsoft Teams-Kanal freigeben, ohne Kontext zu wechseln.This will allow you to share a link directly to any person or Microsoft Teams channel without switching context.

Popup "an Teams freigeben"

Vorgehensweise Einbetten einer Share to Teams-SchaltflächeHow to embed a Share to Teams button

Zunächst müssen Sie das launcher.js Skript auf Ihrer Webseite hinzufügen.First, you'll need to add the launcher.js script on your webpage.

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

Fügen Sie als nächstes ein HTML-Element auf Ihrer Webseite teams-share-button mit dem Class-Attribut und dem Link hinzu data-href , der in dem Attribut freigegeben werden soll.Next, add an HTML element on your webpage with the teams-share-button class attribute and the link to share in the data-href attribute.

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

Dadurch wird das Microsoft Teams-Symbol zu Ihrer Website hinzugefügt.This will add the Microsoft Teams icon to your website.

Symbol "an Teams freigeben"

Wenn Sie eine andere Symbolgröße für die Schaltfläche Freigeben für Teams verwenden möchten, verwenden Sie data-icon-px-size optional das-Attribut.Optionally, if you want a different icon size for the Share to Teams button, use the data-icon-px-size attribute.

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

Wenn Sie wissen, dass die URL-Vorschau von Ihrem Link freigegeben wird, in Microsoft Teams nicht gut gerendert wird (beispielsweise würde die Verknüpfung Benutzerauthentifizierung erfordern), können Sie die data-preview URL-Vorschau falsedeaktivieren, indem Sie das auf festgelegte Attribut hinzufügen.If you know that the URL preview from your link to be shared won't render well in Teams (for example the link would require user authentication) you can disable the URL preview by adding the data-preview attribute set to false.

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

Wenn die Seite Inhalt dynamisch rendert, können Sie die shareToMicrosoftTeams.renderButtons() -Methode verwenden, um zu erzwingen, dass die Schaltfläche Freigeben an der entsprechenden Stelle in der Pipeline gerendert wird.If your page dynamically renders content, you can use the the shareToMicrosoftTeams.renderButtons() method to force the Share button to render at the appropriate place in the pipeline.

Fertigen Ihrer Website VorschauCrafting your website preview

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.When your website is shared to Teams, the card that is inserted into the selected channel will contain a preview of your website. Sie können das Verhalten dieser Vorschau steuern, indem Sie sicherstellen, dass der freigegebenen Website (der data-href URL) die entsprechenden Metadaten hinzugefügt werden.You can control the behavior of this preview by ensuring the appropriate meta-data is added to the website being shared (the data-href URL). In der folgenden Tabelle werden die erforderlichen Tags dargestellt.The table below outlines the necessary tags. Sie können entweder die HTML-Standardversionen oder die Open Graph-Version verwenden.You can use either the html default versions, or the Open Graph version.

Damit die Vorschau angezeigt wird, müssen Sie Folgendes tun:In order for the preview to be displayed you must:

  • Fügen Sie entweder ein Miniaturbild oder sowohl einen Titel als auch eine Beschreibung ein (um optimale Ergebnisse zu erzielen, schließen Sie alle drei ein).Include either a Thumbnail image, or both a Title and Description (for best results, include all three).
  • Für die freigegebene URL kann keine Authentifizierung erforderlich sein.The URL being shared cannot require authentication. Wenn dies der Fall ist, können Sie ihn trotzdem freigeben, die Vorschau wird jedoch nicht erstellt.If it does you can still share it, but the preview will not be created.
WertValue MetatagMeta tag Diagramm öffnenOpen Graph
TitleTitle <meta name="title" content="Example Page Title"> <meta property="og:title" content="Example Page Title">
BeschreibungDescription <meta name="description" content="Example Page Description"> <meta property="og:description" content="Example Page Description">
MiniaturbildThumbnail Image nonenone <meta property="og:image" content="http://example.com/image.jpg">

Freigeben für Teams für BildungseinrichtungenShare to Teams for Education

Für Lehrer, die die Schaltfläche "für Teams freigeben" verwenden, Create an Assignmenterhalten Sie eine zusätzliche Option für.For teachers using the Share to Teams button you'll be given an additional option to Create an Assignment. Auf diese Weise können Sie schnell eine Zuordnung im ausgewählten Team basierend auf dem freigegebenen Link erstellen.This enables you to quickly create an assignment in the chosen Team based on the shared link.

Popup "an Teams freigeben"

Vollständige Launcher. js-DefinitionFull launcher.js definition

EigenschaftProperty HTML-AttributHTML attribute TypType StandardDefault BeschreibungDescription
hrefhref data-href stringstring n/vn/a Die href des freizugebenden Inhalts.The href of the content to share.
Vorschaupreview data-preview Boolean (als Zeichenfolge)boolean (as a string) true Gibt an, ob eine Vorschau des freizugebenden Inhalts angezeigt werden soll.Whether or not to show a preview of the content to share.
iconPxSizeiconPxSize data-icon-px-size Zahl (als Zeichenfolge)number (as a string) 32 Die Größe der zu rendernden Schaltfläche "Share-to-Teams" in Pixel.The size in pixels of the Share-to-Teams button to render.
msgTextmsgText data-msg-text stringstring n/vn/a Standard Text, der vor dem Link im Feld Nachricht erstellen eingefügt werden soll (Grenzwert für 200 Zeichen)Default Text to be inserted before the link in the message compose box (200 character limit)
assignInstrassignInstr data-assign-instr stringstring n/vn/a Standard Text, der in das Feldzuweisungen "Instructions" eingefügt werden soll (Grenzwert für 200 Zeichen)Default Text to be inserted in the assignments "Instructions" field (200 character limit)
assignTitleassignTitle data-assign-title stringstring n/vn/a Standard Text, der in das Feldzuweisungen "Title" eingefügt werden soll (Grenzwert für 50 Zeichen)Default Text to be inserted in the assignments "Title" field (50 character limit)

MethodenMethods

shareToMicrosoftTeams.renderButtons(options)

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

Rendert alle derzeit auf der Seite befindlichen Freigabe Schaltflächen.Renders all share buttons currently on the page. Wenn ein optionales options Objekt mit einer Liste von Elementen angegeben wird, werden diese Elemente in Freigabe Schaltflächen gerendert.If an optional options object is supplied with a list of elements, those elements will be rendered into share buttons.

Festlegen von Standardformular WertenSetting default form values

Optional können Sie die Standardwerte für die folgenden Felder im Formular "freigeben für Teams" festlegen:Optionally, you can choose to set default values for the following fields on the Share to Teams form:

  • Sagen Sie etwas zu diesemmsgText()Say something about this (msgText)
  • Zuordnungsanweisungen (assignInstr)Assignment Instructions (assignInstr)
  • Zuordnungs Titel (assignTitle)Assignment Title (assignTitle)

Beispiel: Standardformular WerteExample: Default form values

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