Pubblicato il 25/07/15 - aggiornato il  | 19 commenti :

Come installare i pulsanti di condivisione sui social network nella versione mobile di Blogger.

Come mostrare le icone per la condivisione sui social Facebook, Twitter, Google+, Linkedin, Feedly e WhatsApp nella versione mobile di Blogger.
La condivisione di articoli sui social network è un modo di attirare traffico sempre molto importante ma è anche un sistema per dare autorevolezza al post e al sito stesso. Molti fattori di ranking di Google dipendono proprio dal numero e dalla qualità delle condivisioni sociali.

Le condivisioni poi avvengono sempre di più da mobile visto che le persone stanno sempre di più preferendo questi dispositivi ai classici computer per una maggiore usabilità e perché possono navigare su internet stando in treno come alle poste, in una sala di attesa come in spiaggia sotto l'ombrellone. In questo articolo vi propongo una serie di icone da visualizzare nella versione mobile di Blogger da mostrare alla fine del post. Nell'articolo precedente abbiamo visto come nascondere l'icona di Google+ che dava appunto fastidio per questa installazione.

Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca questa riga

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

Se sulla sua sinistra fosse visibile una freccetta nera bisogna cliccarci sopra per visualizzare tutto il codice di questa sezione. Si scorre il template verso il basso fino a trovare questa nuova riga

<div class='post-footer-line post-footer-line-2'>

Subito sotto a questa o meglio subito sopra si incolla questo codice

<!-- Icone sociali per il mobile inizio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table cellpadding='0' cellspacing='0'>
<tr>   
    <td style='padding-top: 5px;'>   
<span id='facebookbutton'><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Condividi su Facebook'></a></span>
    </td>
    <td style='padding-top: 5px; padding-left: 5px;'>
<span id='twitterbutton'><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Condividi su Twitter'/></span>
    </td>
    <td style='padding-top: 5px; padding-left: 5px;'>
<span id='googleplusbutton'><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Condividi su Google+'></a></span>
    </td>
<td style='padding-top: 5px; padding-left: 5px;'>
<span id='linkedinbutton'><a expr:href='&quot;http://www.linkedin.com/shareArticle?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Condividi su Linkedin'></a></span>
    </td>
<td style='padding-top: 5px; padding-left: 5px;'>
<div id='feedlybutton'><a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Ffeeds.feedburner.com%2Fideepercomputeredinternet%2FzUQN' target='blank' title='Iscriviti ai Feed'></a></div>    
    </td>
    <td style='padding-top: 5px; padding-left: 5px;'>
<div id='whatsapp_button1'><a alt='WhatsApp-Button' data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;-&quot; + data:post.url' title='Condividi su WhatsApp'/></div>    
    </td>
  </tr>
</table>
</b:if>
<!-- Icone sociali per il mobile fine -->

Successivamente si cerca la riga ]]></b:skin> e, subito sopra, si incolla questo secondo codice

/* CSS ICONE MD INIZIO */
#facebookbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_wSBg_IjYGmeBANwDuO_cpp5pYu9Xph5pzeX9gpxoo_vKFep7tvW_WBV4d1GPKSWS8YHc8elw169iETsk11e4u5VAUN3dD1b3kqADZtgSzsfUeTvGQLxgbN4rqW8lA5o5OPL2wTi-fo5t/s48-Ic42/facebook-box.png);} 
#twitterbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0ODWdyPRUrmWHpFuqjbHiGbmjL9eAdZc2EfBA6KupBqYwcwLhsxOG7Sis8qlZ3KlepKAUTEsw2M1X1lW1mAIfjE6xhFFIZirvOPtiLahp1Zik8eRTbghEK4gDy0yUDzWCQuGjnk6dJ8HC/s48-Ic42/twitter-box.png);}
#googleplusbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMAE5nhjqrLgsGBDQikg5CfNUJxPg_GKtO4EfBkCuNzFPxI6wy7ehxYtztqf40Kah0KtPep-rwyzmpzFYoyus0ssX9mKl4KzENxNXyLHD1oE_1Niq_FpAWwfMKZmoTrOyToGKEQtCJitgZ/s48-Ic42/google-plus-box.png);}
#linkedinbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMfnVKye0NPH4YQAD-3WxCfwblAqPZQW547zGtybSfuub54Nr2tZpoY8JHsCIoqksXUOJFVq98v5siCS3IwznhLBIi3OppFHC3RuPCi6tX_KiIYEOnZgU72BQ10zh5dq1yLhKrP0eiImqW/s48-Ic42/linkedin-box.png);}
#feedlybutton a {display: block; width: 41px; height: 41px; margin: 0 auto; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilJ0pAds9MNF_aAZ_-pYEvyt7PGehzovT05WFRfLD6U_QOiIMbFnKJM-bIOpYOh5SCm1TKBZ8gnTP0UuveFMkNZBiej4zcDv1VQparxWG_J0Hq1iSUneATOA0vIM6LETElX1J3zsbnxGUl/s41-Ic42/feedly.png);}
#whatsapp_button1 a {display: block; width: 48px; height: 48px; margin: 0 auto; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWzGaydwnV_WJUM5AXMn_7aonI6bkHki6WImok59p_-ZwKT-BOdfN8vQRe9QF1dccL0Op3LXxPFM7M07EHp50hUxpm7-g01RaRycImBwSvXaJG9EHVxbNfcnKX4Ve1jVduNT4cbVkWoO8S/s48-Ic42/Whatsapp.png);}
/* CSS ICONE MD FINE */

