Der einfachste (und leistungsfähigste) Weg, Links für die Weitergabe in sozialen Medien anzubieten

Im vergangenen Sommer schrieb ich „The Essential Meta Tags for Social Media“ (Die wichtigsten Meta-Tags für soziale Medien) darüber, wie Entwickler Webseiten so vorbereiten können, dass sie bei der Weitergabe in sozialen Medien optimal erscheinen. Aber wie sieht es mit der Erstellung von Links aus, über die Nutzer diese Webseiten teilen können? Facebook, Twitter und LinkedIn bieten dazu zahlreiche Möglichkeiten, einige davon mit Hilfe von Schaltflächengeneratoren, andere wiederum erfordern externes JavaScript. Um all das zu vermeiden, können Sie jedoch Ihre eigenen Links zum Teilen von Webseiten erstellen. Und das Beste daran ist, dass Sie das ganz einfach selbst tun können. So geht’s.

Grundkonzept: Nur ein Link

Beim Teilen von Webseiten über Links übermitteln Sie im Wesentlichen eine GET-Anfrage (d. h. Sie klicken auf einen Link) an eine URL, die von jedem Social Media-Dienst bereitgestellt wird. Indem Sie dann eine Reihe von Name/Wert-Paaren (Abfrageparameter wie ?title=Title) an das Ende dieser URL anhängen, können Sie die URL der Webseite, die Sie freigeben möchten, und manchmal zusätzliche Informationen angeben.

Nun müssen bestimmte Symbole in GET-Anfragen, die als „reservierte Zeichen“ bekannt sind, richtig kodiert werden, um die normalen Browserfunktionen nicht zu beeinträchtigen. Diese Zeichen unterliegen der „prozentualen Kodierung“, d.h. sie werden in Abfrageparametern mit einem „%“ gefolgt von einem zweistelligen Hex-Code dargestellt. Dies sind die reservierten Zeichen und ihre prozentual kodierten Entsprechungen:

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

Natürlich ist es nicht nötig, diese Hex-Codes auswendig zu lernen. Es gibt viele Quellen, die Umrechnungen anbieten (Bing hat eine in die Suchmaschine eingebaut), und wie Sie bald sehen werden, kann JavaScript auch die schwere Arbeit in dieser Hinsicht übernehmen. Schauen wir uns ein paar der populärsten sozialen Mediendienste an und erfahren wir, wie wir Webseiten über sie freigeben können.

Facebook

Im Leitfaden für Entwickler gibt Facebook die folgende URL an, um GET-Anfragen zu übermitteln, wenn eine Webseite freigegeben wird:

https://www.facebook.com/dialog/share

Es sind zwar vier Abfrageparameter verfügbar, aber nur zwei sind erforderlich: die URL der Webseite, die Sie freigeben möchten, und eine App-ID, die Entwickler erhalten können, indem sie sich bei Facebook registrieren. Wenn Sie keine App-ID haben, ist der Registrierungsprozess nicht lästig, aber es besteht kein Grund, sich die Mühe zu machen, wenn es eine noch einfachere Lösung gibt.

Die ursprüngliche Methode von Facebook, Webseiten ohne die erforderliche App-ID freizugeben, wird in der Dokumentation nicht mehr erwähnt, aber sie wird immer noch unterstützt. Da unzählige Websites diese Methode verwenden, kann ich mir nicht vorstellen, dass sie in nächster Zeit veraltet sein wird. Diese URL lautet:

https://www.facebook.com/sharer.php

Der einzige verfügbare Parameter ist „u“, der verwendet wird, um die URL der Webseite anzugeben, die Sie freigeben möchten. Hier ein Beispiel, bei dem die Homepage von CSS-Tricks auf Facebook geteilt wird – schneiden Sie es aus und fügen Sie es in einen Browser ein, um das Ergebnis zu sehen:

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

