Schaltflächen zum Teilen von Inhalten in sozialen Netzwerken sind heutzutage auf Webseiten üblich.
Viele soziale Netzwerke bieten fertige Codes zum einfügen in die Webseite, jedoch laden diese Lösungen eine Reihe von zusätzlichen Anforderungen und Ressourcen. Dies erhöht die Ladezeit Ihrer Seite und beeinflusst damit das Ranking.
Soziale Netzwerke bieten auch eine Share-URL als Alternative zu den eingebetteten Schaltflächen. Die Verknüpfung mit einigen <a> -Tags ist viel leichter als die eingebettete Lösung. Sie können auch passend zu Ihrem Branding gestaltet werden.
Hier sind die Schaltflächen und alles, was Sie brauchen, um eigene Share-Buttons für Ihre Webseite neu zu erstellen:
Markup und Styling
Die Schaltflächen für die soziale Freigabe können ein einfaches Anchor-Tag sein:
Hinzufügen eines Symbols hat einen schönen Effekt (von materialdesignicons.com):
Hier sind die Basisstile für die oben gezeigten Schaltflächen:
URL Reference
Hier finden Sie eine Liste der bereitgestellten URLs und relevanten Optionen. Es ist besser, nur relevante Share-Buttons zu verwenden, anstatt den Besucher mit jeder Wahl zu bombardieren.
Entwickler haben die Möglichkeit, das Share-Erlebnis anzupassen. Previews werden oft automatisch von der angegebenen URL generiert. Der URL-Abfrageparameter ist für alle Share-URLs außer E-Mail erforderlich:
- url ist die uncodierte URL zum Teilen
https://www.facebook.com/sharer/sharer.php?u={url}
Google+
https://plus.google.com/share?url={url}
https://twitter.com/intent/tweet?url={url}&text={text}&via={via}&hashtags={hashtags}
- text ist der vorgefertigte Text für die Meldung
- hashtags ist eine kommaseparierte Liste der Schlagwörter / Hashtags (“#”)
- via ist der Twitter Benutzername des Authors oder der Seite (ohne “@”)
https://pinterest.com/pin/create/button/?url={url}&description={description}&media={media}
- description ist der Beschreibungstext des Pin
- media ist die unkodierte URL des Pin
https://www.linkedin.com/shareArticle?url={url}&title={title}&source={source}&summary={summary}&mini=true
- title ist die zu teilende Überschrift
- summary ist die zu teilende Beschreibung
- source ist der Seitenname
Tumblr
https://tumblr.com/widgets/share/tool?canonicalUrl={url}&tags={tags}&caption={caption}
- tags ist eine kommaseparierte Liste der Schlagwörter
- caption ist der vorgefertigte Text
https://reddit.com/submit?url={url}&title={title}&resubmit=true
- title ist die zu übertragende Überschrift
Hacker News
https://news.ycombinator.com/submitlink?u={url}&t={title}
- title ist die zu übertragende Überschrift
Designer News
https://www.designernews.co/submit?url={url}&title={title}
- title ist die zu übertragende Überschrift
mailto:?subject={subject}&body={body}
- subject ist der Betreff der vorgefertigten eMail
- body ist der Nachrichtentest der vorgefertigten eMail
Tipps
Die Vorschau, die automatisch generiert wird, hängt stark von den Open Graph-Tags und dem gut strukturierten Inhalt ab. Facebook bietet dieses Vorschau-Tool zum Testen an und stellt sicher, dass diese auf Ihren Seiten richtig eingestellt sind.
Verschlüsseln Sie Ihre Abfrageparameter auf Ihren Jekyll-Sites mit dem cgi_escape-Filter. Der uri_escape-Filter gilt für ganze URLs, also werden einige Zeichen (z. B. „?“) nicht verworfen und die Schaltflächen können beschädigt werden.
Jekyll enthält eine großartige Möglichkeit, SVG-Symbole in Ihren Schaltflächen und dem Rest einer Website wiederzuverwenden.
Wenn Sie Ihre Share-Schaltflächen verfolgen, können Sie feststellen, wie Ihre Besucher mit der Site interagieren und Ihre Ressourcen effektiver konzentrieren. Verfolgen Sie benutzerdefinierte Ereignisse für Klicks auf Ihre Teilen-Schaltflächen mit Google Analytics mithilfe des folgenden Codes:
Bitte teilen Sie uns in den Kommentaren mit, wenn Sie Tipps oder Feedback zum Thema haben!
Kommentar absenden