Forse non tutti avranno notato che ho eliminato i pulsanti di collegamento ai vari social network in fondo ad ogni articolo, per sostituirli con una “social box” fissa rispetto alla pagina accanto ad ogni articolo (preso singolarmente)..

L’idea originale non è mia, devo ammetterlo, e devo anche dare tutti i meriti del caso agli amici di WPStyle, che mi hanno anche fornito le dritte per implementarla..

Per realizzarla, occorre per prima cosa creare un file che chiamiamo social-button.php e che, una volta completo, andremo a caricare nella stessa directory del nostro tema. Tale file conterrà il seguente codice:

<div class="buttons">
<div class="buttons" id="fb-root"></div><script src="https://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="true" layout="box_count" show_faces="true" font=""></fb:like>
<div class="buttons"><a class="twitter-share-button" href="http://twitter.com/share" data-count="vertical" data-via="RedBlue81" data-lang="it">Tweet</a>
<script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script></div>
<div class="buttons"><script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'it'}</script>
<g:plusone size="tall"></g:plusone></div>
</div>

Ovviamente ricordatevi di mettere il nome del vostro account su Twitter al posto di vostroAccount. Potete già effettuare l’upload di questo file sul server, ricordando di metterlo nella directory del vostro tema.

A questo punto, conviene creare lo stile CSS che si dovrà integrare col vostro tema. Purtroppo qui non posso aiutarvi più di tanto, nel senso che la scelta del colore di sfondo, le distanze dagli altri elementi del tema, il bordo e qualsiasi altro elemento grafico in genere sono strettamente legati al tema che utilizzate e ai vostri gusti personali.

Quello che posso fare è riportare quello che ho usato io, per darvi almeno una traccia di quello che serve:

#social-buttons{
 position:fixed;
 width:90px;
 margin:-10px 0px 0px -97px;
 background:#fff;
 border: 0;
 -moz-border-radius-topleft: 6px;
 -khtml-border-top-left-radius: 6px;
 -webkit-border-top-left-radius: 6px;
 -moz-border-radius-bottomleft: 6px;
 -khtml-border-bottom-left-radius: 6px;
 -webkit-border-bottom-left-radius: 6px;
 border-top-left-radius: 6px;
 border-bottom-left-radius: 6px;
 text-align:center;
}
.buttons{
 margin:7px 7px 7px 7px;
 text-align:center;
}

Dovete inserire questo codice, opportunamente adattato ai vostri scopi, all’interno del file style.css che si trova nella directory del tema stesso.

Non resta che richiamare il file creato all’inizio inserendo questa riga di codice nel file single.php, generalmente va bene subito dopo il tag content, ma anche in questo caso dipende da vostro tema, quindi potrebbe essere necessaria qualche prova:

&lt;div id="social-buttons"&gt;&lt;?php include (TEMPLATEPATH . '/social-button.php'); ?&gt;&lt;/div&gt;

Ovviamente, non esistono solo i pulsanti di Facebook, Twitter e Google+1, potete inserirne altri, semplicemente aggiungendo il relativo codice nel file social-button.php. 😉

Alla prossima..

Share
Molto scarsoScarsoSufficienteBuonoOttimo (Nessun voto)
Loading...

Licenza

Creative Commons License
RedBlue's Blog di RedBlue è rilasciato sotto licenza Creative Commons 2.5 Italia.

Badges

Cionfs'Forum CMS Check PageRank

Other

Se hai trovato utile questo blog, supportalo con una piccola donazione per l'hosting..


Locations of visitors to this page