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: 

1. Accedere al proprio account della piattaforma ShareThis . Se non si dispone di un account ShareThis , registrarsi gratuitamente. qui.
2. Nella directory delle applicazioni, selezionare Pulsanti di condivisione personalizzati. 
3. Selezionare il pulsante Attiva codice in alto a destra. Nel pop-up, cliccare sul pulsante Copia codice .
4. Accedi al tuo sito web HTML.
5. Incolla il codice univoco ShareThis che hai copiato dal punto 3 nel campo dell'intestazione e clicca su Salva.
6. 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"].

6. 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: 

Gli attributi dei dati includono: 

7. 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: