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:
- Melden Sie sich bei Ihrem ShareThis Plattform-Konto an. Wenn Sie noch kein ShareThis Konto haben, melden Sie sich kostenlos an hier.
- Wählen Sie im Apps-Verzeichnis die Option Benutzerdefinierte Freigabe-Schaltflächen.
- Wählen Sie den Aktivierungscode button in der oberen rechten Ecke. Klicken Sie in dem Pop-up-Fenster auf den Code buttonkopieren .
- Melden Sie sich bei Ihrer HTML-Website an.
- Fügen Sie den eindeutigen Code ShareThis , den Sie in Schritt 3 kopiert haben, in das Kopfzeilenfeld ein und klicken Sie auf Speichern.
- 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:
- 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.
- 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 Dienst | Datennetz Code |
| Schwarze Leben Zählen | blm |
| Blogger | Blogger |
| Buffer | Puffer |
| Link kopieren | kopieren. |
| Diaspora | Diaspora |
| Digg | digg |
| Douban | douban |
| Evernote | evernote |
| Gmail | gmail |
| Google Lesezeichen | googlebookmarks |
| Hacker-Nachrichten | hackernews |
| Instapaper | Instapaper |
| iOrbix | iorbix |
| Kakao | kakao |
| Koo App | kooapp |
| Line | Zeile |
| LiveJournal | Livejournal |
| Mail.Ru | mailru |
| Meneame | Meneame |
| Bote | Bote |
| Odnoklassniki | odnoklassniki |
| Ausblick | Ausblick |
| Interesse | |
| getpocket | |
| Druck | |
| Push-to-Kindle | kindleit |
| Qzone | qzone |
| rötlich | |
| Refind | neu finden |
| Renren | Renren |
| Skype | skype |
| Surfingbird | surfingbird |
| Telegram | Telegramm |
| Tencent QQ | tencentqq |
| Threema | threema |
| Trello | trello |
| Tumblr | Tumblr |
| zwitschern | |
| Viber | viber |
| VK | vk |
| ShareThis | sharethis |
| Sina Weibo | |
| SMS | sms |
| Snapchat | Snapchat |
| WordPress | wordpress |
| Yahoo Mail | yahoomail |
| Yummly | . |
Die Datenattribute umfassen:
| Datennetz | Gibt an, auf welcher sozialen Plattform der Inhalt geteilt werden soll |
| Daten-URL | Gibt die URL (kann verkürzt werden) an, die Sie gemeinsam nutzen möchten. |
| Daten-Short-URL | Gibt eine verkürzte URL an, die in Verbindung mit der Daten-URL verwendet werden kann. |
| Datentitel | Gibt den Titel an, den Sie weitergeben möchten (in einigen E-Mail-Kanälen der Betreff der E-Mail) |
| Datenbild | Gibt einen Link zu einem Bild an, das Sie in den gemeinsamen Inhalten anzeigen möchten |
| Datenbeschreibung | Gibt den Text/Beschreibung der Zusammenfassung an, die Sie freigeben möchten. |
| Daten-Benutzername | Gibt deinen Twitter-Benutzernamen an |
| Datenmeldung | Gibt die Kopie der E-Mail-Freigaben an. |
| data-email-subject | Gibt den Betreff der E-Mail an |
- 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
- Wenn Sie ein funktionierendes Beispiel für benutzerdefinierte Share-Buttons sehen möchten, können Sie es sich hier ansehen: https://codesandbox.io/s/amazing-sun-0rrb2?file=/index.html
- 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: