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.