Rimuovere il brand dalla barra di condivisione di SumoMe

SumoMe Share: La Guida Coccolosa per Rimuovere il Badge

Quell’icona grossa, blu, ingombrante. È proprio necessaria?

Sì, potrebbe. Questo dipende da cosa abbiamo bisogno.

Quel pulsante ha una doppia funzionalità:

  • Mostrare altri servizi di condivisione;
  • Pubblicizzare SumoMe.

Guardiamo questa situazione.

Barra di condivisione di SumoMe

In questo caso abbiamo messo in evidenza tre soli pulsanti di condivisione.

Cosa succede se l’utente clicca sulla corona di SumoMe?

Menu di selezione servizi di social share di SumoMe

Esatto. Gli comparirà un bel menù in cui potrà selezionare ulteriori servizi di condivisione.

La lista è veramente lunga, e non comprende solo social networks.

Quindi, può essere una cosa utile, ed effettivamente lo è.

Allora, qual è il problema?
Perché fare tante storie?

Vediamolo subito.

3 Motivi per Rimuovere il Logo SumoMe da Share

Il motivo principale può essere molto semplice: non ci piace :-).

Oltre a questo, ci sono dei motivi da considerare. Analizziamo la situazione.

È Ambiguo

Cosa significa una corona? Che sono forse il re?

Non c’è niente che suggerisce all’utente che cliccando su quel tasto, avrà ulteriori scelte.

Perché non utilizzare, invece, un’icona che mi suggerisce il vero messaggio?

È Ingombrante

Dimensioni e stile lo rende alla pari degli altri pulsanti di condivisione.

In questo modo l’utente può credere che quella corona sia il logo di un non so quale social network.

Avere questo pulsante, quindi può significare anche:

  • Sacrificare spazio per un altro eventuale pulsante;
  • Avere inquinamento visivo, di certo non voluto.

Distrae il Lettore

Come conseguenza di questi due punti visti poco fa, abbiamo una distrazione generale.

“E cos’è questo coso? Ma che è, un altro social network? Che faccio, ci clicco? Dai, vediamo. Ah no, ma io non avevo fretta? Oddio, dove sono arrivato a leggere? Di che parla questo articolo? Mi sono perso. Che giorno è oggi? Chi sono io? Ho voglia di pasta col tonno”.

Noi vogliamo evitare tutto questo.

Qual è la Soluzione?

In realtà ce ne sono due:

  • Sostituire l’icona con una a piacere;
  • Rimuoverla spietatamente.

Per la prima, possiamo agire via CSS per togliere la visibilità dell’immagine, e poi riempire il contenitore con la nostra immagine a scelta; oppure possiamo crearci uno script che modifica direttamente l’indirizzo dell’icona.

In questo articolo seguiremo la seconda via, ovvero rimuoveremo tranquillamente l’icona.

Perché? La risposta è semplice.

Non vogliamo dare all’utente troppe opzioni.

Vogliamo dare al lettore solo le opzioni che decidiamo noi.

Bene. Come facciamo?

Ci stiamo arrivando.

Un attimo: prima di arrivare al dunque, che ne dici di lasciarmi un +1 o condividere l’articolo?
In questo modo mi comunichi che stai apprezzando questa guida gratuita, e mi aiuterai a diffonderla verso persone proprio come te.

Grazie mille, continuiamo 🙂

Come Funziona SumoMe?

Come sai, SumoMe è un SaaS che ci mette a disposizione un pannello, che serve a farci selezionare tutte le opzioni selezionabili.

In teoria, il nostro controllo si limita alle opzioni disponibili nel pannello.

Beh, non è del tutto vero.

Non dobbiamo dimenticarci che possiamo controllare il front-end 🙂

Per capire questo, dobbiamo dare un’occhiata al funzionamento di SumoMe.

  1. Abbiamo installato lo script (unico) di SumoMe nelle pagine del nostro sito;
  2. Dal pannello di SumoMe abbiamo abilitato e configurato i servizi;
  3. Il nostro script interagisce con SumoMe e carica tutti gli altri script e stili necessari.

Bene. A questo punto, è chiaro che:

  • Non possiamo modificare gli script di SumoMe;
  • Non possiamo modificare il markup di SumoMe.

Ma c’è una cosa semplice semplice che possiamo fare: modificare ciò che viene renderizzato dopo.

Rimuovere (finalmente) il Logo di SumoMe da Share

Diamo un’occhiata al markup della barra di condivisione (che può cambiare a seconda delle tue impostazioni):

Sorgente della barra di condivisione di SumoMe

Ciò che ci interessa della struttura è che è sempre simile a:

<div class="sumome-share-client-wrapper sumome-share-client-wrapper-left-page sumome-share-client-counts sumome-share-client-light sumome-share-client-medium">
    <a title="Facebook" class="sumome-share-client-animated sumome-share-client-share">
        <img src="//.../facebook.png>
    </a>
    <a title="Twitter" class="sumome-share-client-animated sumome-share-client-share">
        <img src="//.../twitter.png>
    </a>
    <a title="x" class="sumome-share-client-animated sumome-share-client-share">
        <img src="//.../x.png>
    </a>
    <a title="SumoMe" class="sumome-share-client-animated sumome-share-client-share">
        <img src="//.../sumome.png>
    </a>
</div>

Analizziamo al volo:

  • Ogni immagine è all’interno di un tag <a>;
  • Tutti i tag <a> hanno la stessa classe;
  • Tutti i tag <a> sono figli di una <div> con una certa classe;
  • Il tag <a> relativo all’icona di SumoMe è sempre l’ultimo.

Ecco, abbiamo la soluzione a portata di mano.

Ciò che ci basta fare, è rimuovere l’ultimo tag <a> che ha una precisa classe, e che si trova all’interno della <div> in questione.

