Erstellen von benutzerdefinierten Teilen Buttons

Würden Sie es vorziehen, Ihre eigenen Share-Buttons zu entwerfen, möchten aber unsere Plattform nutzen, um das soziale Engagement zu verfolgen? 

Publisher entwerfen ihre Share-Buttons oft von Grund auf neu, wenn sie die Icons besser auf ihre Marke und Farbpalette abstimmen oder die button Konfigurationen für verschiedene Seiten anpassen möchten. Dann nutzen sie unsere kostenlose Analyseplattform, um tiefer in ihre Top-Seiten, sozialen Kanäle und Social Referrals einzutauchen.

Mit unseren benutzerdefinierten Share Buttons können Sie unter anderem Folgendes tun:

  • Ändern Sie Form und Farbe mit CSS nach Belieben, um Ihre Marke widerzuspiegeln.
  • Schreiben Sie einen beliebigen Text auf die Schaltflächen, nützlich für benutzerdefinierte Call-to-Actions!
  • Anzeige mehrerer Sets/Instanzen von Schaltflächen in verschiedenen Abschnitten derselben Seite.

Damit ShareThis tools auf Ihrer Website funktioniert, führen Sie die folgenden Schritte aus, um Ihren eindeutigen ShareThis Code in den Kopfbereich Ihrer Website einzufügen: 

  1. Melden Sie sich bei Ihrem ShareThis Plattform-Konto an. Wenn Sie noch kein ShareThis Konto haben, melden Sie sich kostenlos an hier.
  2. Wählen Sie im Apps-Verzeichnis die Option Benutzerdefinierte Freigabe-Schaltflächen
  3. Wählen Sie den Aktivierungscode button in der oberen rechten Ecke. Klicken Sie in dem Pop-up-Fenster auf den Code buttonkopieren .
  4. Melden Sie sich bei Ihrer HTML-Website an.
  5. Fügen Sie den eindeutigen Code ShareThis , den Sie in Schritt 3 kopiert haben, in das Kopfzeilenfeld ein und klicken Sie auf Speichern.
  6. Erstellen Sie das HTML und CSS für Ihre benutzerdefinierten Freigabe-Schaltflächen. Die benutzerdefinierte Einrichtung von button für Facebook und Twitter sollte ähnlich wie diese aussehen:  
  • HTML: 

share
tweet

  • CSS: 

.st-custom-button[data-network] {
background-color: #0ADEFF;
display: inline-block;
padding: 5px 10px;
cursor: pointer;
font-weight: bold;
color: #fff;
}
.st-custom-button[data-network]:hover,
.st-custom-button[data-network]:focus {
text-decoration: none;
background-color: #00C7FF;
}

Wenn Sie zum Beispiel das Aussehen von Facebook button ändern möchten, sollte die CSS-Klasse in Ihrer CSS-Datei .st-custom-button[data-network="facebook"]lauten.

  1. Fügen Sie Datenattribute zu dem div hinzu, die für jeden sozialen Kanal spezifisch sind, um festzulegen, was unser Kerncode tun soll, wenn ein Benutzer auf Ihre Freigabe-Schaltflächen klickt oder tippt. 

Unterstützte soziale Kanäle umfassen: 

Sozialer DienstDatennetz Code
Schwarze Leben Zählenblm
BloggerBlogger
BufferPuffer
Link kopierenkopieren.
DiasporaDiaspora
Diggdigg
Doubandouban
E-MailE-Mail
Evernoteevernote
FacebookFacebook
FlipboardFlipboard
Gmailgmail
Google Lesezeichengooglebookmarks
Hacker-Nachrichtenhackernews
InstapaperInstapaper
iOrbixiorbix
Kakaokakao
Koo Appkooapp
LineZeile
Linkedinlinkedin
LiveJournalLivejournal
Mail.Rumailru
MeneameMeneame
BoteBote
Odnoklassnikiodnoklassniki
AusblickAusblick
PinterestInteresse
Pocketgetpocket
DruckenDruck
Push-to-Kindlekindleit
Qzoneqzone
Redditrötlich
Refindneu finden
RenrenRenren
Skypeskype
Surfingbirdsurfingbird
TelegramTelegramm
Tencent QQtencentqq
Threemathreema
Trellotrello
TumblrTumblr
Twitterzwitschern
Viberviber
VKvk
WeChatwechat
ShareThissharethis
Sina Weiboweibo
SMSsms
SnapchatSnapchat
WhatsAppwhatsapp
WordPresswordpress
Xingxing
Yahoo Mailyahoomail
Yummly.

Die Datenattribute umfassen: 

DatennetzGibt an, auf welcher sozialen Plattform der Inhalt geteilt werden soll
Daten-URLGibt die URL (kann verkürzt werden) an, die Sie gemeinsam nutzen möchten.
Daten-Short-URLGibt eine verkürzte URL an, die in Verbindung mit der Daten-URL verwendet werden kann.
DatentitelGibt den Titel an, den Sie weitergeben möchten (in einigen E-Mail-Kanälen der Betreff der E-Mail)
DatenbildGibt einen Link zu einem Bild an, das Sie in den gemeinsamen Inhalten anzeigen möchten
DatenbeschreibungGibt den Text/Beschreibung der Zusammenfassung an, die Sie freigeben möchten.
Daten-BenutzernameGibt deinen Twitter-Benutzernamen an
DatenmeldungGibt die Kopie der E-Mail-Freigaben an.
data-email-subjectGibt den Betreff der E-Mail an
  1. Navigieren Sie zu einer Seite auf Ihrer Website (z. B. Blog, Produkt usw.) und fügen Sie den Platzierungscode, den Sie von der Plattform ShareThis kopiert haben, dort ein, wo das Tool ShareThis erscheinen soll.

Hinweis

  • ShareThis will look for the <div> code of the buttons along with its data attributes and ShareThis classes on your website’s code, so if you have a custom icon or image you want to set for the buttons, you will have to wrap it inside the <div> mentioned above, like this:
  • One way to display the share count for each social platform is adding a span code with the <em>count</em> class<em><strong> </strong></em><strong><em>inside</em></strong> the <div> code for the buttons: