"Share to Teams"
This feature enables team sharing on our web site. This feature is very useful and can be used:
- On news pages in my organization's Intranet / Internet applications
- On content pages of an organization's Intranet application
- On my blog sites, which I am going to demonstrate here
Use case
Here, we will discuss how to add/embed "Share to Teams" icon / button
on our articles. That means we all can share articles
within the Teams directly from our sites without switching context. No
need to copy / paste and email or put in chat or IM.
Embedding a Share to Teams button
Add "launcher.js" script on our web page / article / blog as
- <script async defer src="https://teams.microsoft.com/share/launcher.js"></script>
Next, add an HTML element on your webpage with the teams-share-button class attribute and the link to share in the data-href attribute as
- <div
- class="teams-share-button"
- data-href="https://<link-to-be-shared>">
- </div>
Example
Adding "Share to Teams" button on our our c-sharpcorner site as
- <div
- class="teams-share-button"
- data-href="https://c-sharpcorner.com"
- </div>
The above script and code will add the Microsoft Teams icon to your website as
When a user first time clicks on "Teams" icon as shown in the above Fig, a"Sign in to your account" dialog appears as shown in below Fig.
Fig1 : Microsoft Teams - "Sign in" dialog
- Please log in with our Microsoft 365 account, we will be logged in with Teams
- Once we have logged in successfully, "Share to Microsoft Teams" dialog will appear as shown below
Fig2 : Microsoft Teams - Sharing to Teams - "Share to Microsoft Teams" dialog
- Please have a look at above dialog, it has features like below, really cool, no? :)
- Search option for our Team / Channel where we need to share the our content (Web Page / News Article / Content Page)
- Text area - To add note about what we are sharing
- Preview of our content
- Once we have selected Team / Channel, and put the note, the "Share" button at right hand side bottom will enabled.
- Please click on "Share" button. If Sharing with Teams happens successfully we will get following dialog "Share to Microsoft Teams" having success message "Your link has been shared." as shown below.
Fig3 : Microsoft Teams -Sharing to Teams - "Share to Microsoft Teams" dialog - Success message
- Once successful sharing happens from our site / article / blog, we could check this in respective Teams.
- If we shared with the Team or Channel where we are not a member, we get an
error as well as shown in below Fig. Here we have error - "You are no longer a member of that channel or chat"
References
- https://developer.microsoft.com/en-us/microsoft-teams/share-to-teams
- https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/share-to-teams