Pubblicato il 05/06/12 - aggiornato il  | 22 commenti :

Bottoni di condivisione di ShareThis racchiusi in un cuore.

Bel widget di condivisione di Sharethis per social network e social bookmarking. Si tratta di un cuore che si apre e che mostra i bottoni di condivisione al passaggio del mouse.
Dopo aver mostrato i bottoni per condividere i post racchiusi dentro un uovo a cura del servizio ShareThis, passo a presentare un gadget analogo ma con i pulsanti che escono dall'interno di un cuore. Nel post precedente avevo optato per inserire l'uovo di condivisione subito alla fine del post. In questo caso si può fare lo stesso ma ho preferito inserirlo fisso in basso a sinistra in modo da poter condividere tutte le pagine del blog e non solo i singoli articoli.

Il codice per questi bottoni non è ancora disponibile attraverso i normali strumenti di acquisizione del sito. Dovete quindi copiare e incollare nel modello quello che sono riuscito a ricavare per vie traverse. L'aspetto del widget sarà il seguente e muterà al passaggio del cursore

condivisione-sharethis  

Cliccando sul pulsante relativo si condividerà la pagina sul social network desiderato con anche la possibilità di inserire un commento o di modificare la miniatura dell'anteprima sui social network che danno questa opzione come Google Plus e Facebook.

demo-cuore-condivisione

Si va su Modello > Backup/Ripristino e si salva il modello completo per questioni di sicurezza. Si torna su Modello > Modifica HTML > Procedi e si cerca la riga </head>. Subito sopra si incolla il codice

