Microsoft Teams - Adding "Share To Teams" Embedded Button On The Site / Articles / Intranet

"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