Inserire Pulsanti Social Personali Senza Rallentamenti

Come Inserire i Pulsanti Social

Per inserire i pulsanti social dei vari Social Network sul tuo sito web è sufficiente cercare su un qualsiasi motore di ricerca il nome del Social Network seguito dalla parola share button, in questo modo:

#Nome Socialshare button

Ora seleziona il primo risultato e ti troverai davanti le pagine dei vari Social Network che ti spiegheranno come inserire il loro pulsante nel tuo sito e in alcuni casi ti permetteranno anche di personalizzare in parte il loro pulsante, ti faranno decidere ad esempio se vorrai far visualizzare il numero di condivisioni o di Mi Piace.

Tuttavia questo è il metodo classico per inserire i pulsanti dei Social Network e presenta due grossi problemi:

  1. Rallentail caricamento della pagina
  2. Nonsi può personalizzare il pulsante

Calcoliamo il Rallentamento dei Pulsanti Social

Questo è il problema più grosso dei due, dopo aver finito di creare un sito ho constatato un caricamento decisamente lungo di alcune pagine del sito, analizzando il traffico del sito tramite il GT Metrix ho notato molte connessioni tra il mio sito ed alcuni siti del tipo fb.share.com e indirizzi simili che richiedevano un tempo d’attesa di circa mezzo secondo l’uno.

rallentamenti facebook

Capisci bene che se ogni pulsante ha bisogno di 2 connessioni da mezzo secondo l’una per caricarsi (e mi sto tenendo basso) allora la pagina si rallenterebbe di 1 secondo per ogni pulsante che andresti ad inserire, quindi andando ad inserire 3 pulsanti dei Social Network rallenteresti ogni pagina di 3 secondi che si andrebbero ad aggiungere ai tempi di caricamento della pagina per un totale di 5, 6, 7 secondi.

Troppi a parere mio, non so a te, ma a me non piace affatto aspettare 7 secondi prima che si carichi una pagina per poterla leggere e sinceramente della condivisione sui Social Network non mi importa tantissimo.

Tuttavia questo strumento di condivisione può essere un ottimo metodo per farsi conoscere, quindi più avanti ti spiegherò un metodo per evitare questi rallentamenti senza rinunciare ai pulsanti dei Social.

Quanto sono Personalizzabili i Pulsanti dei Social?

I pulsanti dei Social Network stanno diventando con il tempo sempre più personalizzabili, potrai scegliere se far visualizzare o meno il numero di condivisioni o di Mi Piace, se far visualizzare questo numero di lato oppure sopra, se utilizzare un pulsante normalegrande o piccolo.

Tuttavia il bottone di base in genere rimane invariato nella grafica e se ad esempio possiedi un sito con lo sfondo blu e vorresti inserire il pulsante di Facebook, probabilmente i tuoi visitatori avranno qualche problema nel notare quel pulsante.

Un’altra cosa che potrebbe non piacerti è che i vari pulsanti non si intonano tra di loro, uno rosso, uno blu, uno azzurro, e così via.. Ma ecco che appare una soluzione, i pulsanti personalizzati, tutti dello stesso colore se lo desideri e soprattutto: Nello stile che vuoi tu!

Come Personalizzare i Pulsanti dei Social Network

Partiamo dal fatto che per condividere un link ti basterà andare sui seguenti indirizzi:

  • http://www.facebook.com/share.php?u=www.DonaWin.it&title=Diario di un Aspirante Freelancer
  • https://plus.google.com/share?url=www.DonaWin.it
  • http://twitter.com/home?status=Diario di un Aspirante Freelancer+www.DonaWin.it

Quindi cosa dovrai fare per far condividere i tuoi contenuti ai visitatori? Dovrai semplicemente inserire questi link su delle immagini a piacere.

Per semplificarti la ricerca delle icone ti indico questo sito web che contiene una grande varietà di icone per i social: FreePik

social icons gratis

A questo punto dovrai scaricare il set di pulsanti per i Social che più preferisci e caricarle sul tuo sito.

Fatto ciò non dovrai far altro che inserire i link che ti ho indicato sopra sulle immagini dei pulsanti Social che hai caricato sul tuo sito, ovviamente dovrai modificare gli indirizzi nel codice per far si che gli utenti condividano il tuo sito e non il mio.. :-)

