在网站上分享嵌入一个Teams 按钮

备注

仅支持桌面版本的 Edge 和 Chrome。
不支持使用 Freemium 或来宾帐户。

这将允许您在不切换上下文的情况下直接与任何人或 Microsoft 团队频道共享链接。

在网站上分享嵌入一个Teams 按钮

如何向团队按钮中嵌入共享

首先，你需要在你的网页launcher.js上添加脚本。

复制

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

接下来，使用teams-share-button class 属性和要在data-href属性中共享的链接，在您的网页上添加一个 HTML 元素。

复制

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

这将向您的网站添加 Microsoft 团队图标。

在网站上分享嵌入一个Teams 按钮

data-icon-px-size使用属性。

复制

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

如果您知道要共享的链接中的 URL 预览，团队中的呈现效果不好（例如，链接需要用户身份验证）您可以通过将data-preview属性设置为来false禁用 url 预览。

复制

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

编制网站预览

您可以使用 html 默认版本或打开的图形版本。

为了显示预览，必须执行以下操作：

包含缩略图图像，或同时包含标题和说明（若要获得最佳结果，请包含这三个图像）。
如果仍可以共享，则不会创建预览。

编制网站预览
值	Meta 标记	打开图形
标题	`<meta name="title" content="Example Page Title">`	`<meta property="og:title" content="Example Page Title">`
说明	`<meta name="description" content="Example Page Description">`	`<meta property="og:description" content="Example Page Description">`
缩略图图像	无	`<meta property="og:image" content="http://example.com/image.jpg">`

共享到教育版团队

这使您可以基于共享链接快速创建所选团队中的工作分配。

在网站上分享嵌入一个Teams 按钮

完整的启动程序 .js 定义

完整的启动程序 .JS 定义
属性	HTML 属性	类型	默认值	说明
href	`data-href`	string	无	要共享的内容的 href。
preview	`data-preview`	boolean （以字符串形式）	`true`	是否显示要共享的内容的预览。
iconPxSize	`data-icon-px-size`	数字（以字符串形式）	`32`
msgText	`data-msg-text`	string	无	在邮件撰写框中的链接前插入的默认文本（200字符限制）
assignInstr	`data-assign-instr`	string	无
assignTitle	`data-assign-title`	string	无

方法

shareToMicrosoftTeams.renderButtons(options)

options（可选）：{ elements?: HTMLElement[] }

设置默认的窗体值

说出有关此的msgText内容（）
赋值说明（assignInstr）
工作分配标题assignTitle（）

示例：默认表单值

复制

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