為部落格園文章添加 「分享到Teams」按鈕

本文是《Microsoft Teams平台完全手冊》的一部分，有興趣請參考 //teamsplatform.code365.xyz

Microsoft Teams是一個圍繞溝通協作的平台，資訊分享是很重要的。那麼，如果你有一個網站，如何讓你的用戶很容易地將網站內容分享到Teams呢？

下面通過實例講解如何實現這個目的。熟悉我的朋友可能知道，我長期撰寫技術部落格，而部落格園也是我認為中國做的很不錯的部落格平台，默認情況，目前部落格園提供的模板中已經包含了一些分享的能力，包括分享到微博、微信等。下面我嘗試為它添加分享到Teams的功能。

為網站添加「分享到Teams」按鈕

Microsoft Teams提供了一個專門的庫，可以很容易地生成分享按鈕。下面的完整程式碼，請大家參考一下，其實邏輯很簡單，我在現有分享工具欄的前面插入了一個按鈕，並且按照規定定義了有關的屬性。

<!--
    概要：在部落格園的部落格頁面底部增加「分享到Teams」的按鈕
    作者：陳希章
    來源：《Microsoft Teams 平台完全手冊》
    網址：//teamsplatform.code365.xyz
-->
​
<!--引入Teams的分享腳本庫-->
<script
  async
  defer
  src="//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程式碼的。

保存後，打開某個文章，就可以看到下方分享欄會多出來一個Teams的按鈕。

點擊此按鈕，會自動彈出一個對話框，並且把相關文字和鏈接都按照規定組合好，你只需要在「共享到」這個框中搜索團隊或頻道，然後點擊 「共享」按鈕即可。

如果當前沒有登錄Teams，則在顯示分享對話框前會提示用戶登錄。

網頁元數據定義

在分享到Teams時，會嘗試進行網頁的預覽（如上圖所示，通過鏈接可以解析得到標題和內容簡介），以便給用戶更加好的體驗。那麼這個是怎麼實現的呢？

其實這個很簡單的，你的網頁只要按照下面的約定在Head中定義元數據即可。

考慮到對搜索引擎和不同平台的兼容性，我的建議是兩個版本都定義。如果兩者都定義了，Teams會以Open Graph定義的為準。

我們回過頭去看剛才分享的部落格園文章源程式碼

可以看出當前網頁定義了title, description,og:description, 所以在分享時能解析出標題和描述，但沒有定義縮略圖，而且定義標題和內容摘要也不是特別規範。

感謝部落格園提供的平台，以及允許自定義頁面的能力。如果默認能把「分享到Teams」的按鈕加上，並且在網頁元數據這個部分能夠規範一點就更好了。

​

Tags:

VirMach 便宜 VPS