So erstellen Sie Schritt für Schritt Share-Buttons für Ihre Website

Social Share Buttons sind ein unverzichtbares Element jeder Website. Ob es sich um einen persönlichen oder geschäftlichen Blog, ein Online-Portfolio oder ein E-Commerce-Projekt handelt, Social Buttons ermöglichen es Kunden, Ihre Inhalte auf Facebook, Twitter, Instagram oder Pinterest einfach bekannt zu machen. Durch die Implementierung von einfachen Social Share-Buttons in Ihre Webressource können Sie Ihre Reichweite erheblich erweitern und neue Kunden willkommen heißen, die auf der Suche nach wertvollen Inhalten oder Waren auf Ihre Website kommen. Die Macht der sozialen Netzwerke sollte heutzutage nicht unterschätzt werden. Wenn ein Unternehmen nicht auf Facebook oder Instagram gefunden werden kann, verpasst es eine Gelegenheit, seine Zielgruppe zu erreichen und seine Waren und Dienstleistungen an mehr Menschen zu vermarkten. Wie der Name schon sagt, machen Social-Share-Buttons Ihre Inhalte im Web besser teilbar. Es ist eine gängige Praxis für moderne Benutzer, Links zu ihren bevorzugten Produkten auf ihren Facebook-Seiten zu teilen. Jeder Social Post kann von Followern mit den gleichen Interessen und Vorlieben wie Ihr Kunde erreicht werden.

Darüber hinaus können Sie mit Social-Media-Buttons Ihre Inhalte ganz einfach in Social-Media-Gruppen oder an ausgewählte Personen senden. Die Anzahl der Social-Media-Shares weist auf die Inhalte hin, die die Menschen wertvoller und ansprechender finden. Daher arbeiten viele Marken hart daran, Social-Media-Shares zu vervielfachen und ihre Markenbekanntheit zu steigern.

Die Verbreitung der Nachricht über die bevorzugten Inhalte kann einfach sein, indem Sie einfach ein paar Klicks machen. Social-Buttons ermöglichen es Ihren Kunden, Links zu senden, während sie auf Ihrer Website bleiben. In den meisten Fällen müssen Sie einfach auf die Schaltfläche „Teilen“ tippen und die Social-Media-Plattform auswählen, auf der Ihr Link erscheinen soll.

So erstellen Sie Schritt für Schritt einen Share-Button

Das Internet ist voll von verschiedenen Share-Buttons, die Hauptaufgabe besteht darin, die richtigen auszuwählen. Manchmal versteht man nicht einmal, welche Social Buttons man in seinem eigenen Blog braucht. Manchmal finden Sie keine Schaltflächen mit einem Design, das Ihren Anforderungen entspricht. Manchmal finden Sie keine einfache und coole Möglichkeit, Schaltflächen zum Teilen in Ihrem Blog zu implementieren. Keine Panik! In diesem Artikel zeigen wir Ihnen, wie Sie einige einfache und soziale Share-Buttons erstellen.

Webdesign-Kurse

• Online-Codierungskurse für das Lernen zu Hause
• Komplettes Photoshop Mastery Bundle

Falls Sie sich nicht mit riesigem, überfülltem Code und komplexen Detailanpassungen auseinandersetzen möchten, ist dieses Tutorial genau das Richtige für Sie. Selbst HTML-Neulinge werden es leicht finden, ihm zu folgen. Also, anschnallen und los geht’s!

Schritt 1

Als erstes sollten Sie Ihre HTML-Datei öffnen und den folgenden Code einfügen

<a onclick="Share.facebook('URL','TITLE','IMG_PATH','DESC')"> {sharing is sexy}</a>
<a onclick="Share.twitter('URL','TITLE')"> {sharing is sexy}</a>
oder
<a href="http://www.facebook.com/sharer/sharer.php?s=100&
p%5Btitle%5D=TITLE&p%5Bsummary%5D=DESC&p%5Burl%5D=
URL&p%5Bimages%5D%5B0%5D=IMG_PATH" target="_blank" onclick="return Share.me(this);">{sharing is sexy}</a>
<a href="https://twitter.com/intent/tweet?original_referer=
http%3A%2F%2Ffiddle.jshell.net%2F_display%2F&text=TITLE&url
=URL" target="_blank" onclick="return Share.me(this)">{sharing is sexy}</a>

Schritt 2

Erstellen Sie nun eine js-Datei, die solche Informationen enthält:

Das war's :) Eine sehr einfache Methode, um die Statistik des Klickens auf den Share-Button zu verfolgen, der direkt auf der Sharing-Seite platziert ist. Dieses Problem wurde mit Hilfe einer Tabelle in der Datenbank und einfachem Ajax gelöst:

