Pubblicato il 05/10/14 - aggiornato il  | 8 commenti :

Come visualizzare i bottoni Mi Piace, Twitter e +1 di Google+ nella versione mobile di Blogger.

Come visualizzare i bottoni di Facebook, Twitter e Google Plus nel footer della versione mobile in modo da condividire i post anche con cellulari e tablet.
La versione mobile di Blogger mostra di default il bottone per il +1 su Google+ e nel post precedente abbiamo visto come mostrare anche il pulsante di Facebook. In questo articolo vedremo invece come visualizzare anche sul mobile il pulsante di Twitter e come mostrarli tutti e tre insieme

Per i bottoni di Twitter bisogna che lo script di questo servizio sia stato inserito nel modello. Se già avete un bottone di Twitter visibile sul desktop significa che lo script è già presente nel vostro template. È sempre meglio utilizzare il javascript asincrono per diminuire il tempo di caricamento del sito. A questo scopo si va su Modello > Modifica HTML e si cerca la riga </head>. Subito sopra si incolla questo codice

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script>

Si salva il modello.

BOTTONE DI TWITTER PRIMA DEL POST


Prima di procedere bisogna attivare la versione mobile del blog andando su Modello > Cellulare, attivando tale funzionalità e scegliendo il Modello Personalizza. Per mostrare il bottone di Twitter subito sopra al contenuto del post si va su Modello > Modifica HTML e si cerca la sezione 

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

Eventualmente si clicca sulla freccetta nera posta a sinistra per visualizzare tutto il codice. Si scorre verso il basso fino a trovare il tag 

<data:post.body/>

e subito sopra a questo si incolla il codice 

<div>
<a class='twitter-share-button' data-count='horizontal' data-via='parsifal32' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a>
            </div>

dove va ovviamente sostituito il nome utente. Si salva il template e si otterrà questo risultato

bottone-twitter-dispositivi-mobili

 

PULSANTI MI PIACE, TWITTER E GOOGLE+ MOSTRATI NEL FOOTER


Se si desidera mostrare tutti insieme i bottoni di Twitter, Facebook e Google+ bisogna innanzitutto oltre che il javascript di Twitter inserire anche quello di Facebook. Si va su Modello > Modifica HTML e si cerca sempre la sezione per il mobile che inizia sempre con questa riga

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

Si scorre in basso fino a trovare il blocco di codice che serve per mostrare il +1 di Google+

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

Si integra incollando sopra e sotto i codici rispettivamente di Twitter e Facebook in questo modo

<div style='float: left; padding-left:5px; margin-top:0px;'>
<a class='twitter-share-button' data-count='horizontal' data-via='parsifal32' expr:data-text='data:post.title' expr:data-url='data:post.url' href='
http://twitter.com/share' rel='nofollow'>Tweet</a>
</div>

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

<div style='float: right; margin-top:-28px;'>
<div class='fb-like' data-action='like' data-colorscheme='light' data-font='trebuchet ms' data-layout='button_count' data-send='false' data-show_faces='true' data-width='40' expr:data-href='data:post.canonicalUrl'/></div>
</div>

dove il codice aggiunto è stato evidenziato di verde. Si salva il modello. Il risultato è il seguente

bottoni-facebook-twitter-google

I valori di margin-top servono per allineare verticalmente i bottoni e possono essere variati in funzione del proprio template. Per condividere i post da mobile i lettori potranno cliccare sui pulsanti anche se sarà possibile utilizzarli solo da loggati sui singoli social.


8 commenti :

  1. Ciao Ernesto,

    ho seguito le seguenti modifiche ma mi appare il seguente erroe .. come posso risolvere?

    e volevo sapere se era possibile inserire il "condividi" di facebook invece del "mi piace"?

    grazie

    RispondiElimina
    Risposte
    1. ops scusa, il codice di errore che mi appare è il seguente:

      Errore di analisi XML, riga 2004, colonna 5: The element type "b:includable" must be terminated by the matching end-tag "".

      Elimina
    2. Pare che tu ti sia dimenticato una riga del tipo < /b:if > . Controlla. Se non è così prova a parsare il codice con questo strumento
      http://www.blogcrowds.com/resources/parse_html.php
      delle volte si risolve
      @#

      Elimina
    3. niente, il ho provato ad inserirlo però mi da sempre errore ... ho provato con il parse, l'errore scompare ma quando vado con il mio smartphone sul sito mi compare solo il pulsante di google+ .. mi puoi dare qualche altro consiglio? o qualche altro modo per far apparire i pulsanti di condivisione?

      Elimina
    4. Il metodo è quello. Bisogna incollare il codice in quel punto del codice. Non so perche non ti funziona
      @#

      Elimina
    5. niente ho provato in tutti i modi, ho provato anche cambiando lo stile della versione mobile, mettendo da "personalizzato" ad una delle altre elencate ... mi da sempre lo stesso errore incollato sopra. col parse, idem ... ci rinuncio, per ora lo tengo solo con il tasto di google + . grazie comunque per l'aiuto

      Elimina
  2. Anche io riscontro, nell'inserire il tasto FB (anche utilizzando la procedura dell'altro tuo post) lo stesso problema di Domenico.

    - "Errore di analisi XML, riga 1656, colonna 35: The element type "b:includable" must be terminated by the matching end-tag "".

    Si risolve eliminando un "div" subito sopra la riga che dà il problema, ma non so se così facendo si va incontro ad errori di altro tipo.

    Probabilmente è una questione di template, io uso uno di quelli semplici, man mano modificato grazie ad i tuoi tutorial.

    RispondiElimina
    Risposte
    1. Il numero dei div nel codice è uguale al numero delle chiusure /div quindi non capisco perché alcuni modelli non li accettino. Potresti provare a eliminare i /div finali inserendo la chiusura nel primo tag in questo modo

      <div style='float: left; padding-left:5px; margin-top:0px;/'>
      <a class='twitter-share-button' data-count='horizontal' data-via='parsifal32' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a>

      <b:if cond='data:top.showDummy'>
      <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
      </b:if>
      <div style='float: right; margin-top:-28px;'/>
      <div class='fb-like' data-action='like' data-colorscheme='light' data-font='trebuchet ms' data-layout='button_count' data-send='false' data-show_faces='true' data-width='40' expr:data-href='data:post.canonicalUrl'/></div>

      Invece è meglio non eliminare i /div colorati di rosso del modello perché non si sa mai che può accadere anche se comunque c'è il modello salvato e si può ripristinare. Alternativamente si può incollare il codice in questo strumento
      http://www.blogcrowds.com/resources/parse_html.php
      e andare su Parse per convertire il codice in XML e farlo accettare più facilmente
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy