Pubblicato il 25/03/11e aggiornato il

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://lh5.googleusercontent.com/_nT13UtBmmiU/TYxUgNm8yRI/AAAAAAAASkA/byoS9pOkLvI/share2v.png" /></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

 

   share button     share button verticale     share button orizzontale    share button verticale

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.

social network addthis

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

addthis social network

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.





7 commenti :

  1. ma alla fine in italia si usa solo facebook e twitter in maniera minore. per non appesantire il sito, eliminerei i restanti.

    RispondiElimina
  2. @MicsIl sito non si appesantisce per nulla visto che c'è una sola icona. Rispetto a altri metodi ci sono due passaggi in più anche se piuttosto rapidi. E' una scelta personale e comunque una icona in più senza nessun javascript è praticamente irrilevante per la velocità di caricamento del blog. Certo poi ci sono siti che sono interessati solo a Twitter e Facebook e allora può essere considerata superflua.

    RispondiElimina
  3. ciao...è possibile inserire un gadget html (nel mio caso una chat) che segue la pagina che scorre? grazie!

    RispondiElimina
  4. @Mario Alan
    Dipende dai widget. Nel caso dei video di youtube so che funziona. Se incolli
    <div style="position:fixed;top:150px;left:100px;">Codice di un video di youtube</div>
    Vedi li video in primo piano sempre nella stessa posizione che può essere personalizzata. Per gli altri script va testato di volta in volta. Inserisci il codice e vai su Design > Aggiungi un gadget HTML/Javascript per vedere se funziona. Anzi ci faccio un "instant post" :)

    RispondiElimina
  5. Mi sono appena accorta che viene visualizzato un messaggio d'errore. Con Chrome è: Nessun dato ricevuto - Impossibile caricare la pagina web perché il server non ha inviato dati.

    Avrà sentito pure lui il terremoto??

    RispondiElimina
    Risposte
    1. @Bastet...
      Non ti saprei dire :)

      Elimina
    2. Forse è un errore temporaneo perché proprio non si riesce ad accedere al sito. Speriamo si risolva... è molto pratico. ;)

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.