Come creare pulsanti di condivisione personalizzati
Preferiresti progettare i tuoi pulsanti di condivisione, ma vuoi sfruttare la nostra piattaforma per tenere traccia dell'impegno sociale?
Gli editori spesso progettano i loro pulsanti di condivisione da zero quando vogliono che le icone si allineino meglio con il loro marchio e la tavolozza dei colori o personalizzino le configurazioni dei pulsanti per le diverse pagine. Poi, sfruttano la nostra piattaforma di analisi gratuita per immergersi più a fondo nelle loro pagine principali, nei canali sociali e nei riferimenti sociali.
Alcune cose che si possono fare con i nostri pulsanti di condivisione personalizzati includono:
- Modificate la loro forma e il loro colore utilizzando i CSS in qualsiasi modo vogliate per riflettere il vostro marchio.
- Scrivete il testo che volete sui pulsanti, utile per le call to action personalizzate!
- Visualizzazione di più set/istanze di pulsanti in diverse sezioni della stessa pagina.
Per far sì che gli strumenti di ShareThis funzionino su tuo sito web, seguire i seguenti passi per aggiungere il vostro codice unico ShareThis alla sezione di intestazione di tuo sito web:
- Accedere al proprio account della piattaforma ShareThis . Se non si dispone di un account ShareThis , registrarsi gratuitamente. qui.
- Go to your Profile (top right corner) and select Settings › Setup in the Platform and click Copy code under Copy your head code.
- Accedi al tuo sito web HTML.
- Paste the unique ShareThis code that you copied from step 2 into the <strong><head></strong> of your website and <strong>Save</strong>.
- Create l'HTML e i CSS per i vostri pulsanti di condivisione personalizzati. La configurazione personalizzata dei pulsanti per Facebook e Twitter dovrebbe essere simile a questa:
- 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;
}
Ad esempio, se si vuole cambiare specificamente l'aspetto del pulsante di Facebook, la classe CSS nel file CSS deve essere .st-custom-button[data-network="facebook"].
- Aggiungete attributi di dati al div specifico di ogni canale sociale per specificare cosa volete che faccia il nostro codice di base quando un utente clicca o tocca i vostri bottoni di condivisione.
I canali sociali supportati includono:
| Servizio sociale | rete di dati Codice |
| Le Vite dei Neri Contano | blm |
| Blogger | blogger |
| Buffer | buffer |
| Copia link | copia |
| Diaspora | diaspora |
| Digg | digg |
| Douban | douban |
| Evernote | evernote |
| lavagna a fogli mobili | |
| Gmail | gmail |
| Google Bookmarks | googlebookmarks |
| Notizie Hacker | hackernews |
| Instapaper | Instapaper |
| iOrbix | iorbix |
| Kakao | kakao |
| App Koo | kooapp |
| Line | linea |
| LiveJournal | livejournal |
| Posta.Ru | mailru |
| Meneame | meneame |
| Messaggero | messaggero |
| Odnoklassniki | odnoklassniki |
| Prospettiva | prospettive |
| getpocket | |
| Stampa | stampa |
| Spingi su Kindle | kindleit |
| Qzone | qzone |
| Refind | rifilare |
| Renren | renren |
| Skype | skype |
| Surfingbird | surfingbird |
| Telegram | telegramma |
| Tencent QQ | tencentqq |
| Threema | treema |
| Trello | trello |
| Tumblr | tumblr |
| Viber | viber |
| VK | vk |
| ShareThis | sharethis |
| Sina Weibo | |
| SMS | sms |
| Snapchat | snapchat |
| su WhatsApp | |
| WordPress | wordpress |
| Yahoo Mail | Yahoomail |
| Yummly | Gnammo |
Gli attributi dei dati includono:
| rete dati | Specifica su quale piattaforma sociale il contenuto sarà condiviso |
| data-url | Specifica l'URL (può essere abbreviato) che si desidera condividere |
| data-short-url | Specifica un URL abbreviato che può essere utilizzato in combinazione con l'URL dei dati |
| titolo dati | Specifica il titolo che si desidera condividere (l'oggetto dell'e-mail in alcuni canali e-mail). |
| data-immagine | Specifica il link all'immagine che si desidera visualizzare nel contenuto condiviso. |
| descrizione dei dati | Specifica il testo di riepilogo/descrizione che si desidera condividere |
| nome utente | Specifica il tuo nome utente Twitter |
| messaggio dati | Specifica la copia del corpo delle azioni e-mail |
| data-email-subject | Specifica l'oggetto dell'email |
- Navigate su una pagina del sito tuo sito web (ad es. blog, prodotto, ecc.) e incollate il codice di posizionamento che avete copiato dalla piattaforma ShareThis , ovunque vogliate che appaia lo strumento ShareThis .
Nota
- Se avete bisogno di vedere un esempio funzionante di pulsanti di condivisione personalizzati, potete controllare qui: 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: