Widget dei Post Consigliati di Blogger con effetto slide e icone dei social network.

Come installare un widget che mostra un banner laterale con i post consigliati e i bottoni per i social network.

Qualche tempo fa era ancora possibile installare il plugin dei Recommended Posts di Facebook che però è stato deprecato unitamente al Plugin Activity Feed. Tale plugin mostrava un banner laterale quando si scorreva la pagina con i link ad altri articoli dello stesso sito condivisi su Facebook.

Seguendo quella stessa falsariga è stato realizzato un gadget analogo per Blogger. Dopo l'installazione di questo widget, se si scorre la pagina verso il basso, si visualizzerà un banner con titolo e link a un altro articolo del sito unitamente alle icone di Facebook e Twitter munite di contatori per eventuali condivisioni.  Tale banner verrà visualizzato solo nei post e non nella homepage, nelle pagine di archivio o delle etichette.

 

Se si clicca sul titolo del post si aprirà la relativa pagina mentre andando sulle icone di Twitter e Facebook verrà condivisa non la pagina corrente ma il post mostrato nel banner. L'icona X serve per nascondere il banner che muterà in icona + . Cliccando sopra a questa si potrà visualizzare nuovamente il banner. Andando sulla icona ? si aprirà questa pagina che serve da istruzione l'installazione del widget ma tale link può essere sostituito anche da quello di un vostro post che illustra il significato del gadget.

Demo
Clicca qui

Nella Demo scorrete la pagina fino in fondo per veder apparire il banner con il post consigliato.  La sua installazione è semplicissima visto che non occorre neppure modificare il modello. Si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e, in Sezioni del sito, si incolla

<a href="http://goo.gl/gpQA6A" target="_blank" title="Post Raccomandati per Blogger"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge5UXweEmgK_7dBvSiWrNp_JS7wcJ-cv8pKqnZZm_NjRL5SRBOdxzYyn46GlHUQqRXqqzJXMxZlpNID-LSiZwhPZpiDUhyphenhyphenqTvEx1aTeJovjVZ0xi9fvsSAhWezF8Bd2dX-V74aOKkXJjIF/s128/bckground.png" border="0" alt="Blogger-Gadget" style="position:absolute; top: 0px; right: 0px;" /></a>
<style type="text/css">
#recslide{
z-index:5;
width:400px;
height:100px;
padding:10px;
background-color:#fff;
border-top:3px solid #000;
position:fixed;
right:-430px;
bottom:0;
-moz-box-shadow:-2px 0 5px #aaa;
-webkit-box-shadow:-2px 0 5px #aaa;
box-shadow:-6px -5px 5px #aaa;
font-family:Georgia;
}
#recslide p{
font-size:11px;
text-transform:uppercase;
font-family:Georgia;
letter-spacing:1px;
color:#003366;
font-weight: bold;
}
#recslide_title{
color:#000;
font-weight:700;
font-size:14px;
margin:10px 20px 10px 0;
}
#recslide a,#recslide a:hover,#recslide_title{
text-decoration:none;
color:#940F04;
padding: 5px 5px 5px 2px;
}
#recslide .close,#recslide .expand,#recslide .help{
border:2px solid #EEE;
cursor:pointer;
color:#9A9AA1;
width:13px;
height:15px;
padding:2px 0 0 5px;
position:absolute;
right:10px;
font-size:17px;
font-weight:700;
font-family:Georgia;
}
#recslide .help{
right:35px;
}
#recslide_image{
float:left;
width:80px;
}
#recslide_title{
width:287px;
height:30px;
overflow:hidden;
}
</style>
<div id="recslide" style="display:none;">
<div class="help">?</div>
<div class="expand">+</div>
<div class="close">X</div>
<p>TI POTREBBE INTERESSARE ANCHE IL POST:</p>
<div id="recslide_image"></div>
<div id="recslide_title">Sto caricando...</div>
<center><div id="share_box">loading</div></center>
</div>
<script>
if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof bts_onload_queue=='undefined')var bts_onload_queue=[];if(typeof bts_dom_loaded=='boolean')bts_dom_loaded=false;else var bts_dom_loaded=false;if(typeof bts_async_loader!='function'){function bts_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(bts_dom_loaded){newcallback()}else bts_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof bts_domLoaded!='function')function bts_domLoaded(callback){bts_dom_loaded=true;var len=bts_onload_queue.length;for(var i=0;i<len;i++){bts_onload_queue[i]()}}bts_domLoaded();bts_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js",function(){bts_async_loader("https://sites.google.com/site/scriptperilblog/widget-1/post-raccomandati2.js",function(){},"bts-out-slide")},"jQueryjs")}
</script>

quindi si salva e si lascia posizionato l'elemento nella sidebar. Le personalizzazioni riguardano i codici dei colori, la famiglia dei font (Georgia) e le dimensioni del banner. L'URL evidenziato di giallo rimanda a questo post e può essere sostituito da un altro mentre l'URL evidenziato di verde è un javascript caricato su Google Sites. Nel caso avessimo un dominio personalizzato dovremo scaricare questo file incollandone l'URL nella barra del browser e andare su Invio. Dovremo poi caricare questo file nella cartella Public di Dropbox o su Google Drive per poi sostituirne l'URL nel codice.  In un prossimo articolo mostrerò anche una versione light di questo interessante widget.