Pubblicato il 03/05/10 - aggiornato il  | 45 commenti :

Bellissimo widget di Blogger per condividere i post su tutti i social network.

Il widget per blog sulla piattaforma Blogger che vado a presentare potrebbe sembrare lento, quando ne aprirete la pagina demo di cui il link più in basso. In realtà non è così e non è meno rapido di altri dello stesso genere. Nel blog che uso come test e come dimostrazioni ho ormai inserito tali e tanti widget, effetti, bottoni, personalizzazioni e quant'altro che è diventato lentissimo di suo a prescindere da altre aggiunte. D'altra parte non potrebbe essere altrimenti.
Per i doverosi crediti relativi al gadget vi rimando a fondo pagina e passo subito al codice da inserire in un elemento HTML
<style type="text/css">
  #sharedock { position: fixed; bottom: 0; left: 0; width: 100%; height: 90px; z-index: 999; }
  #dock { position: relative; bottom: 0; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; }
  .dock-container { position: relative; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivwukYo5_2JEBGvXnuV7MfkzunrcpCDrgLDFhYmkXXOt8MSSSRrcmvCj9ReWmj2b3DrSVlifse8JiYwPw0MIpZxyr-PhTcBjWm3tCEmo1LSajG27Li1PuLqeuYhmX8vBz-x03-2canHrs/) no-repeat bottom center; height: 50px; padding: 20px 0 20px 0; }
  .dock-container .custom_images a { display: block;  position: absolute; bottom: 0; text-align: center; text-decoration: none; color: #333; cursor: pointer; }
  .dock-container .custom_images span { background: rgba(0,0,0,.75); display: none; padding: 2px 8px; margin-left: 17px; font-size: 11px; color: #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
  .dock-container .custom_images img { border: 0; margin: 5px 0px 10px 0px; width: 100%; }
  </style>
<div id="sharedock">
  <div id="dock">
  <div class="dock-container">
<div class="addthis_toolbox">
<div class="custom_images">
<a class="addthis_button_facebook"><span>Facebook</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_facebook.png" alt="Condividi su Facebook" /></a>
  <a class="addthis_button_twitter"><span>Twitter</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_twitter.png" alt="Condividi su Twitter" /></a>
<a class="addthis_button_myspace"><span>MySpace</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_myspace.png" alt="Condividi su MySpace" /></a>
<a class="addthis_button_stumbleupon"><span>Stumble</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_stumbleupon.png" alt="Posta su StumbleUpon" /></a>
<a class="addthis_button_reddit"><span>Reddit</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_reddit.png" alt="Condividi su Reddit" /></a>
<a class="addthis_button_delicious"><span>Delicious</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_delicious.png" alt="Condividi su Delicious" /></a>
  <a class="addthis_button_more"><span>Altri...</span><img src="http://addthis.com/cms-content/images/gallery/addthis_64.png" alt="Altri..." /></a>
  </div>
  </div>
  </div>
  </div>
  </div>
  <script type="text/javascript" src="http://sites.google.com/site/ideepercomputeredinternet/script-1/addthis_widget.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://addthis.com//cms-content/images/gallery/fisheye-iutil.min.js"></script>
  <script type="text/javascript">
  $(function () {
  // Dock initialize
  $('#dock').Fisheye(
  {
  maxWidth: 30,
  items: 'a',
  itemsText: 'span',
  container: '.dock-container',
  itemWidth: 50,
  proximity: 60,
  alignment : 'left',
  valign: 'bottom',
  halign : 'center'
  }
  );
  });
  </script>
Si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla e si clicca su Salva. Non c'è niente da personalizzare anche se si potrebbe farlo modificando per esempio le dimensioni dei bottoni o altri parametri. Il widget dovrà essere posizionato nella parte centrale bassa della pagina subito sotto al post e dovremo dargli un Titolo (p.e. "Condividi")
elemento-pagina
Nella parte centrale bassa della pagina saranno visualizzati sette bottoni di condivisione che si ingrandiranno al passaggio del mouse con un effetto molto particolare
bottoni-condivisione-sharing
I pulsanti riguardano i servizi Facebook, Twitter, MySpace, StumbleUpon, Reddit, Delicious e il pulsante con l'icona a forma di "più" che permetterà di postare praticamente ovunque come vedremo.
Senza modifiche questa serie di bottoni sarà visibile in tutte le pagine. Noi vogliamo però che lo sia solo nei post in quanto sono quelli che si condividono e non certo le pagine di archivio o la homepage.
Dobbiamo procedere quindi in questo modo. Andare su Layout > Modifica HTML e mettere la spunta a espandi modelli widget; quindi attraverso il pulsante F3 o Ctrl+F cercare il nome che abbiamo dato al widget (p.e. Condividi)
widget-blogger-condividi
Dobbiamo quindi incollare la riga di codice
<b:if cond='data:blog.pageType == &quot;item&quot;'>
immediatamente sotto a
<b:includable id='main'>
e l'altra riga
</b:if>
immediatamente sopra a
</b:includable>
come mostrato nello screenshot precedente. Salvare il modello, riaprire l'elemento pagina e eliminare il titolo (p.e. Condividi) che avevamo inserito esclusivamente per l'individuazione certa del codice del widget.
A questo punto i bottoni di condivisione saranno visibili solo nei post. Come detto in precedenza si possono condividere gli articoli praticamente in tutti i servizi più importanti del mondo andando sull'ultima icona sulla destra (tipo bandiera svizzera). Se ci si clicca sopra si aprirà una finestra di dialogo di questo tipo
                  digg-diggita        oknotizie    
nella piccola barra di ricerca posta in alto digitando "di" si accede immediatamente a Digg o Diggita mentre inserendo "ok" si trova subito l'icona di OKNotizie. Per un qualsiasi altro sito è sufficiente digitarne le due lettere iniziali per trovarlo immediatamente.
I servizi a disposizione sono un'enormità e vengono visualizzati sfruttando le API di AddThis. Per postare un articolo nel social network o social bookmarking che si è selezionato basta cliccare sulla sua icona. Nel caso dei sei servizi principali il procedimento è ancora più rapido. Ovviamente per la riuscita occorre essere registrati.
Ho tradotto il widget in italiano per la parte che mi era possibile e agevole fare. Per vederlo in azione andate su
e divertitevi a passare il mouse vicino alle icone poste in basso e a fare delle prove di funzionamento. Altri metodi di condivisione possono essere trovati nell'articolo che ho dedicato ai bottoni di voto o al Sexy Widget.
Fonti :| Zurb | Tutsplus | Addthis | Allblogtools -


45 commenti :

  1. Molto utile il tuo blog. Ho appena inserito senza alcun problema il widget da te descritto, grazie per la semplice spiegazione. Buona vita!

    RispondiElimina
  2. @Mr. Pelato
    mi fa piacere ti sia piaciuto :-)

    RispondiElimina
  3. @Rossonero di vergogna
    Non vedo perché dovrebbero esserci problemi di incompatibilità con LinkWithin. Tutto può essere ma non vedo in che modo i due gadget potrebbero darsi fastidio.
    Ciao

    RispondiElimina
  4. Ciao, il widget è bellissimo. Il mio problema è che uso un template modificato. talmente modificato che non esiste una sezione dei post, quindi non posso inserire il widget come elemento sotto i post.

    Ho provato quindi ad inserirlo tramite la sezione MODIFICA HTML, Per intenderci come quando si inserisce la pubblicità di adsense. Ovviamente ho anche tramutato il codice. Però non mi si vede.....

    Sai se per caso questo widget che hai descritto si può visualizzare anche con il metodo che ho usato e quindi sono solo io che ho sbagliato qualche cosa?

    Come sempre spero di essermi spiegato abbastanza bene

    RispondiElimina
  5. @L'altra notizia
    Ti sei spiegato però purtroppo quello che puoi fare sono solo dei test per vedere se funziona con il tuo modello.
    Non so se lo hai fatto ma il codice è diviso in due parti e quella che va da < style type="text/css" >
    a < /style >
    prova a inserirla prima di < /head > oppure, senza quelle due righe, prima di
    ]]>< /b:skin >.
    Ciao

    RispondiElimina
  6. ciao ho inserito il gadget dei bottoni riguardanti i social network che mi appaiono in fono pagina ma per ridurli di dimensioni cosa devo fare? grazie

    RispondiElimina
  7. @Barone Mario
    Questo widget è così. Si basa su questa immagine
    http://t9pysw.blu.livefilestore.com/y1pycOFX7qniy7ALR86qNAt2bMN4Wt-t612yIBbfme7keEttpapoUotvIveVWs_kXCdcU36Sx8sTeH1NNKlSaIoWg/widget.gif
    e sui bottoni di AddThis come per esempio questo
    http://www.addthis.com/cms-content/images/gallery/aquaticus_twitter.png
    Si potrebbero ridurre le dimensioni di tutte le immagini ma allora dovremmo cambiare anche il settaggio dello script. E' un lavoro che puoi fare ma solo se sei sufficientemente esperto.
    Ciao

    RispondiElimina
  8. @parsifal32
    non so perchè ma l'effetto di rialzo non funziona! e comunque mi spieghi come funziona la ricerca con F3?
    pensa che io andavo ogni volta a cercarmi le parole in tutto l'elenco!

    RispondiElimina
  9. @Corvo Michele
    Quando hai aperto un browser, se clicchi su F3 o su Ctrl+F, si apre un piccolo campo. In IE e Chrome sta in alto mentre in Firefox in basso. Si incolla una parola o stringa che si vuole cercare e vengono immediatamente mostrate tutte le occorrenze evidenziate di verde (in Firefox).

    RispondiElimina
  10. ciao, sul mio blog l'effetto di rialzo si verifica ma non quando io vado col mouse sulle icone (per intenderci, dove stanno le immagini tipo Facebook, Twitter, My Space...).
    Questo effetto si verifica se io metto il mouse su una determinata parte del testo. Sono stato chiaro? :)
    PS: forse non so sarà un problema di Browser ma io con Chrome vedo lo stesso problema anche sul sito di prova che hai messo

    RispondiElimina
  11. @Curiosità Da Condividere
    L'effetto di rialzo funziona solo se non sei a "fondo pagina". In quel caso non c'è lo spazio per il movimento. E' così anche con Firefox. Non è un malfunzionamento. Se ho ben capito quello a cui ti riferisci :)
    Ciao

    RispondiElimina
  12. @Ernesto T.: magari ti faccio capire con un immagine cosa succede... :)
    Allora vai qui http://i55.tinypic.com/33vymp2.png e poi vai qui http://i52.tinypic.com/2d9wpx0.png Spero di esser stato comprensibile :D

    RispondiElimina
  13. Ciao, ho lo stesso problema di Curiosità da condividere, non ho trovato la risposta al problema da nessuna parte! Tra l'altro colgo l'occasione per ringraziarti per tutto il tuo lavoro svolto che mi ha aiutato molto

    RispondiElimina
  14. @il consapevole
    Ho visto ma nel tuo caso potrebbe essere un problema di posizionamento visto che funziona solo nella parte alta del post. Prova a spostare Blogumus più in basso per vedere se c'è qualche variazione di comportamento.

    RispondiElimina
  15. Ciao! io non ho modo di mettere la spunta in "espandi modelli widget" non c'è proprio! uso blogger.
    Aiuto!

    RispondiElimina
  16. @Ventuone
    Invece c'è guarda meglio su Design > Modifica HTML. Sotto Salva modello completo e Carica c'è un quadratino con accanto scritto "espandi modelli widget"

    RispondiElimina
  17. si, grazie. sono io che sono imbambita....l'ho trovato :-)

    RispondiElimina
  18. Mi appare, ma quando eseguo la seconda fase mi scompare... non è che va in conflitto con i widget che appaiono di default?
    Ciaoo, Nyko

    RispondiElimina
  19. @Nico Forconi
    Ti prego di non lasciare link attivi nei commenti come spam altrimenti sono costretto a cancellarli dato che non posso controllare che tutti i contenuti linkati sono leciti.
    Se ho ben capito dici che non vedi più il widget dopo che hai inserito i due tag condizionali. Ma servono proprio per quello! Il compito è di mostrare il widget solo nei post e non nella homepage altrimenti sarebbero incoerenti visto che nella home ci potrebbero essere anche 10 post e quindi non si possono condividere tutti insiemi. Apri un singolo articolo e, se non hai sbagliato nulla, si vedrà il widget nella parte bassa esattamente come mostrato nel post di demo.

    RispondiElimina
  20. Adoro questo widget però volevo sapere se sia possibile inserire il bottone di google+ nel widget stesso magari al posto di qualche altro. Mi sono deciso a mettere la condivisione su google+ ma ho già questo widget e il pulsante del mi piace nei post e non vorrei appesantire ulteriormente con il pulsante di google plus.
    A quel punto forse dovrei rinunciare a questo widget e proporre solo i bottoni di fb, twitter e g+.

    RispondiElimina
  21. @Alessio Angelico
    Il bottone si basa sulle API di Addthis
    http://www.addthis.com/
    Quando è stato concepito G+ non c'era ancora ma adesso vedo che lo hanno inserito. Se ho tempo e voglia guardo di metterlo magari al posto di Delicious o Reddit.

    RispondiElimina
  22. @Alessio
    Come non detto. Per adesso AddThis non ha cambiato le API e il bottone è sempre lo stesso
    http://www.addthis.com/pages/gallery-demo-share-dock

    RispondiElimina
  23. Grazie comunque Ernesto per aver verificato la mia richiesta.
    E scusami se nell'altro post ti ho chiamato ancora col nick, non mi ero accorto che eri passato al nome.
    Ciao :)

    RispondiElimina
  24. Salve è davvero molto bello questo widget però volevo sapere se era possibile metterlo al destra del mio blog in modo verticale.

    grazie anticipatamente

    p.s. sei un grande!!

    RispondiElimina
  25. @AT_TheKing
    Non è possibile. Si basa sulle API di AddThis e come vedi
    http://www.addthis.com/pages/gallery-demo-share-dock
    è solo in basso.

    RispondiElimina
  26. è c'è qualcosa del genere da mettere attaccato al layout di dx o sx del blog in modo verticale-

    RispondiElimina
  27. @ AT_TheKing
    Ci sono un sacco di cose ma simile a questa, se c'è, non la conosco.

    RispondiElimina
  28. grazie cmq davvvero un bel blog molto completo sulla materia.

    RispondiElimina
  29. ciao, io ho inserito nel nostro blog http://www.nonbufale.com/ il tuo bellissimo widget, ho seguito tutte le tue istruzioni, ma poi cliccando sui vari bottoni non succede nulla, non si collega a nessun link. come mai? grazie anticipatamente

    RispondiElimina
    Risposte
    1. Come vedi nella pagina di demo
      http://demo-parsifal32.blogspot.com/2010/05/widget-dei-bottoni-di-condivisione-sui.html
      il widget funziona. Naturalmente bisogna essere connessi ai vari servizi per poter postare il link all'articolo.

      Elimina
  30. Scusami..ma io sono molto ignorante..vorrei collegare la pagina del mio blog al facebook..e viceversa...ma come si fa??????????????

    RispondiElimina
  31. @Riflessi Creativi
    La domanda è troppo generica e poi mi pare che il blog ancora tu non lo abbia neppure cominciato. Comunque si possono usare applicazioni quali RSS Graffiti o NetworkedBlogs per ripubblicare automaticamente i post del blog sulla nostra pagina facebook o anche nel Profilo. Ecco i link
    http://www.guadagnareconadsense.net/2010/08/08/come-visualizzare-automaticamente-gli-articoli-del-blog-nella-pagina-ufficiale-di-facebook-o-pagina-fan/
    http://www.ideepercomputeredinternet.com/2011/03/rss-graffiti-per-importare-gli-articoli.html

    RispondiElimina
  32. Salve..
    Sono circa due anni che mi prodigo nel fare blog, o meglio, tento di trovare il blog giusto che mi appassioni e mi dia la giusta continuità per renderlo nel tempo un blog almeno di "minima importanza" e non un Ghost blog. Questa premessa è dovuta solamente per dirle che grazie ai suoi innumerevoli consigli, ho risolto tanti piccoli e grandi problemi legati alla costruzione del blog. La maggior parte delle soluzioni le ho sempre trovate qui nel suo blog, pertanto mi sento obbligato e felice di farle i miei più sentiti complimenti per questo suo operoso lavoro. Auguri di buona pasqua e felice infinito lavoro...(Massimo)

    RispondiElimina
    Risposte
    1. @cmax
      Grazie, sei stato molto gentile. Queste sono cose che apprezzo moltissimo. Tanti auguri anche a te.

      Elimina
  33. Ciao Ernesto, complimenti per le preziosissime guide, stavo cercando pulsanti di condivisione come quelli presenti sul tuo sito in alto a destra. Potresti aiutarmi?
    Grazie

    RispondiElimina
    Risposte
    1. @CarmineChiappinelli
      Vai qui
      http://www.ideepercomputeredinternet.com/2012/03/icone-sociali-con-effetto-3d.html

      Elimina
  34. Grazie ottimo Widget,e complimenti per il tuo blog sei in gamba e molto professionale.
    Alla prossima Adriano

    RispondiElimina
  35. ciao .molto utile e sei stato chiarissimo :D ci sono riuscita subito . l'unico ploblemA è che a me manca il bottone tipo bandierina svizzera :P k condividere in altri siti e / o social network . come mai ??

    RispondiElimina
    Risposte
    1. @# L'immagine della bandierina svizzera nel codice è presente. E' questa
      http://www.addthis.com/cms-content/images/gallery/addthis_64.png
      La dovresti vedere a meno che tu non abbia tolto le ultime righe

      Elimina
  36. Ciao parsifal sto diventando matto, io vorrei inserire i pulsanti di condivisione non nei post ma nella barra laterale del mio blog (come li hai tu sotto "ricerca personalizzata"), magari in un gadget html, affinche i visitatori possano condividere su fb o altrove l'HOME PAGE del blog, come faccio??, se hai già scritto un articolo in proposito potresti fornirmi il link? grazie!

    RispondiElimina
    Risposte
    1. Segui queste istruzioni
      http://www.ideepercomputeredinternet.com/2012/11/blogger-bottoni-facebook-googleplus-twitter-contatore.html
      @#

      Elimina
  37. seguendo le istruzioni di questo post, sono riuscita a mettere il widget (di un altro servizio) ma solo sulla parte laterale del blog. sotto i post non c'è verso, a forza di smanettare con i codici mi era scomparso il widget di linkwithin per cui penso proprio che il problema stia nel modello del mio blog.
    ti ringrazio tanto Ernesto, perchè comunque ho appreso nozioni che ignoravo.
    complimenti per tutto
    grazie ancora e buona giornata

    RispondiElimina
    Risposte
    1. Il problema è molto probabile che sia proprio LinkWithin che compare nella stessa zona
      @#

      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