<!-- Start Heart Gadget Code by  http://www.ideepercomputeredinternet.com  -->
<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: &quot;9900249f-10bd-4218-9962-6eb51859a787&quot;, onhover:false}); </script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>
<!-- End Heart Gadget Code  -->
quindi, sempre cliccando su F3 o su Ctrl+F, si cerca l'altra riga </body> e, subito sopra, si incolla
<!-- Start Heart Share Code by  http://www.ideepercomputeredinternet.com  -->
<div style='position: fixed; bottom: 3%; left: 3%;'>
<div class='shareEgg' id='shareThisShareHeart'/>
</div>
<script type='text/javascript'>
stlib.shareEgg.createEgg('shareThisShareHeart', ['facebook','twitter','googleplus','linkedin','oknotizie','pinterest','sharethis','email'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareheart'});
</script>
<!-- End Heart Share Code  -->

Si salva il modello. Con questo codice il cuore si posizionerà in basso a sinistra a una distanza pari al 3% delle dimensioni del layout. Questo valore può naturalmente essere modificato. All'interno del cuore ho inserito i bottoni di Facebook, Twitter, Google Plus, LinkedIn, OKnotizie e Pinterest. Inoltre ho messo anche il bottone di condivisione universale di colore verde che permette di postare la pagina in centinaia di social bookmarking e l'icona per inviare l'articolo per email.

Possono essere tolti i social che non interessano oppure se ne possono aggiungere altri mantenendo la stessa sintassi. Per conoscere i social network supportati e il nome esatto da aggiungere, andate su ShareThis Tools e provate a configurare un altro stile di bottoni.

Se invece volete inserite il cuore con i bottoni di condivisione subito sotto ai post andate su Modello > Modifica HTML > Procedi e espandete i modelli widget. Incollate il primo codice come illustrato precedentemente quindi cercate la riga <div class='post-footer'> e, subito sopra, incollate

<!-- Start Heart Share Code by  http://www.ideepercomputeredinternet.com  -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='shareEgg' id='shareThisShareHeart'/>
<script type='text/javascript'>
stlib.shareEgg.createEgg('shareThisShareHeart', ['facebook','twitter','googleplus','linkedin','oknotizie','pinterest','sharethis','email'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareheart'});
</script>
</b:if>
<!-- End Heart Share Code  -->

Si salva il modello. Ricordo che in entrambi i casi Blogger modificherà il codice inserendo altri simboli al posto delle virgolette. Il codice tra parentesi quadre diventerà per esempio

[&#39;facebook&#39;,&#39;twitter&#39;,&#39;googleplus&#39;,&#39;linkedin&#39;,&#39;oknotizie&#39;,&#39;pinterest&#39;,&#39;sharethis&#39;,&#39;email&#39;]

Ho preferito lasciare le virgolette per rendere più semplice la personalizzazione dei social network di cui visualizzare i bottoni e del loro ordine di inserimento.


22 commenti :

  1. Molto carino. Chapeau!

    Proverò a inserirlo nel mio blog, visto che il bottone flottante con tutti i servizi di AddThis con Chrome non funziona correttamente.

    RispondiElimina
  2. L ho messo anche io! Le mie fashioniste lo ammireranno credo!
    Solo qualche domanda...visto che io già usavo sharthis, questo cuore sommato al precedente servizio forse appesantisce la pagina!? Posso eliminare una parte del codice visto che era già presente il codice sharethis? Posso inserire il numero mio personale di sharethis?

    RispondiElimina
  3. mi sono accorto che il pulsante pinterest non funge, non visualizza le immagini da salvare o non visualizza nemmeno il titolo della pagina.

    RispondiElimina
  4. Inserendolo direttamente nel template, il cuore è visibile anche nella versione mobile del blog. Per evitarlo si può inserire la seconda parte del codice in un widget html?

    RispondiElimina
  5. @...
    Sono contento che questo widget sia piaciuto così tanto :)

    @ivabellini
    In effetti non vengono rilevate le immagini del blog cliccando sull'icona di Pinterest ma solo il titolo. Puoi mettere il tuo ID personale e dovrebbe funzionare lo stesso così come puoi mettere sopra a < /head > solo le righe di codice che eventualmente non fossero ancora presenti. Le altre è inutile metterle due volte.

    @Bastet
    Nella seconda parte del post ho illustrato come inserire il widget alla fine dell'articolo. Puoi sempre provare a metterlo in un widget HTML. In questo caso però dovresti togliere queste due righe
    < div style='position: fixed; bottom: 3%; left: 3%;' >
    e < /div >
    P.S. Ho aggiunto gli spazi alle righe perché sono pigro e non mi andava di fare la conversione del codice per poterlo postare nei commenti.

    RispondiElimina
    Risposte
    1. Ho lasciato il codice così com'era, limitandomi a variare le percentuali. Non potevo inserirlo sotto il post perché c'è già il pulsante di Printfriendly.

      A ogni modo, il risultato rimane uguale... solo che non si vede nella versione mobile. ;)

      Grazie mille.

      Elimina
    2. Sopra < /head > c era solo il tuo codice perchè il codice di comando di sharethis nel mio blog è posizionato in un widget, così ho cambiato solo l' ID, se troverai una soluzione a pinterest, la mail e lo share verde, ti prego di farci un atro post.

      Elimina
    3. @ivabellini
      Ancora è un widget in Beta che non è stato neppure inserito nelle opzioni dei bottoni del loro sito quindi è probabile che ci stiano ancora lavorando sopra.

      Elimina
  6. lo terrò sicuramente presente! (figurati se non mi piace... ^_^ )

    ma secondo te, come potrei metterlo a fianco del "like" di facebook, presente sotto il titolo dei post?

    RispondiElimina
    Risposte
    1. @Naima
      Con questo sistema rimane sempre fisso nella pagina. Puoi modificare la posizione agendo su questi parametri
      bottom: 3%; left: 3%;

      Elimina
    2. mi sa che mi sono spiegata male o non ho capito: vorrei metterlo all'interno dei post (come la tua demo dell'uovo, per capirci), ma non alla fine, bensì all'inizio, sotto il titolo, di fianco al pulsante "like" di facebook.

      Elimina
    3. @Naima
      Leggi la seconda parte del post. L'ultimo codice invece di inserirlo sopra alla riga < div class='post-footer' > incollalo sotto al codice del tuo bottone di facebook che dovrebbe essere subito sopra alla riga < data:post.body/ >. Se poi i bottoni vengono non allineati o troppo attaccati puoi usare il codice si questo post
      http://www.ideepercomputeredinternet.com/2011/06/come-allineare-i-bottoni-di-facebook.html
      usando però solo lo style e senza inserire la tabella.

      Elimina
    4. sono la solita pecora nera: a me proprio non si carica... :((((

      Elimina
    5. per caso, riesci ad aiutarmi? non è che il servizio sia sospeso (o ci stiano lavorando) oppure che non sia compatibile con certi modelli?

      non me lo spiego :(

      Elimina
    6. @Naima
      La Demo funziona quindi è tutto OK. Poi se tu vuoi spostare il widget da un'altra parte può darsi che la cosa non funzioni.

      Elimina
    7. guru, mi spiace disturbarti ancora.

      ho fatto la prova anche mettendolo subito sotto ai post, ma non si visualizza proprio (si vede però che è stato creato uno spazio dove dovrebbe posizionarsi).

      quindi, capito a questo punto che non è un problema di posizione, a cosa si potrebbe attribuire la colpa?

      Elimina
    8. @Naima
      Non lo so. Prova a fare il tentativo di convertire il codice incollandolo in questo sito
      http://blogcrowds.com/resources/parse_html.php
      cliccando su Parse per poi incollare il codice convertito in XML. Ma non garantisco.

      Elimina
  7. bell'effetto, ma volevo sapere come faccio a spostare il tasto di condivisione addthis, che adesso si trova a sinistra e a fianco della scritta commenti, a destra, ma sempre sulla stessa linea.
    grazie

    RispondiElimina
    Risposte
    1. @# Sostituisci questi valori bottom: 3%; left: 3%;
      con bottom: 3%; right 10%; poi vedi se è il caso di modificare qualche valore per adattarlo meglio

      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