Pubblicato il 25/07/15e aggiornato il

Come nascondere il pulsante di Google+ nella versione mobile di Blogger.

Come eliminare il pulsante di Google+ nella versione mobile di Blogger.
I pulsanti per la condivisione nei social network possono essere inseriti nella versione desktop andando su Layout > Post sul blog > Modifica e mettendo la spunta su Mostra i pulsanti per la condivisione. Si può anche decidere di non mostrare questi bottoni togliendo la flag accanto a tale opzione. Bisogna comunque sempre ricordarci di andare in basso su Salva, nella finestra che si apre, per rendere effettive le modifiche introdotte.

Anche nel caso si sia scelto di non mostrare i pulsanti di condivisione sociale nella versione mobile rimarrà comunque il pulsante con contatore di Google+ che vista la posizione che ha nel layout rende piuttosto difficile l'inserimento di altri elementi. In questo articolo vedremo come si procede per nascondere questo pulsante senza eliminare il codice in modo da rendere molto semplice un suo eventuale ripristino.

pulsante-google-plus

Partiamo quindi da una situazione come quella mostrata nello screenshot precedente. Come di solito quando si opera nel codice HTML è assolutamente consigliabile di salvare il template per questioni di sicurezza. Si va si Modello > Modifica HTML e con Ctrl+F si cerca questa riga

<b:includable id='mobile-post' var='post'>

che rappresenta l'inizio del codice per la versione mobile di Blogger. Per visualizzare tutto il codice si deve cliccare nella freccetta nera posta a sinistra della riga. Si scorre verso il basso fino a trovare il blocco di codice del pulsante di Google+ che è il seguente

<b:if cond='data:top.showDummy'>
                <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
              </b:if>

Potremo cancellarlo per togliere il pulsante con contatore ma è preferibile modificarlo così

<!-- Pulsante Google+ Inizio -            
 <b:if cond='data:top.showDummy'>
                <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
              </b:if>          
     - Pulsante Google+ Fine -->

In sostanza si è messo il codice tra i tag di un commento <!-- e --> per non farlo rilevare. Si salva il modello e se apriremo un post con un dispositivo mobile non vedremo più il pulsante

pulsante-google-plus[4]

Nel caso in cui volessimo ripristinare il pulsante basterà togliere la prima e l'ultima riga per lasciare il solo codice iniziale. Questa tecnica può essere usata anche con altri elementi ed è una scelta più brillante di quella dell'utilizzo del display:none; applicato al selettore univoco.