Wie bereits erläutert, ist die geteilte URL notwendigerweise prozentual kodiert. Beachten Sie auch, dass „?“ den Anfang des ersten Abfrageparameters kennzeichnet. Nachfolgende Abfrageparameter werden durch „&“ getrennt, wie wir gleich sehen werden.

Twitter

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

https://twitter.com/intent/tweet

Im Gegensatz zu Facebook, wo nur die zu teilende Webseite angegeben werden kann, können Sie bei Twitter einen Text und eine beliebige Anzahl von Hashtags anhängen. Die Nutzer haben die Möglichkeit, all dies vor dem Tweeten zu bearbeiten, aber es verschafft ihnen einen Vorsprung, falls sie sich nicht die Mühe machen können. Nehmen wir zum Beispiel an, Sie möchten die folgenden Informationen twittern:

Die URL dafür, mit den Abfrageparametern prozentual kodiert und Zeilenumbrüchen zur besseren Übersichtlichkeit hinzugefügt, lautet:

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 ergibt:

Sie werden feststellen, dass Twitter den Text vorselektiert, was eine einfache Bearbeitung durch den Nutzer ermöglicht. Und denken Sie daran, dass der Tweet weniger als 140 Zeichen lang sein muss, also geben Sie am besten keinen zu langen Text ein. Der Einfachheit halber habe ich darauf verzichtet, auf drei weniger häufig verwendete Parameter einzugehen, die in der Entwicklerdokumentation von Twitter ausführlich beschrieben sind. Mit diesen zusätzlichen Parametern können Sie den mit dem Tweet verbundenen Benutzernamen, vorgeschlagene verwandte Benutzernamen und eine ID eines verwandten Tweets angeben.

LinkedIn

Die URL für das Teilen auf LinkedIn lautet:

https://www.linkedin.com/shareArticle

Insgesamt stehen fünf Parameter zur Verfügung, die in dieser Tabelle aus der Dokumentation für Entwickler von LinkedIn aufgeführt sind:

Neben der URL der Webseite, die Sie freigeben möchten, ist ein weiterer Abfrageparameter namens „mini“ erforderlich. Wie Sie sehen können, ändert sich sein Wert nie, so dass wir ihn in die URL fest einfügen können. Lassen Sie uns zur Veranschaulichung die folgende Seite auf LinkedIn teilen:

Das ergibt die folgende URL – auch hier wurden Zeilenumbrüche zur Verdeutlichung hinzugefügt:

https://www.linkedin.com/shareArticle?mini=true&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

Auch wenn dies in der Dokumentation nicht explizit erwähnt wird, holt LinkedIn diesen Inhalt aus dem Open Graph-Tag <meta property="og:title"> der freigegebenen Seite, wenn der Parameter „title“ weggelassen wird. Wenn der Parameter „summary“ weggelassen wird, wird das Open Graph-Tag <meta property="og:description"> verwendet. Was den Parameter „source“ betrifft, so ist in der Dokumentation nichts darüber zu finden, wie dieser Wert beim Teilen einer Webseite verwendet oder angezeigt wird – es sieht so aus, als könne er getrost ignoriert werden.

Wenn die Webseite, die geteilt werden soll, die richtigen Open-Graph-Tags hat, reicht es aus, die URL anzugeben, da die Parameter „title“ und „summary“ entsprechend ausgefüllt werden.

Putting It All Together

Nun, da wir die Syntax kennen, die beim Teilen von Webseiten in sozialen Medien zu verwenden ist, wie genau können wir diesen Code umsetzen? Die wohl gängigste Methode ist die Auflistung einer Gruppe von Freigabelinks, die mit CSS entsprechend gestaltet sind:

<ul> <li><a href="https://www.facebook.com/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/shareArticle?..." target="blank" rel="noopener noreferrer"><img src="linkedin-icon.png" alt="Share Page on LinkedIn" /></a></li></ul>

Durch das Hinzufügen von target="_blank" im Anker-Tag kann der Freigabe-Dialog in einem neuen Fenster oder einer neuen Registerkarte angezeigt werden, was auf allen Geräten, vom Desktop bis zum Mobiltelefon, gut funktioniert.

