Der einfachste (und performanteste) Weg, um Social-Media-Sharing-Links anzubieten

Letzten Sommer schrieb ich The Essential Meta Tags for Social Media darüber, wie Entwickler Webseiten vorbereiten können, um deren Darstellung zu optimieren, wenn sie in sozialen Medien geteilt werden. Aber wie sieht es mit dem Erstellen der Links aus, die es Nutzern ermöglichen, diese Webseiten zu teilen? Facebook, Twitter und LinkedIn bieten zahlreiche Möglichkeiten, dies zu tun, einige mit Button-Generatoren und andere, die externes JavaScript erfordern. Um all das zu vermeiden, können Sie jedoch eigene Links zum Teilen von Webseiten erstellen. Und das Beste daran ist, dass es einfach selbst zu machen ist. Hier ist, wie.

Grundlegendes Konzept: Nur ein Link

Wenn Sie Webseiten über Links teilen, senden Sie im Wesentlichen eine GET-Anfrage (d. h. klicken auf einen Link) an eine URL, die von jedem Social-Media-Dienst bereitgestellt wird. Dann können Sie durch Anhängen einer Reihe von Schlüsselwertpaaren (Abfrageparameter wie ?title=Titel) an das Ende dieser URL die URL der zu teilenden Webseite und manchmal auch zusätzliche Informationen angeben.

Bestimmte Symbole in GET-Anfragen, die als „reservierte Zeichen“ bekannt sind, müssen ordnungsgemäß kodiert werden, damit sie die normalen Browserfunktionen nicht beeinträchtigen. Diese Zeichen unterliegen der „Prozentkodierung“ – das heißt, sie werden in Abfrageparametern mit einem „%“ gefolgt von einem zweistelligen Hex-Code dargestellt. Dies sind die reservierten Zeichen und ihre prozentkodierten Entsprechungen.

!	#	$	&	‚	(	)	*	+
%21	%23	%24	%26	%27	%28	%29	%2A	%2B

,	/	:	;	=	?	@	[	]
%2C	%2F	%3A	%3B	%3D	%3F	%40	%5B	%5D

Hinweis: Ein Leerzeichen kann durch „%20“ oder „+“ dargestellt werden.

Natürlich müssen Sie sich diese Hex-Codes nicht merken. Es gibt viele Ressourcen, die Konvertierungen anbieten (Bing hat eine direkt in die Suchmaschine integriert) und, wie Sie bald sehen werden, kann JavaScript auch die Hauptarbeit in dieser Hinsicht leisten. Sehen wir uns einige der beliebteren Social-Media-Dienste an und erfahren wir, wie wir Webseiten über sie teilen können.

Facebook

Laut ihrer Entwickler-Dokumentation gibt Facebook die folgende URL an, um GET-Anfragen beim Teilen einer Webseite einzureichen

https://#/dialog/share

Obwohl vier Abfrageparameter verfügbar sind, sind nur zwei erforderlich: die URL der zu teilenden Webseite und eine App-ID, die Entwickler durch Registrierung bei Facebook erhalten können. Wenn Sie keine App-ID haben, ist der Registrierungsprozess nicht mühsam, aber es lohnt sich nicht, sich damit zu befassen, wenn es eine noch einfachere Lösung gibt.

Facebooks ursprüngliche Methode zum Teilen von Webseiten, ohne die erforderliche App-ID, wird in keiner ihrer Dokumentationen mehr erwähnt, aber sie wird immer noch unterstützt. Tatsächlich kann ich mir angesichts der unzähligen Webseiten, die diese Methode verwenden, nicht vorstellen, dass sie bald veraltet sein wird. Diese URL ist

https://#/sharer.php

Der einzige verfügbare Parameter ist „u“, der zur Angabe der URL der zu teilenden Webseite verwendet wird. Hier ist ein Beispiel, das die Startseite von CSS-Tricks auf Facebook teilt – fügen Sie es ruhig in einen Browser ein, um das Ergebnis zu sehen.

https://#/sharer.php?u=http%3A%2F%2Fcss-tricks.com%2F

Wie bereits erklärt, wird die geteilte URL zwangsläufig prozentkodiert. Beachten Sie auch, wie „?“ den Beginn des ersten Abfrageparameters kennzeichnet. Nachfolgende Abfrageparameter werden durch „&“ getrennt, wie bald ersichtlich sein wird.

Twitter

Twitter bezeichnet das Teilen einer Webseite über eine URL als Tweet Web Intent – die zu verwendende URL ist

https://twitter.com/intent/tweet

Im Gegensatz zu Facebook, wo nur die zu teilende Webseite angegeben werden kann, ermöglicht Twitter das Anhängen von Text und beliebig vielen Hashtags. Benutzer haben die Möglichkeit, all dies vor dem Tweeten zu bearbeiten, aber es gibt ihnen einen Vorsprung, falls sie sich nicht darum kümmern können. Sagen wir zum Beispiel, Sie möchten die folgenden Informationen twittern

Parameter	Wert
url	https://openvpn-client.megasupersecretplace.com:5757/
text	Tipps, Tricks und Techniken zur Verwendung von Cascading Style Sheets.
Hashtags	css html

Die URL dafür, mit prozentkodierten Abfrageparametern und zur besseren Lesbarkeit hinzugefügten Zeilenumbrüchen, ist

https://twitter.com/intent/tweet
?url=http%3A%2F%2Fcss-tricks.com%2F
&text=Tips%2C+Tricks%2C+and+Techniques+on+using+Cascading+Style+Sheets.
&hashtags=css,html

Und das gibt Ihnen

Sie werden feststellen, dass Twitter den Text vorauswählt, was eine einfache Bearbeitung durch den Benutzer ermöglicht. Und denken Sie daran, dass der Tweet weniger als 140 Zeichen lang sein muss, also liefern Sie am besten keinen zu langen Text mit. Der Einfachheit halber habe ich die Diskussion von drei weniger gebräuchlichen Parametern ausgelassen, die Sie im Detail unter Twitter’s Developers Documentation finden. Diese zusätzlichen Parameter ermöglichen es Ihnen, den mit dem Tweet verknüpften Benutzernamen, vorgeschlagene verwandte Benutzernamen und eine ID eines verwandten Tweets anzugeben.

LinkedIn

Die zu verwendende URL zum Teilen auf LinkedIn ist

https://www.linkedin.com/sharing/share-offsite/?url=https://css-tricks.de

Insgesamt stehen fünf Parameter zur Verfügung, wie diese Tabelle aus der Entwicklerdokumentation von LinkedIn zeigt

Parameter	Beschreibung	Maximale Länge	Erforderlich
url	Die URL-kodierte URL der Seite, die Sie teilen möchten.	1024	Ja
mini	Ein obligatorisches Argument, dessen Wert immer sein muss: true	4	Ja
Titel	Der URL-kodierte Titelwert, den Sie verwenden möchten.	200	Nein
summary	Die URL-kodierte Beschreibung, die Sie verwenden möchten.	256	Nein
Quelle	Die URL-kodierte Quelle des Inhalts (z. B. Ihr Website- oder Anwendungsname)	200	Nein

Zusätzlich zur URL der zu teilenden Webseite ist ein weiterer Abfrageparameter namens „mini“ erforderlich. Aber, wie Sie sehen können, ändert sich sein Wert nie, sodass wir ihn in die URL einbetten können. Zur Demonstration teilen wir Folgendes auf LinkedIn

Parameter	Wert
url	https://css-tricks.de/
Titel	CSS-Tricks
summary	Tipps, Tricks und Techniken zur Verwendung von Cascading Style Sheets.
Quelle	CSS-Tricks

Dies ergibt die folgende URL – auch hier zur besseren Lesbarkeit mit Zeilenumbrüchen

https://www.linkedin.com/shareArticle
?url=https%3A%2F%2Fwww.css-tricks.com%2F
&title=CSS-Tricks
&summary=Tips%2C+Tricks%2C+and+Techniques+on+using+Cascading+Style+Sheets.
&source=CSS-Tricks

Obwohl nicht explizit in ihrer Dokumentation erwähnt, wenn der Parameter „title“ weggelassen wird, holt LinkedIn diesen Inhalt aus dem Open Graph-Tag  <meta property="og:title"> der geteilten Seite. Ebenso wird, wenn der Parameter „summary“ weggelassen wird, der Open Graph-Tag <meta property="og:description"> verwendet. Was den Parameter „source“ betrifft, so gibt die Dokumentation keine Auskunft darüber, wie dieser Wert beim Teilen einer Webseite verwendet oder angezeigt wird – er kann scheinbar sicher ignoriert werden.

Wenn Sie all dies wissen und die zu teilende Webseite über die entsprechende Ergänzung von Open Graph-Tags verfügt, genügt die einfache Angabe der URL, da die Parameter „title“ und „summary“ entsprechend gefüllt werden.

Alles zusammenführen

Nachdem wir nun die Syntax kennen, die beim Teilen von Webseiten in sozialen Medien verwendet wird, wie können wir diesen Code genau implementieren? Die vielleicht gebräuchlichste Methode ist einfach, eine Gruppe von Sharing-Links aufzulisten, die mit CSS entsprechend gestylt sind

<ul>
  <li><a href="https://#/sharer.php?..." target="blank" rel="noopener noreferrer"><img src="facebook-icon.png" alt="Share Page on Facebook" /></a></li>
  <li><a href="https://twitter.com/intent/tweet?..." target="blank" rel="noopener noreferrer"><img src="twitter-icon.png" alt="Share Page on Twitter" /></a></li>
  <li><a href="https://www.linkedin.com/sharing/share-offsite/?..." target="blank" rel="noopener noreferrer"><img src="linkedin-icon.png" alt="Share Page on LinkedIn" /></a></li>
</ul>

Das Hinzufügen von target="_blank" im Anker-Tag ermöglicht es dem Sharing-Dialog, in einem neuen Fenster oder Tab zu erscheinen, was auf allen Geräten gut funktioniert, von Desktops bis zu Mobilgeräten.

