{"id":5398,"date":"2019-06-27T22:17:23","date_gmt":"2019-06-28T03:17:23","guid":{"rendered":"https:\/\/www.rushworth.us\/lisa\/?p=5398"},"modified":"2019-06-28T08:24:00","modified_gmt":"2019-06-28T13:24:00","slug":"did-you-know-you-can-add-a-share-to-teams-button-to-your-web-content","status":"publish","type":"post","link":"https:\/\/www.rushworth.us\/lisa\/?p=5398","title":{"rendered":"Did you know \u2026 you can add a \u201cShare to Teams\u201d button to your web content?"},"content":{"rendered":"

If you can add script tags to the page head, you can add a \u201cShare to Teams\u201d button on your web site. This can be used to allow employees to share internal sites to Teams, but it can also be used on public sites to allow visitors to post links to their<\/em> Teams organization.<\/p>\n

How? There are two steps \u2013 add \u201c<script async defer src=”https:\/\/teams.microsoft.com\/share\/launcher.js” ><\/script>\u201d in HEAD. The post that is made to Teams is *prettier* if you have\u00a0 meta properties for title, description, and image within the linked page.<\/p>\n

Then add a div with class \u201cteams-share-button\u201d. The \u201cdata-href\u201d value is the URL to be shared. If you don\u2019t<\/em> want a page preview to render, you can set \u201cdata-preview\u201d to false.<\/p>\n

Sample page content:<\/p>\n

<head>\r\n    <title>Teams Share Test<\/title>\r\n    <meta property=\"og:title\" content=\"Lisa Rushworth Home Page\">\r\n    <meta property=\"og:description\" content=\"Lisa Rushworth's Home Page\">\r\n    <meta property=\"og:image\" content=\"https:\/\/www.rushworth.us\/lisa\/RedR.png\" \/>\r\n    <script async defer src=\"https:\/\/teams.microsoft.com\/share\/launcher.js\" ><\/script>\r\n<\/head>\r\n<body bgcolor=\"black\" text=\"white\">\r\n    <div class=\"content\">\r\n        <P>Here is the really cool information contained on this web site. It is so interesting that you want to share it to Teams.<\/P>\r\n        <P>Click the Teams button at the bottom and you'll see a form that allows you to share the URL as a thread in a Teams channel.<\/P>\r\n    <\/div>\r\n    <div class=\"teams-share-button\" data-href=\"https:\/\/www.rushworth.us\/lisa\/teamstest.php\" data-preview=\"true\">\r\n    <\/div>\r\n<\/body>\r\n<\/pre>\n
Visitors will see a small Teams logo in the teams-share-button div. To share the URL in Teams, they just need to click on the Teams logo.<\/p>\n
<\/p>\n
A new window will load. If the user is not logged into the Team web site, they will be prompted to log in. Once logged in, the share dialogue will be displayed. If your site has title, description, and icon meta tags, a preview card will be included at the bottom.<\/p>\n
<\/p>\n
Click in the \u201cShare to\u201d field and type a Team or Channel name \u2013 Teams and Channels from the user\u2019s organization will be displayed.<\/p>\n
<\/p>\n
The user can add text to the thread. Click \u201cShare\u201d to share the link to the selected Teams channel.<\/p>\n
<\/p>\n
A confirmation page will be displayed.<\/p>\n
<\/p>\n
In Teams, a new thread will be created. This is the thread for my shared URL.<\/p>\n
<\/p>\n
The URL used in the teams-share-button DIV doesn’t have to match the page on which it is used — I can add a ‘share to Teams’ button that posts any URL to Teams.<\/p>\n
\"\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
If you can add script tags to the page head, you can add a \u201cShare to Teams\u201d button on your web site. This can be used to allow employees to share internal sites to Teams, but it can also be used on public sites to allow visitors to post links to their Teams organization. How? …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[677],"tags":[666,686,265],"class_list":["post-5398","post","type-post","status-publish","format-standard","hentry","category-office-365","tag-microsoft-teams","tag-ms-teams","tag-office-365"],"_links":{"self":[{"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=\/wp\/v2\/posts\/5398","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5398"}],"version-history":[{"count":4,"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=\/wp\/v2\/posts\/5398\/revisions"}],"predecessor-version":[{"id":5414,"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=\/wp\/v2\/posts\/5398\/revisions\/5414"}],"wp:attachment":[{"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5398"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5398"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}