Die harte Codierung dieser Links mit der prozentualen Codierung der Abfrageparameter kann jedoch mühsam und fehleranfällig sein. Für jede Webseite, die dynamisch von einem CMS bedient wird, wäre dies die perfekte Gelegenheit, diese Datenverarbeitung auf der Serverseite durchzuführen und dort in das HTML einzufügen, wo sie benötigt wird.

Eine andere Möglichkeit ist die Verwendung des Social Media Sharing: HTML Links Generator, den ich auf CodePen erstellt habe. Damit können Sie einen oder alle der notwendigen Parameter eingeben, die wir gerade besprochen haben, und es wird das entsprechende HTML ausgegeben, das Sie in Ihren eigenen Code einfügen können.

Siehe den Pen Social Media Sharing: HTML Links Generator by Adam Coti (@adamcoti) on CodePen.

Als freiberuflicher Webentwickler, der fast ausschließlich im Frontend arbeitet, habe ich mich dafür entschieden, JavaScript/jQuery-Funktionen zu verwenden, die ohne Anpassung als schlüsselfertige Lösung für meine Projekte funktionieren. Auf diese Weise kann ich sicher sein, dass alle Freigabelinks ordnungsgemäß gehandhabt werden, unabhängig davon, ob ich an einer statischen Website arbeite, WordPress-Themes anpasse oder Vorlagen zur Integration in ein CMS übergebe.

Das ist das HTML, das ich verwende, mit Klassen, die den jeweiligen Freigabedienst bezeichnen. Im JavaScript wird die Funktion setShareLinks(), die click-Ereignisse an die Freigabe-Schaltflächen 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").attr("content")); jQuery(".social-share.facebook").on("click", function() { url = "https://www.facebook.com/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 lässt sich leicht durch Auslesen einer Eigenschaft des document-Objekts ermitteln. Und für Twitter liefert das Open Graph-Tag <meta property="og:description"> bequem den passenden Inhalt für einen Standard-Tweet.

Auf Wunsch einiger meiner Kunden öffne ich nun die neu gebildete URL in einem besonders großen sekundären (Pop-up-)Fenster, indem ich window.open() verwende. Bei den meisten Desktop-Browsern wird dieses Fenster horizontal und vertikal mittig auf dem Bildschirm positioniert. Interessanterweise passen Facebook und LinkedIn die Größe dieses sekundären Fensters an die erforderlichen Maße an, wenn der Nutzer bei seinem Social-Media-Konto angemeldet ist. Twitter tut dies nicht, daher verwende ich eine Standardbreite und -höhe, die ausreichend Platz bietet. Was die Reaktionsfähigkeit angeht, so interpretieren Tablets und mobile Geräte das zweite Fenster als neue Registerkarte. Eine Demo dieser Funktionalität finden Sie auf CodePen.

Siehe den Pen Social Media Sharing: Automated Link Creator von Adam Coti (@adamcoti) auf CodePen.

Aber die Verwendung eines Pop-up-Fensters, die früher üblich war, ist heute aus Gründen der Barrierefreiheit verpönt. Eine einfache Lösung besteht darin, die Variable params im obigen JavaScript auf eine leere Zeichenfolge zu setzen. Dadurch wird die URL in einem neuen Fenster oder einer neuen Registerkarte geöffnet, je nach Browsereinstellung des Benutzers.

Fazit

Wie das grausame Sprichwort sagt, gibt es viele Wege, eine Katze zu häuten. Die obige Technik ist einfach meine bevorzugte Methode. Vielleicht haben Sie eine bessere, optimierte Methode. Vielleicht können Sie Datenattribute im HTML-Code verwenden (z. B. zur Angabe von Hashtags), die von JavaScript gelesen und bei Bedarf als Abfrageparameter angefügt werden können. Hoffentlich kann dies zumindest als Anregung für Ihre eigene Implementierung dienen.