Crear un botón Compartir en Teams

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 for Education.

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-

Elemento emergente de Teams compartir a Teams

Insertar un recurso compartido en Teams botón

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

    <script async defer src="https://teams.microsoft.com/share/launcher.js"></script>
    
  2. 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. En la siguiente imagen se muestra el icono Compartir a Teams:

    Compartir a Teams icono

  3. 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>
    
  4. Si el vínculo compartido requiere autenticación de usuario y la vista previa de la 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>
    
  5. Si la página representa contenido dinámicamente, puede usar el método para forzar que el botón Compartir se represente 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
Title <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.

Compartir a Teams para Educación

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:

Compartir con Teams educación emergente

Definición launcher.js completa

Propiedad Atributo HTML Tipo Predeterminado Descripción
href data-href cadena 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 cadena 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 cadena No aplicable Texto predeterminado que se insertará en el campo asignaciones "Instrucciones". El número máximo de caracteres es 200.
assignTitle data-assign-title cadena No aplicable Texto predeterminado que se 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