L'Impolitica su un piatto d'argento.

5 feb 2010

Inserire la barra dei bottoni social-network in blogger








Di bottoni per condividere sui social network ce ne sono ormai una miriade sul web. Ma bisogna trovare i bottoni giusti per i social network giusti con le giuste e chiare istruzioni per inserire nel blog. Ci sono esperienze di blogger che prima dell'avvento dei social network facevano un numero di visite molto basse. Ora è sicuro che, per avere un giusto ritorno in numero di visite dai social network tramite questi bottoncini, bisognerà studiarsi bene le strategie da utilizzare. Ma intanto questo è un ottimo inizio.
Questo metodo semplice, veloce e sexy, l'ho appreso da Parsifal in questo POST . Non ho problemi a consigliarvi di leggere il suo post se volete oppure potete continuare a leggere la spiegazione qui sotto.

Intanto mettetevi pronti per modificare l'html del vostro blog. Per prima cosa cercate questa riga

</head>

e subito sopra incollate ques'altra porzione di 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 -->


Intanto, fatto questo vi consiglierei di salvare e tirare un sospiro di sollievo. Ora belli calmi calmi vi cercate quest'altra riga

<div class='post-footer'>

e proprio sotto questa riga incollate quest'altra porzione di 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>



Benissimo. Se fin qui avete fatto bene (di copiare ed incollare in fondo si tratta) allora vi basterà soltanto sostituire URL dei feed del blog con il vostro indirizzo feed. Ora salvate e visualizzate un vostro post, vedrete che in basso alla fine dell'articolo si visualizzerà la barra per condividere frai i più famosi social network come facebook e altri.


Se avete dubbi lasciatemi un commento. Se tutto sommato questo post vi è tornato utile allora abbonatevi al mio feed.