Si salva il modello. Ho usato delle icone del tipo Material Design ma si possono scegliere le immagini che si vogliono. I social network che ho scelto sono stati Facebook, Twitter, Google Plus e Linkedin. Poi ho aggiunto anche il pulsante per iscriversi ai feed con Feedly e quello per condividere il post su WhatsApp. A parte l'URL delle icone si possono modificare le loro dimensioni e il loro posizionamento. Ho scelto di mostrarle con dimensioni di 48x48 pixel con un margine di 5 pixel verso l'alto e sempre con 5 pixel di margine da lasciare a sinistra.

Per il resto si deve intervenire sul codice solo per quello che riguarda Feedly. Nel primo blocco è stato colorato di viola il codice che permette di iscriversi a questo blog. Per modificarlo dovete consultare il post linkato qui sopra, recarvi nella pagina Feedly Button e usare il tool apposito per sostituirlo con l'URL dei vostri feed.  

icone-sociali-blogger-mobile

Quando un utente cliccherà su una icona di Facebook, Twitter, Google+ o Linkedin si aprirà una scheda per la condivisione del post. Può anche aprirsi la applicazione relativa al social se l'utente ha configurato questa opzione sul suo telefonino o tablet. Quando cliccherà sulla icona di Feedly si aprirà la omonima applicazione per iscriversi ai feed se installata. Mentre chi cliccherà sulla icona di WhatsApp potrà scegliere il contatto su questa applicazione con cui condividere il post.

condivisione-post-whatsapp


MOSTRARE QUESTE ICONE ANCHE NELLA VERSIONE DESKTOP


Se vogliamo mostrare queste icone non solo nella versione mobile ma anche in quella desktop dobbiamo incollare il primo codice anche in un'altra posizione mentre il secondo codice che è quello dei CSS servirà sia per il mobile sia per il desktop.  Dopo il salvataggio del template si va sempre su Modello > Modifica HTML e si cerca questa riga

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

che indica l'inizio della sezione per il desktop. Si scorre il codice fino a trovare l'altra riga 

<div class='post-footer-line post-footer-line-1'>


e subito sotto a questa si incolla il primo blocco di codice di questo post. Il secondo si incolla con le modalità già illustrate se non lo si fosse già fatto in precedenza. Si salva il modello.