Aber das manuelle Festlegen dieser Links mit der Prozentkodierung der Abfrageparameter kann mühsam und fehleranfällig sein. Für jede Webseite, die dynamisch von einem CMS bereitgestellt wird, wäre dies die perfekte Gelegenheit, diese Daten serverseitig verarbeiten zu lassen und dort einzufügen, wo sie im HTML benötigt werden.

Eine weitere Option ist die Verwendung des Social Media Sharing: HTML Links Generator, den ich auf CodePen erstellt habe. Dieser ermöglicht es Ihnen, alle oder einige der erforderlichen Parameter, die wir gerade besprochen haben, einzugeben, und er gibt Ihnen den entsprechenden HTML-Code aus, den Sie in Ihren eigenen Code einfügen können.

Als freiberuflicher Webentwickler, der fast ausschließlich im Frontend arbeitet, habe ich mich für JavaScript/jQuery-Funktionalität entschieden, die ohne Anpassung als schlüsselfertige Lösung für meine Projekte funktioniert. So kann ich sicher sein, dass alle Sharing-Links ordnungsgemäß behandelt werden, egal ob ich an einer statischen Webseite arbeite, WordPress-Themes anpasse oder Vorlagen zur Integration in ein CMS übergebe.

Dies ist das HTML, das ich verwende, mit Klassen, die den jeweiligen Sharing-Dienst bezeichnen. Im JavaScript wird die Funktion setShareLinks(), die Klick-Ereignisse an die Share-Buttons anhängt, aufgerufen, wenn das Document Object Model (DOM) bereit ist

<ul>
  <li class="social-share facebook"><img src="facebook-icon.png" alt="Share Page on Facebook" /></li>
  <li class="social-share twitter"><img src="twitter-icon.png" alt="Share Page on Twitter" /></li>
  <li class="social-share linkedin"><img src="linkedin-icon.png" alt="Share Page on LinkedIn" /></li>
</ul>

function socialWindow(url) {
    var left = (screen.width - 570) / 2;
    var top = (screen.height - 570) / 2;
    var params = "menubar=no,toolbar=no,status=no,width=570,height=570,top=" + top + ",left=" + left;
    window.open(url,"NewWindow",params);
}

function setShareLinks() {
    var pageUrl = encodeURIComponent(document.URL);
    var tweet = encodeURIComponent(jQuery("meta[property='og:description']").attr("content"));
    
    jQuery(".social-share.facebook").on("click", function() {
        url = "https://#/sharer.php?u=" + pageUrl;
        socialWindow(url);
    });

    jQuery(".social-share.twitter").on("click", function() {
        url = "https://twitter.com/intent/tweet?url=" + pageUrl + "&text=" + tweet;
        socialWindow(url);
    });

    jQuery(".social-share.linkedin").on("click", function() {
        url = "https://www.linkedin.com/shareArticle?mini=true&url=" + pageUrl;
        socialWindow(url);
    })
}

Die URL der aktuellen Webseite ist leicht durch Lesen einer Eigenschaft des document-Objekts erhältlich. Und für Twitter liefert der Open Graph-Tag <meta property="og:description"> bequem geeigneten Inhalt für einen Standard-Tweet.

Nun, auf Wunsch einiger meiner Kunden, öffne ich die neu erstellte URL in einem speziell dimensionierten sekundären (Pop-up-)Fenster mit window.open(). Auf den meisten Desktop-Browsern ist dieses Fenster horizontal und vertikal auf dem Bildschirm zentriert. Interessanterweise passen Facebook und LinkedIn dieses sekundäre Fenster, wenn ein Benutzer bei seinem Social-Media-Konto angemeldet ist, automatisch an die notwendigen Abmessungen an. Twitter tut dies nicht, daher verwende ich eine Standardbreite und -höhe, die ihm genügend Platz bietet. Was die Responsivität betrifft, interpretieren Tablets und Mobilgeräte das sekundäre Fenster als neuen Tab. Eine Demo dieser Funktionalität finden Sie auf CodePen.

Die Verwendung eines Pop-up-Fensters ist zwar einst üblich, wird aber aus Barrierefreiheitsgründen inzwischen missbilligt. Eine einfache Lösung besteht darin, die Variable params im obigen JavaScript auf eine leere Zeichenkette zu setzen. Dies öffnet die URL in einem neuen Fenster oder Tab, je nach Browsereinstellung des Benutzers.

Fazit

Wie das schaurige Sprichwort sagt, gibt es viele Wege, eine Katze zu häuten. Die obige Technik ist einfach meine bevorzugte Methode. Sie haben vielleicht eine bessere, optimiertere Methode. Vielleicht die Verwendung von Data-Attributen im HTML (um zum Beispiel Hashtags anzugeben), die von JavaScript gelesen und als Abfrageparameter angehängt werden können, wo benötigt. Hoffentlich kann dies zumindest als Inspiration für Ihre eigene Implementierung dienen.