Hai bisogno di condividere i tuoi post su Facebook, Twitter, Google+, Linkedin, Pinterest o Whatsapp, ma non vuoi utilizzare quelle scomode e lunghe funzioni fornite dai vari Social? Con questa piccola guida ti spieghiamo come fare, senza utilizzare le API specifiche.
Diamo per scontata la conoscenza dei linguaggi HTML e CSS, anche se minima.
Per ogni social media network basta generare un link specifico, alla quale successivamente si passano i valori che vogliamo pubblicare.
Per la condivisione su Facebook bisogna usare il seguente link http://www.facebook.com/sharer.php?u=[URL_FULL]
dove a [URL_FULL]
bisogna sostituire l’indirizzo completo della pagina da condividere.
La condivisione su Twitter, invece ci permette di passare più valori: http://twitter.com/share?text=$[TITLE]&url=[URL_FULL]&hashtags=[HASHTAG]
, infatti possiamo dare un titolo ([TITLE]
), passare l’indirizzo completo della pagina ([URL_FULL]
) e inserire degli hashtags separati da una virgola ([HASTAG]
).
La condivisione Pinterest permette di creare un Pin usando http://pinterest.com/pin/create/button/?url=[URL_FULL]&description=[DESCRIPTION]
. Qui, oltre a fornire l’indirizzo della pagina da condividere, si può anche passare una descrizione della stessa ([DESCRIPTION]
).
Per la condivisione su Google+ invece si usa: https://plus.google.com/share?url=[URL_FULL]
al quale è sufficiente passare l’indirizzo completo.
La condivisione Linkedin ci permette una personalizzazione maggiore: https://www.linkedin.com/shareArticle?mini=true&url=[URL_FULL]&title=[TITLE]&source=[SITE_NAME]
; infatti oltre a passare l’indirizzo completo della pagina ([URL_FULL]
), si può assegnare un titolo ([TITLE]
) e passare il nome del sito ([SITE_NAME]
).
Per la condivisione su WhatsApp invece, possiamo usare il link whatsapp://send?&text=[TITLE] [URL_FULL]
passando quindi il titolo della pagina ([TITLE]
) o un testo a scelta, e l’indirizzo della stessa ([URL_FULL]
).
Per la rappresentazione grafica, abbiamo scelto di utilizzare le icone in vettoriale fornite da Font Awesome.
In basso potete trovare uno script completo simile a quello che utilizziamo sui nostri siti web.
É necessario, per far funzionare le icone, includere nella head della tua pagina il seguente stile: https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css
per utilizzare le icone in vettoriale.
Ecco il codice HTML:
<div id="socialSharing"> <a href="http://www.facebook.com/sharer.php?u=[URL_FULL]"> <span id="facebook" class="fa-stack fa-lg"> <i class="fa fa-facebook fa-stack-1x"></i> </span> </a> <a href="http://twitter.com/share?text=[TITLE]&url=[URL_FULL]&hashtags=[HASTAG]"> <span id="twitter" class="fa-stack fa-lg"> <i class="fa fa-twitter fa-stack-1x"></i> </span> </a> <a href="http://pinterest.com/pin/create/button/?url=[URL_FULL]&description=[TITLE]" class="pin-it-button" count-layout="horizontal"> <span id="pinterest" class="fa-stack fa-lg"> <i class="fa fa-pinterest-p fa-stack-1x"></i> </span> </a> <a href="https://plus.google.com/share?url=[URL_FULL]"> <span id="googleplus" class="fa-stack fa-lg"> <i class="fa fa-google-plus fa-stack-1x"></i> </span> </a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=[URL_FULL]&title=[TITLE]&source=[SITE_NAME]"> <span id="linkedin" class="fa-stack fa-lg"> <i class="fa fa-linkedin fa-stack-1x"></i> </span> </a> <a href="whatsapp://send?&text=[TITLE] [URL_FULL]" data-action="share/whatsapp/share"> <span id="whatsapp" class="fa-stack fa-lg"> <i class="fa fa-whatsapp fa-stack-1x"></i> </span> </a> </div>
Il codice CSS:
div#socialSharing a span.fa-lg { border-radius: 50%; margin: 1%; color: #FFFFFF; } div#socialSharing a span.fa-lg i { font-style: normal; } div#socialSharing a span#facebook { background-color: #3b5998; } div#socialSharing a span#facebook:hover { background-color: #133783; } div#socialSharing a span#twitter { background-color: #1da1f2; } div#socialSharing a span#twitter:hover { background-color: #2582bb; } div#socialSharing a span#pinterest { background-color: #bd081c; } div#socialSharing a span#pinterest:hover { background-color: #880e1c; } div#socialSharing a span#googleplus { background-color: #db4437; } div#socialSharing a span#googleplus:hover { background-color: #cf1808; } div#socialSharing a span#linkedin { background-color: #0077b5; } div#socialSharing a span#linkedin:hover { background-color: #02689d; } div#socialSharing a span#whatsapp { background-color: #00E676; } div#socialSharing a span#whatsapp:hover { background-color: #03c164; }
Consigliamo di far visualizzare la condivisione WhatsApp solo nei terminali mobili.
Se vuoi vedere come abbiamo sviluppato la condivisione per i nostri clienti, visita il sito di Gallura Disinfestazioni oppure di Renney and Co.
Ti ricordiamo che per avere una completa personalizzazione anche dei post, bisogna inserire nel codice HTML le varie Open Graph tags, che spiegheremo nei prossimi post.
Iscriviti alla nostra newsletter o seguici sui nostri Social Network per restare aggiornato sulle nostre nuove guide.
Condividi questo articolo