<a href=”http://www.facebook.com/share.php?u=#www.DonaWin.it#&title=#Diario di un Aspirante Freelancer#” alt=”Condividi su Facebook” target=”_blank”><img src=”#images/facebook.png#“></a>

Ti ho messo in grassetto e contrassegnato con gli asterischi (#) i valori che dovrai andare a modificare per inserire l’indirizzo del tuo sito, il suo nome e l’indirizzo del pulsante che hai caricato. PS: il target=’_blank’ serve per far aprire la pagina in una nuova scheda/finestra mentre l’alt=”Condividi su Facebook” è il messaggio che apparirà quando il visitatore punterà il mouse sul pulsante.

Rendere Automatico l’Url Corrente

Per automatizzare l’aggiornamento dell’url da condividere avrai necessità di conoscere le regole base del PHP.

Quindi per prelevare l’url in cui si trova l’utente utilizzerai il comando:

$url = “http://”.$_SERVER[‘HTTP_HOST’].$_SERVER[‘REQUEST_URI’];

Dopodicchè ti basterà inserire la variabile $url al posto dell’url, in questo caso puoi evitare di inserire il title in quanto i vari social network provvederanno da soli a recuperare il titolo della pagina corrente.

Un esempio PHP completo potrebbe essere questo..

<?php

$url=”http://”.$_SERVER[‘HTTP_HOST’].$_SERVER[‘REQUEST_URI’];

<a href=’http://www.facebook.com/share.php?u=$url‘ alt=’Condividi su Facebook’ target=’_blank’><img src=’images/facebook.png’></a>
<a href=’https://plus.google.com/share?url=$url‘ alt=’Condividi su Google +’ target=’_blank’><img src=’images/google.png’></a>
<a href=’http://twitter.com/home?status=$url‘ alt=’Condividi su Twitter’ target=’_blank’><img src=’images/twitter.png’></a>

?>

Se hai domande, sono disposto ad aiutarti.. In tal caso, lasciami un commento 😉

 

email

4 commenti

  1. Ciao Luigi. Ho trovato molto interessante il tuo articolo. A tal proposito, vorrrei sottoporre delle considerazioni.

    Normalmente sui social network si condividono le pagine singole di un sito, ma considerato che nel tempo potrei rimuovere tante pagine, ho optato per una condivisione dell’intero sito sui social network puntanto i link dedicati direttamente alla root del sito stesso. Cosa ne pensi, è corretto?

    Con questa impostazione è necessario inserire anche i meta tag Open Graph? Se si, come si dovrebbero configurare considerato che il mio sito contiene pagine con foto e testo, pagine con testo e senza foto e pagine solo con foto (miniature di gallerie)

    Ti ringrazio anticipatamente per la considerazione.

    1. Ciao Giuseppe,
      innanzitutto grazie, mi fa piacere che ti sia piaciuto l’articolo. :)
      Allora, per quanto riguarda l’Open Graph, no.. Non è necessario, forse potrebbe migliorare le cose, ma sinceramente non ho mai approfondito a riguardo.. Non lo trovo un argomento rilevante in ambito SEO ed in ambito User Friendly, comunque sia approfondisci magari visto che non conosco a fondo questa ‘opzione’.
      Per quanto riguarda invece il discorso della condivisione della root/homepage piuttosto che della pagina interessata, sarebbe una tecnica completamente errata per svariati motivi:
      1) Il visitatore che è interessato ad un tuo articolo trovandosi nella homepage potrebbe non riuscire a trovare l’articolo oppure potrebbe sentirsi preso in giro oppure potrebbe essere un articolo vecchiotto e quindi non più visibile in homepage.. In tutti e tre i casi abbandonerebbe la pagina.
      2) I motori di ricerca negli ultimi anni stanno prendendo molto in considerazione i Social Network, controllando ogni post quanti mi piace riceve, quanti utenti condividono il post e quindi da quel posto loro prenderanno il link ed aumenteranno il valore di quella pagina in base ai mi piace, alle condivisioni ed ai click, se tu gli dai la root come link questi aumenteranno soltanto il punteggio della home ed i tuoi articoli/gallerie non prenderebbero mai valore nelle classifiche interne dei motori di ricerca..!

      PS: Nelle gallerie foto puoi sempre utilizzare i tag alt per descrivere in sintesi la fotografia.. Questo equivale a contenuto.. 😉

Lascia un Commento