popup: function(url,soc) {
window.open(url,'','toolbar=0,status=0,width=626, height=436');

}

Dieses Skript erhält eine ID aus der URL, fügt das Label zur Tabelle hinzu und/oder erhöht den Zähler um eins für ein bestimmtes soziales Netzwerk. Es ist eine einfache Lösung für Share-Buttons. Das Aussehen Ihrer Buttons können Sie ganz einfach per CSS verändern, Sie können in Photoshop eigene Buttons entwerfen und hier verwenden. Du kannst fast alles machen!

Natürlich ist dieses Beispiel ein wenig primitiv, aber es ist ein cooler Punkt, um mit der Erstellung Ihrer eigenen coolen Share-Buttons zu beginnen. Probieren Sie es aus!

In beliebten Social-Media-Netzwerken können Sie benutzerdefinierte Codeteile generieren, die wir in Beiträge oder Seiten von Websites einbetten können, damit Benutzer ihre bevorzugten Inhalte verbreiten können. Facebook und Twitter sind zwei der beliebtesten sozialen Netzwerke, die die jeweilige Funktionalität unterstützen. Sehen wir uns an, wie Sie solche Schaltflächen für soziale Netzwerke in Ihre Website integrieren.

So fügen Sie den Facebook-Share-Button hinzu

Mit den Schaltflächen zum Teilen auf Facebook können Ihre Kunden Links teilen, die zu Beiträgen oder Angeboten auf Ihrer Website mit einem individuell geschriebenen Text führen.

Um diese Schaltfläche zu Ihrer Website hinzuzufügen, müssen Sie zuerst zu dieser Seite gehen.

Schauen wir uns nun an, was einige der Felder auf der Einrichtungsseite bedeuten.

• URL zum Liken – dieses Feld fügt die Seite der Website hinzu, die wir auf Facebook teilen möchten.
• Breite - Hier wird die Breite der Schaltfläche eingestellt.
• Verb zum Anzeigen - hier können wir den Text in der Schaltfläche "Gefällt mir" oder "Ich empfehle" auswählen.
• Farbschema - Hier können Sie das Button-Design für helle oder dunkle Seiten auswählen.
• Schriftart – Wählen Sie die Schriftart für die Schaltflächenbeschriftungen aus.

Nachdem wir die Einstellungen ausgewählt haben, finden Sie die Schaltfläche "Get Code" und klicken Sie darauf. Als nächstes wird ein Fenster mit dem Code angezeigt, der ebenfalls in zwei Schritten eingefügt werden muss:

Fügen Sie den Code direkt nach dem Tag <body> ein.

Code zum Anzeigen der Schaltfläche:

Fügen Sie diesen Code dort ein, wo der Button von Facebook angezeigt werden soll:

So fügen Sie die Twitter Share-Schaltfläche hinzu

Beim Hinzufügen von Twitter-Share-Buttons zu Ihrer Website sollten Twitter-Entwickler einige Dinge beachten, die Sie beachten sollten:

• Wenn ein Benutzer nicht bei seinem oder ihrem Twitter-Konto angemeldet ist, wird er aufgefordert, sich anzumelden, um Ihre Nachricht zu twittern.
• Der Tweet wird mit der Webseite verlinkt, die eine Person besucht hat. Ein Benutzer kann die Nachricht des Tweets beliebig anpassen.
• Nachdem Sie auf „Twittern“ geklickt haben, zeigt das Popup-Fenster eine Liste verwandter Konten auf Twitter an. Ein Benutzer kann entscheiden, wohin er ihnen folgt oder sie ignoriert.
• Es gibt keine Begrenzung, wie oft ein und derselbe Benutzer pro Tag etwas an die Timeline twittern kann.

Gehen Sie wie folgt vor, um die Twitter-Freigabeschaltfläche hinzuzufügen:

• Gehen Sie zu publish.twitter.com und tippen Sie auf Twitter Buttons.
• Wählen Sie aus, welche Art von Twitter Share Button Sie Ihrer Website hinzufügen möchten.
• Passe den Tweet und die darin enthaltene Nachricht an, während du erwähnst, welches @account erwähnt werden soll.
• Wenn Sie fertig sind, kopieren Sie den Code und fügen Sie ihn in Ihre Website ein.

Das wars so ziemlich. Wir hoffen, dass Sie diesen Leitfaden hilfreich finden. Das Beste daran ist, dass Sie keine tiefen Programmierkenntnisse haben sollten, um Social Share-Buttons zu Ihrer Website hinzuzufügen. Die automatisierten Code-Generatoren bieten Ihnen sofort einsatzbereite Lösungen, die Sie intuitiv anpassen, kopieren und in den HTML-Code Ihrer Website einfügen können.