为你的网站添加“分享到Teams”按钮

Microsoft Teams是一个围绕沟通协作的平台，信息分享是很重要的。那么，如果你有一个网站，如何让你的用户很容易地将网站内容分享到Teams呢？

下面通过实例讲解如何实现这个目的。熟悉我的朋友可能知道，我长期撰写技术博客，而博客园也是我认为中国做的很不错的博客平台，默认情况，目前博客园提供的模板中已经包含了一些分享的能力，包括分享到微博、微信等。下面我尝试为它添加分享到Teams的功能。

为网站添加“分享到Teams”按钮

Microsoft Teams提供了一个专门的库，可以很容易地生成分享按钮。下面的完整代码，请大家参考一下，其实逻辑很简单，我在现有分享工具栏的前面插入了一个按钮，并且按照规定定义了有关的属性。

<!--
    概要：在博客园的博客页面底部增加“分享到Teams”的按钮
    作者：陈希章
    来源：《Microsoft Teams 平台完全手册》
    网址：https://teamsplatform.xizhang.com
-->

<!--引入Teams的分享脚本库-->
<script
  async
  defer
  src="https://teams.microsoft.com/share/launcher.js"
></script>
<!--定义合适的样式-->
<style>
  .divblock {
    padding: 10px;
    border: #c0c0c0 1px dashed;
    display: table-cell;
    vertical-align: middle;
  }
</style>
<!--在页面的合适位置放置这个按钮-->
<script>
  document.getElementById("green_channel").setAttribute("class", "divblock");

  let sharebutton = document.createElement("div");
  sharebutton.id = "green_channel_teams";
  <!--这个属性很重要，决定了分享时提供给Teams的网页链接-->
  sharebutton.setAttribute("data-href", window.location.href);
  <!--这个按钮必须至少有teams-share-button 这个样式 -->
  sharebutton.setAttribute("class", "divblock teams-share-button");
  <!--你可以通过属性设置分享的一些辅助文字说明-->
  sharebutton.setAttribute("data-msg-text", "分享好文章："+ document.title +" <br />  ");
  document
    .getElementById("blog_post_info")
    .insertBefore(sharebutton, document.getElementById("green_channel"));
  shareToMicrosoftTeams.renderButtons();
  document
    .getElementById("green_channel_teams")
    .getElementsByTagName("img")[0].style.marginTop = "10px";
</script>

现在可以把这段代码添加到我的博客后台设置中，请注意要添加到 “博客侧边栏公告” 这个区域，只有这里是允许JS代码的。