Compartilhar no Teams a partir de aplicativos Web

Sites de terceiros podem usar o script do inicializador para inserir botões Compartilhar no Teams em suas páginas da Web. Quando seleciona o botão Partilhar no Teams, este inicia a experiência Partilhar no Teams numa janela de pop-up. Isso permite que você compartilhe um link diretamente com qualquer pessoa ou canal do Microsoft Teams sem alternar o contexto.

A imagem seguinte apresenta a janela de pop-up da experiência de pré-visualização Partilhar no Teams:

Observação

• Apenas são suportadas as versões de ambiente de trabalho do Microsoft Edge e do Google Chrome.
• Não há suporte para o uso de contas de convidado ou Freemium.

Também pode adicionar a desfraldamento de ligações para as ligações partilhadas através do botão Partilhar no Teams alojado na aplicação Web, na aplicação pessoal ou no separador. Para obter mais informações, consulte o artigo Desfraldamento de ligações.

A imagem seguinte apresenta a experiência de desfraldamento da ligação através do botão Partilhar no Teams:

Este artigo orienta-o sobre como criar e incorporar um botão Partilhar no Teams para o seu site, criar a pré-visualização do seu site e expandir a funcionalidade Partilhar para o Teams para Educação.

Veja o seguinte vídeo para saber como incorporar o botão Partilhar no Teams:

Incorpore um botão Compartilhar no Teams

1. Adicione o script launcher.js em sua página da Web.

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

2. Adicione um elemento HTML em sua página da Web com o atributo de classe teams-share-button e o link para compartilhar no atributo data-href.

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

   Depois de concluir este procedimento, o ícone do Teams é adicionado ao seu site. A imagem a seguir mostra o ícone Compartilhar no Teams:

   

3. Em alternativa, se quiser um tamanho de ícone diferente para o botão Partilhar no Teams, utilize o data-icon-px-size atributo .

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

4. Se a ligação partilhada exigir a autenticação do utilizador e a pré-visualização do URL da ligação a ser partilhada não for composta corretamente no Teams, pode desativar a pré-visualização do URL ao adicionar o data-preview atributo definido como false.

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

5. Para apresentar uma mensagem à sua escolha na caixa de composição, pode definir o seu texto no data-msg-text atributo .

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

6. Se sua página renderizar dinamicamente o conteúdo, você poderá usar o método shareToMicrosoftTeams.renderButtons() para forçar a opção Compartilhar a renderizar no local apropriado do pipeline.

Crie a visualização do seu site

Quando seu site é compartilhado no Teams, o cartão inserido no canal selecionado contém uma visualização do seu site. Você pode controlar o comportamento dessa visualização garantindo que os metadados apropriados sejam adicionados ao site que está sendo compartilhado, como a URL data-href.

Para mostrar a visualização:

• Você deve incluir uma Imagem em miniatura ou um Título e uma Descrição. Para ter melhores resultados, inclua todos os três.
• O URL partilhado não requer autenticação. Se precisar de autenticação, pode partilhá-la, mas a pré-visualização não é criada.

A tabela a seguir descreve as marcas necessárias:

Valor	Marca Meta	Open Graph
Cargo	<meta name="title" content="Example Page Title">	<meta property="og:title" content="Example Page Title">
Descrição	<meta name="description" content="Example Page Description">	<meta property="og:description" content="Example Page Description">
Imagem em Miniatura	nenhuma.	<meta property="og:image" content="http://example.com/image.jpg">

Você pode usar as versões padrão HTML ou a versão Open Graph.

Compartilhar no Teams para Educação

Para professores que utilizam o botão Partilhar no Teams, existe uma opção adicional que Create an Assignment lhe permite criar rapidamente uma tarefa na Equipa escolhida, com base na ligação partilhada. A imagem a seguir exibe a opção Compartilhar no Teams para Educação:

Definição completa do launcher.js

Propriedade	Atributo HTML	Tipo	Padrão	Descrição
href	data-href	string	n/d	A href do conteúdo a ser compartilhado.
visualização	data-preview	Booliano (como uma cadeia de caracteres)	true	Se deseja ou não mostrar uma visualização do conteúdo a ser compartilhado.
iconPxSize	data-icon-px-size	número (como uma cadeia de caracteres)	32	O tamanho em pixels do botão Compartilhar no Teams a ser renderizado.
msgText	data-msg-text	cadeia de caracteres	n/d	Texto padrão a ser inserido antes do link na caixa de composição da mensagem. O número máximo de caracteres é 200.
assignInstr	data-assign-instr	string	n/d	Texto padrão a ser inserido no campo "Instruções" das tarefas. O número máximo de caracteres é 200.
assignTitle	data-assign-title	string	n/d	Texto padrão a ser inserido no campo "Título" das tarefas. O número máximo de caracteres é 50.

Methods

shareToMicrosoftTeams.renderButtons(options)

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

Todos os botões de partilha são compostos na página. Se um objeto opcional options for fornecido com uma lista de elementos, esses elementos serão renderizados em botões de compartilhamento.

Definir valores de formulário padrão

Você pode optar por definir valores padrão para os seguintes campos no formulário Compartilhar no Teams:

• Diga algo sobre isso: msgText
• Instruções da Tarefa: assignInstr
• Título da Tarefa: assignTitle

Exemplo

Os valores de formulário padrão são fornecidos no exemplo a seguir:

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

Confira também

• Integrar aplicativos Web
• Compartilhar com o Teams a partir do aplicativo ou guia pessoal