Ciao a tutti e benvenuti in questo nuovo post dove vi mostrerò un metodo semplice per creare un pulsante di condivisione social con icona personalizzata.
Molte volte siamo abituati ad usare i vari social plugin come quello di Facebook o Twitter che hanno un’icona propria.
Queste icone standard a volte possono fare a pugni con il design del proprio sito. Da qui nasce il bisogno di creare un’icona personalizzata per il tasto condivisione sociale. Le icone di condivisione che vedete a destra del post sono state create da noi, e funzionano esattamente come le icone dei social plugin.
Un pulsante di condivisione sociale non è altro che un link con dei parametri come url del post e contenuto del post.
Ogni social network ha una struttura del link standard e possiamo sfruttare questo particolare per creare un pulsante di condivisione con icona personalizzata.
Ecco una lista della struttura link dei social media più comuni:
Twitter
http://twitter.com/home?status=[TITLE]+[URL]
Facebook
http://www.facebook.com/share.php?u=[URL]&title=[TITLE]
Linkedin
http://www.linkedin.com/shareArticle?mini=true&url=[URL]&title=[TITLE]&source=[SOURCE/DOMAIN]
Tumblr
http://www.tumblr.com/share?v=3&u=[URL]&t=[TITLE]
Google+
https://plus.google.com/share?url=[URL]
StumbleUpon
http://www.stumbleupon.com/submit?url=[URL]&title=[TITLE]
Come potete vedere ogni link e formato dall’url del sito ed alcuni parametri che andranno sostituiti nell’attributo href del link. I parametri che vanno sostituiti sono:
TITLE: Il testo del post che verrà condiviso dal visitatore quando clicca l’icona di condivisione
URL: l’url del post da condividere
Se immaginiamo di voler creare un’icona personalizzata per la condivisione su Facebook, possiamo prendere un’icona sotto forma di immagine ed inserirla all’interno di un tag <a> .
L’attributo href del tag <a> lo andiamo a prendere dalla lista vista precedentemente che nel nostro caso è:
http://www.facebook.com/share.php?u=[URL]&title=[TITLE]
Se andiamo a sostituire i parametri dell’url dovremmo ottenere un codice del tipo:
<a href="http://www.facebook.com/share.php?u=https://devnews.it&title=Date un’occhiata a questo sito"><img src="icona.png"> </a>
Ora quando un visitatore cliccherà sull’icona, automaticamente si aprirà una finestra per la condivisione del post sul social network scelto.
Se volete che la finestra di condivisione si apri in una nuova finestra potete aggiungere l’attributo target="_blank"
Per creare un’icona personalizzata per gli altri social network si può seguire un processo simile.
Ora sapete come creare un'icona personalizzata per i pulsanti di condivisione dei vostri social network preferiti. Grazie per aver seguito la guide, spero vi sia stato di aiuto. Ci vediamo alla prossima :)
