Die aktuelle Seite in Teams teilen

Es ist ja ganz praktisch, wenn ich einen interessanten Artikel, den ich im Netz gefunden habe, auf einfache Art mit etwa meinen Kollegen teilen kann. Falls seine Website haben und diese Funktionalität für Microsoft Teams anbieten wollen, dann geht dieses zum Glück recht einfach.

Öffnen Sie einfach die folgende Website und scrollen Sie nach unten

https://developer.microsoft.com/en-us/microsoft-teams/share-to-teams↗

Wählen Sie zunächst den Button-Stil und konfigurieren Sie einige Einstellungen.

Danach können Sie sich ein “Code-Schnipsel” runterladen, welches Sie einfach an der entsprechenden Stelle ihrer Website platzieren können.

Damit wird der Teilen-Knopf dann auf Ihrer Seite eingefügt. Beim Klick darauf wird Teams dann aus den Metadaten ihrer Website automatisch den Titel, ein Bild und die Beschreibung erzeugen.

Das funktioniert soweit einwandfrei… In den meisten Fällen.

Falls Sie den Teilen-Knopf allerdings dynamisch mittels Javascript einfügen oder wie ich innerhalb einer React-Applikation, dann wird das leider nicht so einfach funktionieren. Glücklicherweise gibt es da aber noch einen anderen Weg.

Das Teilen einer Website in Teams lässt sich nämlich auch dadurch bewerkstelligen, dass der Benutzer eine bestimmte URL von Microsoft aufruft (Das ist das, was das Codeschnipsel im Hintergrund auch tut).

https://teams.microsoft.com/share?href=<URL>&referrer=<Domäne>
// <URL> Die Url zu der zu verlinkenden Seite
// <Domäne> Die "Domäne" ihre Seite. In meinem Fall ist das "365Knoten.de"

Danach kann der Benutzer dann dort die Seite in Teams teilen.

Wenn man dann den Aufruf dieser “Teilen” Seite im Javascript noch mittels “window.open” in einem Popup öffnet, dann kommt man in React zu folgender Implementierung.

	  
        <button
          onClick={()=>{
            window.open(`https://teams.microsoft.com/share?href=${articleurl}&referrer=365Knoten.de`,"In Teams teilen","width=800,height=600,status=yes,scrollbars=yes,resizable=yes");
          }}
          <svg .... ></svg>
        </button>
	

Das funktioniert wunderbar. Probieren Sie es doch gleich unten aus.