Apriamo l’editor, ed aggiungiamo questa banalissima regola nel nostro CSS:

div.sumome-share-client a.sumome-share-client-animated.sumome-share-client-share:last-of-type {
    display: none !important;
}

Con questa regola, abbiamo semplicemente tolto la visibilità all’icona di SumoMe dalla barra di condivisione.
Significa che l’icona, tecnicamente, è ancora presente nel sorgente, ma non occupa più spazio visibile nella pagina.

Perchè !important? La risposta è nell’ottima precisazione di BizConsulting nei commenti a fondo articolo

Facciamo un Passo Indietro

Se sei lo sviluppatore del tuo sito, probabilmente non hai bisogno di leggere questa sezione.

Se, invece, non sei molto pratico di queste cose, e non hai ben capito dove aggiungere quella regola CSS, e magari usi WordPress, niente paura.

A seconda del tema che stai usando, puoi avere la strada più o meno spianata.

In generale, a prescindere dal tema, la cosa che ti consiglio di fare è crearti un Child Theme, e poi aggiungervi quella regola nello style.css.

In questo modo hai la garanzia di mantenere il risultato anche dopo aggiornamenti del tema ecc.

Se vuoi la strada sporca, invece, modifica direttamente il file /wp-content/themes/tuo-tema/style.css.

Se hai domande o bisogno di aiuto, scrivi un commento qui sotto 🙂

In Conclusione

Quanto ci siamo divertiti?

Il tasto di SumoMe non ci piaceva, l’abbiamo tolto, e ora abbiamo una barra di condivisione più snella, e che ci piace di più.

Tieni presente che puoi applicare questi concetti per qualsiasi altro elemento del tuo sito che viene caricato dall’esterno.

Ti ringrazio per aver letto fino alla fine. Puoi darmi un feedback lasciandomi un +1 o condividendo l’articolo dove preferisci 🙂

Per qualsiasi cosa, scrivi un commento, e ti risponderò appena possibile.

Davide

Fondatore ed Autore at FortyZone
Diplomato nel 2015 in Informatica. Studio Informatica alla Sapienza di Roma. Ho diversi interessi e passioni, tra cui musica, cinema, sviluppo software e web, SEO e digital marketing. Ah, suono il basso.
  • Ciao Davide, è un pò che non ci sentiamo. Colgo occasione per farti i complimenti per questo post, davvero utile e spiegato in modo impeccabile e preciso, come tuo solito.
    Volevo però chiederti se hai testato il suo funzionamento anche da device mobili o, comunque, su schermi non desktop. Io ho inserito la stringa nei css di un paio di siti che gestisco e, in entrambi i casi, lato desktop funziona, ma su mobile la coroncina ricompare magicamente… Non credo, quindi, che si tratti di particolari configurazioni css dei miei siti che creano problemi, ma di qualcosina da perfezionare nella stringa css che hai suggerito
    Attendo tuo verifica fiducioso perchè so quanto sei in gamba.

  • Forse ho trovato la soluzione: appena ho finito di scriverti, ho notato che lo script di Sumome in visualizzazione mobile cambia leggermente rispetto a quella desktop. Più precisamente nella stringa riguardante la coroncina viene aggiunto “display: inline”. Ovviamente esso ha la priorità rispetto alla stringa di qualsiasi css custom e annulla l’effetto della stringa che hai suggerito. Per cui, per fare in modo che anche su mobile la coroncina sparisca, è sufficiente modificare la tua stringa così
    div.sumome-share-client a.sumome-share-client-animated.sumome-share-client-share:last-of-type {
    display: none !important;
    così il css custom avrà la priorità sull’impostazione prevista nello script.
    Che dici funziona? 😉

    • Ciao @bizconsulting:disqus, grazie per il commento, sempre gentilissimo 🙂
      Si, aggiungere !important è effettivamente la soluzione migliore che copre entrambi i casi.
      Grazie per averlo fatto notare 😉 modifico l’articolo citandoti.

      • Grazie mille a te Davide! Se non ci si aiuta fra colleghi… 😉

  • Ciro Torelli

    Ragazzi scusate, abbiamo rimosso il plugin di sumo da wordpress ma continuiamo a vedere sempre il quadrato a destra delle opzioni, come possiamo rimuovere completamente sumo dal nostro sito? Grazie

    • Ciao Ciro,
      Probabilmente Sumo è correttamente rimosso, ma forse stai vedendo pagine in cache.
      Svuota – se ce l’hai – la cache lato server, ed anche quella del browser che usi.
      Riavvia il browser e controlla se hai ancora la barra di Sumo.

      PS: qui (https://fortyzone.it/caching-velocizza-sito/) trovi più informazioni sulle cache.

      • Ciro Torelli

        Purtroppo non è un problema di cache ne di browser ne di server. Sembra che anche se il plugin è stato rimosso resti comunque attivo il codice , anche sul footer in basso trovo una scritta del plugin ma nei php nessuna traccia. Sto diventando matto, analizzati i file ma niente di niente, non capisco quali file siano stati modificati.

  • Grazie 🙂 E per mobile, invece? Ho applicato la modifica e da desktop è perfetto, ma da mobile lascia il buco trasparente sulla destra. Ho provato con un display:inline-block, giocando con width 100% ma nulla. Come faccio a far “spalmare” le mie 4 icone social su tutta la barra bottom fixed position sulla larghezza dello schermo smartphone? grazie!

    • Ciao, capisco cosa intendi.
      Per il mobile la situazione è un po’ più complicata, perchè Sumo usa uno script che modifica dinamicamente la dimensione dei singoli quadratini, in base alla larghezza dello schermo.
      Agire solo via CSS in questo caso non sarebbe così liscio.