19 commenti :

  1. Ciao, ottimo articolo, come sempre, tuttavia non riesco a far comparire le icone, Ho seguito le istruzioni alla lettera ma non viene visualizzato nulla. Ho un template personalizzato ma non per la versione mobile

    Grazie mille

    RispondiElimina
    Risposte
    1. Devi andare su Modello > Cellulare e scegliere Personalizza
      @#

      Elimina
    2. Ciao Ernesto, ti ringrazio molto per la dritta. Speravo si potesse applicare ad uno dei modelli preimpostati per la versione mobile. Vedrò di elaborare un template personalizzato anche per i cellualari

      Grazie mille! e complimenti ancora per l'ottimo lavoro

      Elimina
    3. Non c'è bisogno di elaborare nulla. Vengono acquisite le configurazioni del modello desktop applicabili. Poi l'amministratore può intervenire per disattivare alcune impostazioni o widget per mobile o per desktop
      http://www.ideepercomputeredinternet.com/2015/04/blogger-blog-mobile-friendly-code.html
      @#

      Elimina
    4. Purtroppo il template che ho utilizzato non ha al suo interno codice css per il mobile perciò quando uso la vista personalizzata mi mostra esattamente la versione desktop, per questo devo elaborarlo

      Elimina
  2. ciao! sono riuscito a fare tutto quello che hai spiegato! iniziao col ringraziarti per questo ottimo tutorial e proseguo con il chiederti una cosa: mi piacerebbe modificare le icone e sceglierne altre solo che modificando il link nella parte del css non succede nulla. o meglio, spariscel'icona. ho provato sia a mettere il link originario dell'immagine che a salvarla e caricarla su googledrive e ottenere il link da li. mi mantiene il pulsante di condivisione e tutte le sue funzionalità ma sparisce l'icona.
    come potrei fare? grazie in anticipo

    RispondiElimina
    Risposte
    1. Ma quale Google Drive, le immagini di Blogger si caricano su Picasa e se ne ricava il link diretto che poi puoi sostituire nel codice di questo post al posto degli URL colorati di rosso
      http://www.ideepercomputeredinternet.com/2013/03/picasa-image-hotlink.html
      @#

      Elimina
  3. Ciao Ernesto, ho appena aperto il mio blog e trovo molto interessanti i tuoi post. Ho seguito alla lettera le istruzioni che hai messo in questo post per le icone sociali ma....non visualizzo nulla...sembra quasi che non abbia mai toccato il codice. Mentre invece controllando tutto è stato trascritto bene...Cosa potrei aver sbagliato, o dimenticato?

    RispondiElimina
    Risposte
    1. Scusami ho già rimediato...nel copia ed incolla alcune parti del codice sono andate perse...non so il perche...Grazie comunque

      Elimina
  4. Veramente GRANDE. Ho seguito alla lettera le istruzioni e funziona tutto benissimo. Grazie. Domenico

    RispondiElimina
  5. Tutto perfettamente funzionante, grazie mille!
    Senti, ma c'è un modo per centrare questi (ed altri) bottoni? Grazie.

    RispondiElimina
    Risposte
    1. Prima della riga
      <table cellpadding='0' cellspacing='0'>
      prova a incollare
      <div align='center'>
      e incolla l'altra riga
      </div>
      dopo </table>
      nel primo codice del post (NB Non ho testato)
      @#

      Elimina
    2. Funziona alla perfezione!
      Ancora grazie.

      Elimina
  6. Ciao Ernesto. Succede una cosa strana. Iserisco i codici per le icone sociali compreso whatsapp per la versione mobile ma dopo un pò di settimane spariscono come se Google facesse un aggiornamento della struttura xml del Blog....spegami. Grazie

    RispondiElimina
    Risposte
    1. Non lo so spiegare. Gli URL delle icone dovrebbero continuare a essere giusti. Forse è la connessione che non apre tutte le immagini, qualche volta succede
      @#

      Elimina
  7. ciao Ernesto,
    vorrei evitare il bottone di Feedly; quali porzioni di codice devo togliere?
    grazie!
    Cristina

    RispondiElimina
    Risposte
    1. Togli questo blocco dal primo codice

      <td style='padding-top: 5px; padding-left: 5px;'>
      <div id='feedlybutton'><a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Ffeeds.feedburner.com%2Fideepercomputeredinternet%2FzUQN' target='blank' title='Iscriviti ai Feed'></a></div>
      </td>

      e quest'altro blocco

      #feedlybutton a {display: block; width: 41px; height: 41px; margin: 0 auto; background: url(https://lh3.googleusercontent.com/-wkruaWxx5L0/VbM47yPwnmI/AAAAAAAAvd0/5Io1gLjIydg/s41-Ic42/feedly.png);}

      dal secondo codice
      @#

      Elimina
    2. Buongiorno Ernesto,
      seguendo le tue indicazioni sono riuscita a togliere il pulsante di Google+ (altro tuo post) ma non riesco in nessun modo a far comparire le icone qui sopra che volevo inserire anche nella versione desk, ho riprovato anche una seconda volta ma nulla da fare... sicuramente sbaglio qualcosa :(

      Elimina
    3. Segui questo post che è più specifico
      http://www.ideepercomputeredinternet.com/2015/07/blogger-icone-social-network-mobile-desktop.html
      @#

      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