Création d’un bouton partager avec teams incorporésCreating a Share to Teams embedded button

Notes

  • Seules les versions de bureau Edge et chrome sont prises en charge.Only the desktop versions of Edge and Chrome are supported.
  • L’utilisation de comptes freemium ou invités n’est pas prise en charge.Use of Freemium or guest accounts is not supported.

Les sites Web tiers peuvent utiliser le script de lancement pour incorporer les boutons partager à teams sur leurs pages Web, ce qui lancera l’expérience de partage vers teams dans une fenêtre contextuelle lorsque vous cliquerez dessus.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. Cela vous permettra de partager un lien directement avec une personne ou un canal Microsoft teams sans basculer le contexte.This will allow you to share a link directly to any person or Microsoft Teams channel without switching context.

Partager le menu contextuel teams

Comment incorporer un bouton partager à teamsHow to embed a Share to Teams button

Tout d’abord, vous devez ajouter le launcher.js script sur votre page Web.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>

Ensuite, ajoutez un élément HTML sur votre page Web avec teams-share-button l’attribut Class et le lien à partager dans data-href l’attribut.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>

Cette opération ajoute l’icône Microsoft teams à votre site Web.This will add the Microsoft Teams icon to your website.

Icône partager avec teams

Éventuellement, si vous voulez une taille d’icône différente pour le bouton partager avec Teams, utilisez data-icon-px-size l’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>

Si vous êtes certain que l’aperçu de l’URL de votre lien à partager ne s’affiche pas correctement dans Teams (par exemple, le lien nécessite l’authentification de l’utilisateur), data-preview vous pouvez désactiver falsel’aperçu de l’URL en ajoutant l’attribut défini à.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>

Si votre page affiche le contenu de manière dynamique, vous pouvez utiliser la shareToMicrosoftTeams.renderButtons() méthode pour forcer le rendu du bouton partager à l’emplacement approprié dans le pipeline.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.

Conception de l’aperçu de votre site WebCrafting your website preview

Lorsque votre site Web est partagé avec Teams, la carte insérée dans la chaîne sélectionnée contiendra un aperçu de votre site Web.When your website is shared to Teams, the card that is inserted into the selected channel will contain a preview of your website. Vous pouvez contrôler le comportement de cet aperçu en veillant à ce que les méta-données appropriées soient ajoutées au site Web partagé data-href (URL).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). Le tableau suivant présente les balises nécessaires.The table below outlines the necessary tags. Vous pouvez utiliser les versions par défaut de HTML ou la version d’Open Graph.You can use either the html default versions, or the Open Graph version.

Pour afficher l’aperçu, vous devez :In order for the preview to be displayed you must:

  • Inclure une image miniature, ou les deux, un titre et une description (pour de meilleurs résultats, incluez les trois).Include either a Thumbnail image, or both a Title and Description (for best results, include all three).
  • L’URL partagée ne peut pas exiger l’authentification.The URL being shared cannot require authentication. Si c’est le cas, vous pouvez toujours le partager, mais l’aperçu n’est pas créé.If it does you can still share it, but the preview will not be created.
ValeurValue Balise METAMeta tag Ouvrir un graphiqueOpen Graph
TitreTitle <meta name="title" content="Example Page Title"> <meta property="og:title" content="Example Page Title">
DescriptionDescription <meta name="description" content="Example Page Description"> <meta property="og:description" content="Example Page Description">
Image miniatureThumbnail Image nonenone <meta property="og:image" content="http://example.com/image.jpg">

Partager avec teams pour l’éducationShare to Teams for Education

Pour les enseignants qui utilisent le bouton partager avec teams Create an Assignment, une option supplémentaire est proposée.For teachers using the Share to Teams button you'll be given an additional option to Create an Assignment. Cela vous permet de créer rapidement une affectation dans l’équipe choisie en fonction du lien partagé.This enables you to quickly create an assignment in the chosen Team based on the shared link.

Partager le menu contextuel teams

Définition complète du lanceur. jsFull launcher.js definition

PropriétéProperty Attribut HTMLHTML attribute TypeType Par défautDefault DescriptionDescription
hrefhref data-href stringstring s/on/a Href du contenu à partager.The href of the content to share.
previewpreview data-preview Boolean (sous forme de chaîne)boolean (as a string) true Indique si un aperçu du contenu à partager doit être affiché ou non.Whether or not to show a preview of the content to share.
iconPxSizeiconPxSize data-icon-px-size nombre (sous forme de chaîne)number (as a string) 32 Taille en pixels du bouton partager-à-teams à afficher.The size in pixels of the Share-to-Teams button to render.
msgTextmsgText data-msg-text stringstring s/on/a Texte par défaut à insérer avant le lien dans la zone de composition du message (200 caractères maximum)Default Text to be inserted before the link in the message compose box (200 character limit)
assignInstrassignInstr data-assign-instr stringstring s/on/a Texte par défaut à insérer dans le champ « instructions » des affectations (200 caractères maximum)Default Text to be inserted in the assignments "Instructions" field (200 character limit)
assignTitleassignTitle data-assign-title stringstring s/on/a Texte par défaut à insérer dans le champ affectations « title » (50 caractères maximum)Default Text to be inserted in the assignments "Title" field (50 character limit)

MéthodesMethods

shareToMicrosoftTeams.renderButtons(options)

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

Affiche tous les boutons de partage actuellement sur la page.Renders all share buttons currently on the page. Si un objet options facultatif est fourni avec une liste d’éléments, ces éléments seront rendus dans les boutons de partage.If an optional options object is supplied with a list of elements, those elements will be rendered into share buttons.

Définition des valeurs de formulaire par défautSetting default form values

Vous pouvez également définir des valeurs par défaut pour les champs suivants dans le formulaire partager avec teams :Optionally, you can choose to set default values for the following fields on the Share to Teams form:

  • Signification de ce (msgText)Say something about this (msgText)
  • Instructions d’affectationassignInstr()Assignment Instructions (assignInstr)
  • Titre de l'assignTitleaffectation ()Assignment Title (assignTitle)

Exemple : valeurs de formulaire par défautExample: 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>