Hi All,

Click below TEAMS Icon to share this article on your Teams 🙂 SHARING IS CARING 🙂

LIFE IS BEAUTIFUL 🙂 I hope we all are safe:) STAY SAFE, STAY HEALTHY 🙂 STAY HOME 🙂

Today, I was going through an Microsoft 365 Developer Newsletter – July 2020 which I receives in every month. While reading I found one interesting related to “Share to Teams” button.

So lets begin the show 🙂

“Share to Teams” – Enabling team sharing on our web site. So just point came to my mind – this feature is very useful and can be used.

• On news pages my organization Intranet / Internet applications
• On content pages of organizations 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 my Knowledge-Junction articles. That means you 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 Knowledge Junction site as

<div
  class="teams-share-button"
  data-href="https://knowledge-junction.in"
</div>

• The above script and code will add the Microsoft Teams icon to your website.

• When user first time clicks on “Teams” icon as shown in above Fig, “Sign in to your account” dialog appears as shown in below Fig.

• Please log in with our Microsoft 365 account, we will be logged in with Teams
• Once we logged in successfully, “Share to Microsoft Teams” dialog will appear as shown below in Fig

• 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, “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 in below fig.

• Once successfully sharing happens from our site / article / blog, we could check this in respective Teams.
• Please have a look at following Fig, in my Teams >> General, link to my article appears. Who shared, Link URL, and Preview 🙂 Isn’t really nice 🙂

• If we shared with the Team or Channel where we are not 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“

I have added “Share to Teams” button at the bottom of this article, kindly please click and share this article with your Teams 🙂

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

Thanks for reading 🙂 If its worth at least reading once, kindly please like and share.

Enjoy the beautiful life 🙂 Have a FUN 🙂 HAVE A SAFE LIFE 🙂 TAKE CARE 🙂

Click below TEAMS Icon to share this article on your Teams 🙂 SHARING IS CARING 🙂