Pubblicato il 07/01/10 - aggiornato il  | 25 commenti :

Come inserire il Sexy Widget con i bottoni di condivisione dei post sui Social Network.

Questo widget proviene da un plugin sviluppato per Wordpress ed è stato adattato per blog su Blogger. Avrete certamente visto alla fine del post una serie più o meno lunga di bottoni di voto per condividere l'articolo nei vari servizi quali Facebook, Twitter, Del.icio.us, Tchnorati, ecc. La particolarità di questi bottoni sta nella presenza di una immagine di sfondo con il testo "Sharing is sexy!" e nell'animazione delle varie icone quando si puntano con il mouse

Per rendervi conto del suo aspetto e del suo funzionamento andate nel post del mio blog di prova


        I bottoni per la condivisione sexy degli articoli -
    Per l'installazione si va su Layout > Modifica HTML  e si scarica il modello completo. Dopo aver espanso i modelli widget si cerca la riga
    </head>
    e, immediatamente sopra, si incolla il seguente codice

    <!-- Sexy Bottoni di Condivisione Inizio -->
    <style type='text/css'> div.sexy-bookmarks { height:54px; background:url(&#39;http://goo.gl/QNwB&#39;) no-repeat left bottom; position:relative; width:540px; }
    div.sexy-bookmarks span.sexy-rightside { width:17px; height:54px; background:url(&#39;http://goo.gl/QNwB&#39;) no-repeat right bottom; position:absolute; right:-17px; }
    div.sexy-bookmarks ul.socials { margin:0 !important; padding:0 !important; position:absolute; bottom:0; left:10px; }
    div.sexy-bookmarks ul.socials li { display:inline-block !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:48px !important; cursor:pointer !important; padding:0 !important; }
    div.sexy-bookmarks ul.socials a { display:block !important; width:48px !important; height:29px !important; font-size:0 !important; color:transparent !important; }
    .sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover { background:url(&#39;http://goo.gl/kcsc&#39;) no-repeat !important; }
    .sexy-furl { background-position:-300px top !important; }
    .sexy-furl:hover { background-position:-300px bottom !important; }
    .sexy-digg { background-position:-500px top !important; }
    .sexy-digg:hover { background-position:-500px bottom !important; }
    .sexy-reddit { background-position:-100px top !important; }
    .sexy-reddit:hover { background-position:-100px bottom !important; }
    .sexy-stumble { background-position:-50px top !important; }
    .sexy-stumble:hover { background-position:-50px bottom !important; }
    .sexy-delicious { background-position:left top !important; }
    .sexy-delicious:hover { background-position:left bottom !important; }
    .sexy-yahoo { background-position:-650px top !important; }
    .sexy-yahoo:hover { background-position:-650px bottom !important; }
    .sexy-blinklist { background-position:-600px top !important; }
    .sexy-blinklist:hover { background-position:-600px bottom !important; }
    .sexy-technorati { background-position:-700px top !important; }
    .sexy-technorati:hover { background-position:-700px bottom !important; }
    .sexy-myspace { background-position:-200px top !important; }
    .sexy-myspace:hover { background-position:-200px bottom !important; }
    .sexy-twitter { background-position:-350px top !important; }
    .sexy-twitter:hover { background-position:-350px bottom !important; }
    .sexy-facebook { background-position:-450px top !important; }
    .sexy-facebook:hover { background-position:-450px bottom !important; }
    .sexy-mixx { background-position:-250px top !important; }
    .sexy-mixx:hover { background-position:-250px bottom !important; }
    .sexy-script-style { background-position:-400px top !important; }
    .sexy-script-style:hover { background-position:-400px bottom !important; }
    .sexy-designfloat { background-position:-550px top !important; }
    .sexy-designfloat:hover { background-position:-550px bottom !important; }
    .sexy-syndicate { background-position:-150px top !important; }
    .sexy-syndicate:hover { background-position:-150px bottom !important; }
    .sexy-email { background-position:-753px top !important; }
    .sexy-email:hover { background-position:-753px bottom !important; } </style>
    <!-- Sexy Bottoni di Condivisione Fine -->
    L'URL http://goo.gl/QNwB è quello di una immagine che può essere anche sostituita con un altra magari con una scritta in italiano. Adesso cercate la riga
    <div class='post-footer'>
    e, immediatamente sotto, incollate il seguente codice
    <b:if cond='data:blog.pageType == &quot;item&quot;'> 
    &lt;div class=&#39;sexy-bookmarks&#39;&gt; <ul class='socials'>
    <li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li><li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <li class='sexy-syndicate'><a href='URL dei feed del blog' title='Iscriviti ai Feed'/></li>
    <li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li> </ul>
    &lt;span class=&#39;sexy-rightside&#39;/&gt;&lt;/div&gt;
    </b:if>
    Salvate il modello. I bottoni di condivisione saranno visibili sono nei post in quanto sono state inserite due righe per porre questa condizione. I servizi presenti sono Delicious, Digg, Technorsti, Reddit, StumbleUpon, DesignFloat, Facebook, Twitter (attraverso Twittis) e Furl. Dovrà essere inserito il feed del blog al posto della scritta evidenziata di rosso. Sarà del tipo http://nomeblog.blogspot.com/feeds/posts/default. Enjoy.


    25 commenti :

    1. I want to quote your post in my blog. It can?
      And you et an account on Twitter?

      RispondiElimina
    2. @Anonymous
      Yes, you can quote it. My account on Twitter is
      http://twitter.com/parsifal32

      RispondiElimina
    3. scusa parsifal, ma non trovo la stringa div class='post-footer'

      puoi aiutarmi?

      RispondiElimina
    4. esiste un widget per impostarlo in automatico?
      ho un templete customised e ho provato di tutto per inserire questo codice sul'html ma non funziona. altri suggerimenti?
      il mio blog e' www.viaggiatorifaidate.blogspot.com
      grazie mille

      RispondiElimina
    5. @marta
      il tuo modello è molto personalizzato. La cosa che impedisce probabilmente al sexy widget di funzionare è che sono presenti già nel modello i link "read more" per gli articoli sintetici.
      Non mi sento di darti suggerimenti...
      Ciao

      RispondiElimina
    6. L'ho aggiunto correttamnete però non so perchè spunta una linea tratteggiata, ecco il sito: www.bbackground.com

      RispondiElimina
    7. @Bbackground
      Non me lo so spiegare, forse è un "retaggio" del tuo modello.

      RispondiElimina
    8. Fa niente, proverò qualche soluzione. Grazie della risposta.

      RispondiElimina
    9. Io ho fatto tutto secondo la procedura ma non mi è apparso niente sul blog.
      http://vitoo22.blogspot.com

      idee?

      RispondiElimina
    10. @vitoo22 Ma mi stai prendendo in giro? ^_^
      Funziona perfettamente, guarda tu stesso
      http://vitoo22.blogspot.com/2011/04/discussione.html
      è ovvio che si debba vedere solo nei post...

      RispondiElimina
    11. @Ernesto T.
      ah scusami ernesto, non lo vedevo nella home page... colpa mia non avevo capito quel discorso li.. adesso mi vado a leggere come metterlo da altre parti e come escludere i vari post...
      scusami ancora ma sono agli inizi.. dimmi una cosa, lo posso mettere anche nel mio sito con la stessa procedura o si deve lavorare sul codice in quel caso?

      grazie mille..

      RispondiElimina
    12. @vitoo22 Si può installare su tutti i blog di Blogger

      RispondiElimina
    13. @Ernesto T.
      Ok sono anche riuscito a fare la modifica ed ora lo visualizzo anche nella home.

      grazie mille dell'aiuto!! davvero guida facile da usare anche per chi non ha conoscenze di codice!!

      ;)

      RispondiElimina
    14. Ciao, bellissima guida, ma c'è un problema.. io l'ho messo in home page
      togliendo i ''b:if...'' ma quando vado a condividere un post, mi condivide tutta la pagina, cioè la home page.. come faccio a far condividere il post e non l'home page?

      RispondiElimina
    15. @Curiosità Da Condividere Se lo metti in home è chiaro che condivide la home! Viene condivisa la pagina il cui indirizzo è nella barra del browser. Francamente non vedo la necessità di mostrarlo anche in home, appesantisce parecchio e poi la home è la pagina meno vista del blog.

      RispondiElimina
    16. @Ernesto T.
      Si forse hai ragione.. meglio impostare il blog diversamente...
      Comunque grazie di tutte le tue guide, sei fantastico! :D

      RispondiElimina
    17. Ottima guida.
      Salvo che a me non funziona (viene visualizzato un elenco puntato vuoto, ci sono osservazioni che dovrei sapere?
      www.siroindustry.blogspot.com
      Grazieee

      RispondiElimina
    18. @Siro
      E' sparito il widget anche nel mio post di prova
      http://demo-parsifal32.blogspot.com/2010/01/i-bottoni-per-la-condivisione-sexy.html
      E' un problema di hosting su Skydrive che oggi non funziona. Se non si risolve da solo provo a vedere se riesco a caricare le immagini su un altro servizio.

      RispondiElimina
    19. @Siro
      Il widget è stato ripristinato. Adesso non ci dovrebbero essere problemi.

      RispondiElimina
    20. @Ernesto
      Ho riprovato, ma niente.
      Forse c'è qualche widget che crea conflitto.

      RispondiElimina
    21. ciao ernesto!buon pomeriggio.volevo sapere se è possibile inserire il bottone di ok notizie,in aggiunta o in sostizione di qualche bottone,come ho visto in alcuni blog?

      RispondiElimina
    22. @Tutti ...
      Tutto sta nella modifica di questa immagine
      http://goo.gl/kcsc
      con l'inserimento di alcuni bottoni al posto degli altri che eventualmente si possono togliere. Bisogna essere bravi con la grafica (io non lo sono). Per il codice ci si può aiutare utilizzando quello di questo post
      http://www.ideepercomputeredinternet.com/2008/07/inserire-i-bottoni-in-un-blog-con-con.html
      IL concetto è che ci sono due classi distinte per l'aspetto dei bottoni in condizioni normali e puntati con il mouse (esempio .sexy-twitter e .sexy-twitter:hover)con l'immagine che si solleva.

      RispondiElimina
    23. ti ringrazio!ho visto qualcuno che l'avevo fatto,pensavo fosse più semplice eheh meglio lasciar perdere non sono proprio pratico,in ostituizone metto un pulsante share dove c'è ok notizie.grazie tanto!buona giornata!

      RispondiElimina

    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