Pubblicato il 28/07/14 - aggiornato il  | 7 commenti :

Widget degli Articoli Simili e dei Bottoni Sociali per Blogger.

Come installare il gadget degli Articoli Simili su Blogger insieme ai bottoni di condivisione su Twitter, Facebook e Google+.
Gli obiettivi di un blogger che non vende niente nel suo sito sono quelli di avere il maggior numero di visitatori, di farli restare il più possibile a leggere i suoi contenuti e di indurli a condividere sui social network il maggior numero di pagine. Per raggiungere questi risultati bisogna innanzitutto scrivere contenuti validi ma questo non basta visto che bisogna prestare grande attenzione anche ai fattori di ranking per un posizionamento migliore nei risultati di ricerca.

Una ulteriore spinta in questo senso può essere data da opportuni widget che mostrino ai lettori il meglio della nostra produzione insieme a una certa facilità della sua condivisione nei social network. Adesso vado a illustrare quello che si potrebbe definire come un widget misto che mostra gli Articoli Simili a quello visualizzato e i bottoni di condivisione su Facebook, Twitter e Google+. Ricordo che gli Articoli Simili o Correlati o Related Posts non sono altro che altri post che condividano con quello aperto almeno una etichetta. I bottoni di condivisione sociale sono invece quei pulsanti che aprono una finestra popup che permette di condividere il post visualizzato su Facebook o su Google+ oppure di twittarlo ai follower di Twitter.


Sulla sinistra si visualizzerà l'elenco dei titoli dei post correlati e, se ci si passa sopra con il mouse, viene mostrato un tooltip con la miniatura della prima immagine e con l'incipit dell'articolo. Sulla destra invece vengono visualizzate le icone dei social network che, quando ci si passa sopra con il cursore, mostrano i bottoni di condivisione in forma orizzontale e con il rispettivo contatore. La installazione di questo widget non è particolarmente complicata. 

Dopo aver salvato il template si va su Modello > Modifica HTML, si cerca la riga </head> e, subito sopra, si incolla questo codice

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script><b:if cond='data:blog.pageType == "item"'> <style type='text/css'>/*<![CDATA[*/@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";#sbuttons { border-radius: 5px; padding: 14px 7px; background:#ffffff; width: 500px; overflow: hidden; margin: 2px auto 0; box-shadow:0 2px 3px rgba(71, 71, 71, 0.31);}.button { background: #DCE0E0; position: relative; display: block; float: left; height: 40px; margin: 0 7px; overflow: hidden; width: 150px; border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;}.icon { display: block; float: left; position: relative; z-index: 3; height: 100%; vertical-align: top; width: 38px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 3px; -webkit-border-radius: 3px 0px 0px 3px; border-radius: 3px 0px 0px 3px; text-align: center;}.icon i { color: #fff; line-height: 42px;}.slide { z-index: 2; display: block; margin: 0; height: 100%; left: 38px; position: absolute; width: 112px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 0px; -webkit-border-radius: 0px 3px 3px 0px; border-radius: 0px 3px 3px 0px;}.slide p { font-family: Open Sans; font-weight: 400; border-left: 1px solid #fff; border-left: 1px solid rgba(255,255,255,0.35); color: #fff; font-size: 16px; left: 0; margin: 0; position: absolute; text-align: center; top: 10px; width: 100%;}.button .slide { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}.facebook iframe { display: block; position: absolute; right: -15px; top: 10px; z-index: 1;}.twitter iframe { width: 90px !important; right: 5px; top: 10px; z-index: 1; display: block; position: absolute;}.google #___plusone_0 { width: 70px !important; top: 10px; right: 15px; position: absolute; display: block; z-index: 1;}.facebook:hover .slide { left: 150px;}.twitter:hover .slide { top: -40px;}.google:hover .slide { bottom: -40px;}.facebook .icon, .facebook .slide { background: #305c99;}.twitter .icon, .twitter .slide { background: #00cdff;}.google .icon, .google .slide { background: #d24228;} /*]]>*/</style></b:if>

dove la prima riga evidenziata di giallo è la Libreria JQuery e, nel caso fosse già presente nel nostro modello, si può tralasciarla. Non sto a illustrare in dettaglio tutte le personalizzazioni che possono essere fatte e che riguardano principalmente il font utilizzato inserito mediante Google Fonts e i codici dei colori. Successivamente si cerca la riga di inizio dell'aspetto del blog versione desktop

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

Si clicca sulla freccetta posta sulla sinistra per visualizzare tutto il codice e si scorre fino a trovare

<div class='post-footer'>

Subito sopra a questa riga si incolla questo secondo codice 

