Bottone flottante per condividere i post in tutti i social network e aggregatori.

L'idea di questo articolo mi è stata data da un lettore che ha un blog di cui purtroppo non posso inserire il link, che sarebbe stato doveroso, perché tratta di temi che violano il copyright. Il concetto è quello di inserire nel sito un bottone flottante che si possa posizionare ovunque e con il quale condividere tutte le pagine che si vuole in una vera e propria miriade di social network. A questo proposito viene sfruttato il servizio AddThis che è leader nel settore della condivisione e di cui ho già parlato in questo post e e di cui ho già usato le API per la realizzazione di quest'altro widget.

Il codice da inserire è il seguente in Design > Aggiungi un gadget > HTML/Javascript (senza titolo)

<div style="position:fixed;top:150px;left:30px;" title="Condividi sui social network" alt="bottone share condividi"><a href="http://www.addthis.com/bookmark.php" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNEd66udZdV5FDR0-clc59FPjcIJVnLiHhmBdBGHH_Ve08jLC3pP8GWmDXau1WsigMd8wmQ9kR5ub9TXyCVYKY8VWabKHDOL60tPw6SZi8WHuAcfG3xqcYYZXzOCeLxct2DuhdnJc6Pkc/" /></a></div>

In cui possono essere modificate le distanze dalla parte alta e dalla parte sinistra del layout, l'immagine dell'icona e la scritta che si visualizza quando si punta con il mouse. In questo caso i pixel di distanza si riferiscono alla parte alta (top) e alla sinistra (left) ma si può optare anche per quella bassa (bottom) e quella destra (right). Vi posto quattro opzioni di possibili immagini da poter utilizzare per questo pulsante

 

                

Naturalmente potete inserire qualunque altra immagine vogliate. Occorre solo preventivamente caricarla su un servizio come Picasa, SkyDrive o DropBox e acquisirne il link diretto. Per ottenerne l'URL di quelle visibili in questo post basta cliccare sopra l'immagine e copiarlo dalla barra del browser. Per constatare di persona il funzionamento di questo pulsante generico di condivisione andate nel mio Blog di Prova. Ne ho inserito uno sulla sinistra e uno sulla destra. Se aprite un post e scorrete la pagina rimarranno sempre nella stessa posizione. Quando li puntate con il mouse vedrete la scritta inserita all'interno del tag Title. Se invece ci cliccate sopra si aprirà una pagina di AddThis con tutti i social possibili e immaginabili. Ci sono anche gli italiani OKNotizie e Diggita.

In alto si vede l'indirizzo della pagina che sarà condivisa. Per facilitare la ricerca del social network c'è, subito sotto all'URL, una casella di ricerca; è sufficiente digitare le prime due lettere del nome per vederlo comparire

Cliccando sopra al nome del social prescelto si aprirà la pagina relativa in cui completare la condivisione. Questo pulsante può anche essere inserito a prescindere dalla presenza di altri bottoni di voto o di condivisione per dare maggiori possibilità ai lettori di postare i nostri articoli. L'attributo

target="_blank"

è opzionale e serve solo per aprire la pagina di Add This in un'altra scheda. E' possibile condividere i post, le pagine di archivio, quelle delle etichette e anche le pagine statiche. Se volete che questo widget HTML non compaia in uno dei precedenti elementi consultate il post sui tag condizionali per widget.