14 commenti :

  1. Ciao Ernesto, ottimo articolo, come sempre.
    Vorrei chiederti un parere in merito alla mancanza di conteggio delle condivisioni su g+ nei Blog su piattaforma Blogger se non si utilizza il pulsante ufficiale.
    Ciò accade con i più noti servizi di Condivisione, compresi Shareaholic e Add-This, ad esempio.
    Le icone con contatore mostrano il numero di condivisione di tutti i social, tranne quelle di g+. Sui siti ufficiali dei vari servizi non ci sono soluzioni per Blogger;
    tu ne avresti qualcuna, magari con stringhe o tag condizionali da inserire mel modello?
    Grazie.

    RispondiElimina
    Risposte
    1. Non ero a conoscenza di questa problematica. Nel caso trovassi delle informazioni utili ci farò un post
      @#

      Elimina
    2. Grazie, gentilissimo.
      Ciao.

      Elimina
  2. Ciao Ernesto, ho letto molti dei consigli del tuo blog e li trovo davvero semplici ed utili. Purtroppo, non per me: tutte le modifiche che apporto al codice mobile vengono rigettate. Ad esempio, ho provato invano a togliere il pulsante di Google+, pur avendo seguito fedelmente il processo da te indicato. E' come se la parte mobile risulti immodificabile. Precisazione: come veste del blog, ho scelto il template Fantastico S.p.A. sia per la versione desktop che per quella mobile. Che sia un problema di template? O devo fare ulteriori modifiche al codice per sbloccare la sezione riguardante il mobile? Spero tu possa rispondermi, grazie per l'attenzione. E complimenti per il blog!

    RispondiElimina
    Risposte
    1. Devi andare su Modello > Cellulare e scegliere Personalizza. Solo in questo modo vengono recepite le modifiche del template nella versione mobile
      @#

      Elimina
    2. Grazie mille, ha funzionato. Ora posso finalmente applicare i tuoi preziosi consigli. Gentilissimo, a presto!

      Elimina
  3. Buongiorno Ernesto,
    seguite le istruzioni, tolto g+ e istallato i social come da questo post http://www.ideepercomputeredinternet.com/2015/07/icone-sociali-blogger-mobile.html

    non attua nulla di tutto ciò- incluso il banner cookies istallato come da istruzioni qui http://www.ideepercomputeredinternet.com/2015/08/banner-cookie-blogger-google-personalizzare-desktop-mobile.html

    puoi aiutarmi a capire come risolvere?
    (il mio sito è www.counselingstyle.it)
    Grazie

    RispondiElimina
    Risposte
    1. Non ho capito che c'entri il banner dei cookie con le icone dei social. Devi essere più chiara
      @#

      Elimina
    2. scusami.
      sono 2 istruzioni che ho seguito e il mio modello non prende.

      la prima: ho eliminato la scritta G+ e poi inserito la condivisione da cellulare.
      risultato: continua ad esserci G+ e nessuna icona per la condivisione da cellulare.

      la seconda: ho inserito il banner dei cookies, tutto giusto il testo ed i colori, ma lo inserisce solo sopra, nonostante il codice
      /* CSS Accettazione Cookie */
      #cookieChoiceInfo {
      top: auto !important; /* Banner in basso */
      bottom: 0 !important; /* Banner in basso */
      }

      Grazie per l'aiuto e i tuoi consigli

      Elimina
    3. Per la eliminazione del pulsante di Google+ forse non ti funziona questo sistema perché hai un modello non ufficiale scaricato da internet. Prova a cancellare il codice evidenziato di giallo. Prima però salva il template.
      Per la seconda domanda riguardo al banner dei cookie non so che post hai consultato.Prova con questo che è l'ultimo e che recepisce le ultime variazioni del codice da parte di Google
      http://www.ideepercomputeredinternet.com/2015/08/banner-cookie-blogger-google-personalizzare-desktop-mobile.html
      @#

      Elimina
    4. Provato a cancellare il giallo, nulla da fare.
      Il modello che uso è un simple di blogger modificato tramite css.


      Per il banner, è preso proprio da quel post che indichi. ma resta in alto.

      Grazie comunque

      Elimina
    5. Allora sbagli sicuramente qualcosa. Provo a indovinare cosa sbagli. Per il pulsante di Google+ forse hai trovato il codice della versione desktop e non di quella mobile. Scorri il codice subito dopo la riga
      < b:includable id='mobile-post' var='post' >
      come indicato nel post stando attenta a non andare nella sezione successiva che è quella desktop.
      Per il banner sicuramente hai provato a personalizzare il codice prima di incollarlo nel modello. Dopo aver salvato il template incolla il codice così com'è e vedrai che lo visualizzerai in basso visto che è stato abbondantemente testato da centinaia di lettori. Solo successivamente passa a apportare le modifiche per URL della Policy Cookie, del testo, ecc
      @#

      Elimina
    6. Ci ho sperato.
      in effetti avevo modificato prima, ora ci sono i tuoi tasti (colori etc) ma resta sempre in alto al blog.
      (comunque ne ho due di blog e nel secondo è andato tutto perfettamente, posizionato in basso, con tutte le mie personalizzazioni).

      secondo me ci sarà qualche tasto condizionale nel mio template che me lo lascia in alto.



      (per G+ ci rinuncio e aspetto che addthis risolva il bug dei cellulari e poi provo a mettere quelli).


      Grazie Ernesto

      Elimina
    7. Per il banner credo che tu abbia inserito prima di questo un altro codice e che non lo hai tolto quando hai incollato questo nuovo codice
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.