<!-- Articoli Simili con Bottoni Sociali -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
<table border='0' cellpadding='2' cellspacing='0' width='100%'>
<tr>
<td rowspan='4' width='80%'>
<style type='text/css'>
.articoli-simili{ margin:2em auto 0; font:normal normal 12px/1.4 Arial,Sans-Serif;margin-top:-5px;}
.articoli-simili h4{ font-size:150%; margin:0 0 .5em;color:gray}
.articoli-simili a{color:gray}
.articoli-simili a:hover{color:darkred}
.articoli-simili-style-6 li{position:relative}
.articoli-simili-style-6 .articoli-simili-item-thumbnail{ width:50px; height:50px; max-width:none; max-height:none; background-color:gray; border:2px solid gray; padding:0; float:left; margin:0 10px 0 0}
.articoli-simili-style-6 .articoli-simili-item-title{ display:block; font-weight:bold}
.articoli-simili-style-6 .articoli-simili-item-summary{ display:block; overflow:hidden; font-size:11px}
.articoli-simili-style-6 .articoli-simili-item-tooltip{color:black; position:absolute; bottom:100%; left:-10px; z-index:999; margin-bottom:10px; border:3px solid gray; background-color:#fff; padding:10px; width:90%; height:auto; display:none}
.articoli-simili-style-6 .articoli-simili-item-tooltip:before,
.articoli-simili-style-6 .articoli-simili-item-tooltip:after{ content:&quot;&quot;; display:block; width:0; height:0; border:10px solid transparent; border-top-color:gray; position:absolute; top:100%; left:21px}
.articoli-simili-style-6 .articoli-simili-item-tooltip:after{ border-top-color:gray; border-width:9px; margin-left:1px}
.articoli-simili-style-6 li:hover .articoli-simili-item-tooltip{display:block}
.condividere h4{ font-size:170%; margin:0 0 .5em;color:gray;text-align:center;margin-top:-3px;}
</style>
<div class='articoli-simili' id='articoli-simili'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: &quot;<data:blog.homepageUrl/>&quot;,
widgetTitle: &quot;&lt;h4&gt;ARTICOLI SIMILI&lt;/h4&gt;&quot;,
numPosts: 6,
summaryLength: 170,
titleLength: &quot;auto&quot;,
thumbnailSize: 50,
noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,containerId: &quot;articoli-simili&quot;,
newTabLink:false,
moreText: &quot;&quot;,
widgetStyle: 6,
callBack: function() {}
};
</script>
<script src='https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/articoli-simili.js' type='text/javascript'/>
</td>
<td width='20%'>
<div class='condividere' style='float: right; padding:0px; margin-left:20px;'>
<h4>CONDIVIDI</h4>
<div class='facebook button'> <i class='icon'> <i class='icon-facebook'> </i> </i> <div class='slide'> <p> facebook </p> </div> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=120&amp;height=20&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:120px; height:20px'/> </div> <div class='twitter button'> <i class='icon'> <i class='icon-twitter'> </i> </i> <div class='slide'> <p> twitter </p> </div> <a class='twitter-share-button' href='https://twitter.com/share'> Tweet </a> <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> </div> <div class='google button'> <i class='icon'> <i class='icon-google-plus'> </i> </i> <div class='slide'> <p> google+ </p> </div> <div class='g-plusone' data-size='medium'> </div> <script type='text/javascript'> (function() { var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true; po.src = &#39;https://apis.google.com/js/plusone.js&#39;; var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s); } )(); </script></div></div> </td></tr> </table></b:if>

Finalmente si salva il modello. Ricordo che essendo un widget degli Articoli Correlati si vedrà esclusivamente alla fine dei post e non in Homepage o nelle pagine delle etichette. Se prima di salvare il modello di Blogger siete soliti visualizzarne l'Anteprima non vedrete nessun cambiamento visto che l'Anteprima mostra la homepage del blog.



In questo secondo codice si possono modificare molti parametri. I più importanti sono i seguenti:
  1. ARTICOLI SIMILI e CONDIVIDI possono essere sostituiti da altre espressioni
  2. Il numero di post visualizzati è stato settato come 6
  3. La lunghezza dell'incipit proposta è di 170 caratteri
  4. Le miniature dei tooltip hanno dimensione di 50 pixel
  5. Se non ci sono immagini nel post ne viene mostrata una di default inserita con Base64
  6. Il javascript è stato caricato su Google Drive ed ha l'URL evidenziato di marrone. Per un sacco di ragioni è meglio scaricarlo e caricarlo nel nostro account per poi sostituirne l'indirizzo.


7 commenti :

  1. Ciao Ernesto, come scarico il javascript sul mio Google Drive?
    Grazie e complimenti per l'interessantissimo blog!

    RispondiElimina
    Risposte
    1. Per caricarlo leggi qui
      http://www.ideepercomputeredinternet.com/2014/07/hotlink-google-drive.html
      Invece per scaricarlo incolla nel browser l'indirizzo
      https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/articoli-simili.js
      e clicca su Invio. Si visualizzerà la pagina dello script. Sulla stessa pagina si clicca con il destro del mouse e si sceglie Salva pagina con nome (Firefox) oppure Salva con nome (Chrome)

      @#

      Elimina
    2. Grazie mille, fatto tutto e viene bene!
      A presto!

      Elimina
  2. Ciao Ernesto, ho inserito questo tuo script, ma c'è un problema, è visibile solo su alcuni post, mentre negli ultimi che ho scritto, si vede solo la scritta condividi con i relativi tasti social, ma non si vedono i collegamenti ai post come mai?

    RispondiElimina
    Risposte
    1. Il problema è quello delle etichette. Se non si vedono post correlati in un determinato articolo è perché o non hai messo nessuna etichetta a quel post o hai messo etichette che non non ci sono negli altri post del blog
      @#

      Elimina
  3. ciao Ernesto, ho riscontrato lo stesso problema di Lello, ma in tutti i miei post ci sono le etichette e molte sono in comune; nonostante questo per alcuni post non mi appare la funzione degli articoli simili; inoltre nella breve descrizione delle icone che si aprono mettendo la freccia del mouse su uno dei link degli articoli simili mi appare la descrizione in linguaggio html; ho seguito alla lettera quello che hai spiegato nel post ma ho avuto questi problemi, potresti darmi qualche dritta? grazie e complimenti per l'articolo

    RispondiElimina
    Risposte
    1. Mi spiace ma non so spiegarmi il perché di questo malfunzionamento
      @#

      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