Crear un botón Compartir en Teams

Artículo
11/18/2021
Tiempo de lectura: 3 minutos

Los sitios web de terceros pueden usar el script del iniciador para insertar botones de share-to-Teams en sus páginas web. Cuando selecciona, inicia la experiencia compartir a Teams en una ventana emergente. Esto le permite compartir un vínculo directamente con cualquier persona o canal Microsoft Teams sin cambiar el contexto. Este documento le guía sobre cómo crear e insertar un botón Compartir a Teams para su sitio web, crear la vista previa del sitio web y ampliar Share-to-Teams para Educación.

Nota

Solo se admiten las versiones de escritorio de Edge y Chrome.
No se admite el uso de freemium o cuentas de invitado.

En la siguiente imagen se muestra la experiencia Teams emergente de Share-to-

Agregue el launcher.js script en la página web.

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

Agregue un elemento HTML en la página web con el atributo teams-share-button class y el vínculo para compartir en el data-href atributo.
```
<div
  class="teams-share-button"
  data-href="https://<link-to-be-shared>">
</div>
```
Después de completar esto, el Microsoft Teams se agrega al sitio web. La siguiente imagen muestra el icono Compartir a Teams:
Como alternativa, si desea un tamaño de icono diferente para el botón Compartir a Teams, use el data-icon-px-size atributo.
```
<div
  class="teams-share-button"
  data-href="https://<link-to-be-shared>"
  data-icon-px-size="64">
</div>
```
Si el vínculo compartido requiere autenticación de usuario y la vista previa de dirección URL del vínculo que se va a compartir no se representa correctamente en Teams, puede deshabilitar la vista previa de la dirección URL agregando el atributo establecido en data-preview false .
```
<div
  class="teams-share-button"
  data-href="https://<link-to-be-shared>"
  data-preview="false">
</div>
```
Si la página representa contenido dinámicamente, puede usar el método para forzar a Share a representarse en el shareToMicrosoftTeams.renderButtons() lugar adecuado de la canalización.

Crear una vista previa del sitio web

Cuando el sitio web se comparte Teams, la tarjeta que se inserta en el canal seleccionado contiene una vista previa del sitio web. Puedes controlar el comportamiento de esta vista previa asegurando que los metadatos adecuados se agregan al sitio web que se comparte, como la data-href dirección URL.

Para mostrar la vista previa

Debe incluir una imagen en miniatura o un título y una descripción. Para obtener los mejores resultados, incluya los tres.
La dirección URL compartida no requiere autenticación. Si requiere autenticación, puede compartirla, pero no se crea la vista previa.

En la tabla siguiente se describen las etiquetas necesarias:

Valor	Etiqueta meta	Abra Graph
Título	`<meta name="title" content="Example Page Title">`	`<meta property="og:title" content="Example Page Title">`
Descripción	`<meta name="description" content="Example Page Description">`	`<meta property="og:description" content="Example Page Description">`
Imagen en miniatura	ninguno.	`<meta property="og:image" content="http://example.com/image.jpg">`

Puede usar las versiones predeterminadas html o la versión Graph html.

Para los profesores que usan el botón Compartir Teams, hay una opción adicional para Create an Assignment . Esto le permite crear rápidamente una asignación en el equipo elegido, en función del vínculo compartido. En la siguiente imagen se muestra Share-to-Teams para educación:

Definición launcher.js completa

Propiedad	Atributo HTML	Tipo	Predeterminado	Descripción
href	`data-href`	cadenas	No aplicable	Href del contenido que se debe compartir.
preview	`data-preview`	boolean (como una cadena)	`true`	Mostrar o no una vista previa del contenido que se va a compartir.
iconPxSize	`data-icon-px-size`	número (como una cadena)	`32`	Tamaño en píxeles del botón Compartir a Teams que se representará.
msgText	`data-msg-text`	cadenas	No aplicable	Texto predeterminado que se va a insertar antes del vínculo en el cuadro de redacción del mensaje. El número máximo de caracteres es 200.
assignInstr	`data-assign-instr`	cadenas	No aplicable	Texto predeterminado que se va a insertar en el campo de asignaciones "Instrucciones". El número máximo de caracteres es 200.
assignTitle	`data-assign-title`	cadenas	No aplicable	Texto predeterminado que se va a insertar en el campo asignaciones "Título". El número máximo de caracteres es 50.

Métodos

shareToMicrosoftTeams.renderButtons(options)

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

Actualmente, todos los botones de recurso compartido se representan en la página. Si se proporciona options un objeto opcional con una lista de elementos, estos elementos se representan en botones de uso compartido.

Establecer valores de formulario predeterminados

Puede seleccionar para establecer los valores predeterminados de los siguientes campos en el formulario Compartir Teams formulario:

Diga algo al respecto: msgText
Instrucciones de asignación: assignInstr
Título de asignación: assignTitle

Ejemplo

Los valores de formulario predeterminados se dan en el siguiente ejemplo:

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

Consulte también

Integrar aplicaciones web

Valore su experiencia

Insertar un recurso compartido en Teams botón