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 [code]]czoxNzpcInNvY2lhbC1idXR0b24ucGhwXCI7e1smKiZdfQ==[[/code] 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 [code]]czoxMzpcInZvc3Ryb0FjY291bnRcIjt7WyYqJl19[[/code]. 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 [code]]czo5Olwic3R5bGUuY3NzXCI7e1smKiZdfQ==[[/code] 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 [code]]czo3OlwiY29udGVudFwiO3tbJiomXX0=[[/code], ma anche in questo caso dipende da vostro tema, quindi potrebbe essere necessaria qualche prova:

[code]]czoxMTpcIiZsdDtkaXYgaWQ9XCI7e1smKiZdfQ==[[/code][code]]czoxNjpcIlwic29jaWFsLWJ1dHRvbnNcIlwiO3tbJiomXX0=[[/code][code]]czoxNDpcIiZndDsmbHQ7P3BocMKgXCI7e1smKiZdfQ==[[/code][code]]czo3OlwiaW5jbHVkZVwiO3tbJiomXX0=[[/code] [code]]czoxNzpcIihURU1QTEFURVBBVEggLsKgXCI7e1smKiZdfQ==[[/code][code]]czoyMDpcIlwnL3NvY2lhbC1idXR0b24ucGhwXCdcIjt7WyYqJl19[[/code][code]]czoyMDpcIik7ID8mZ3Q7Jmx0Oy9kaXYmZ3Q7XCI7e1smKiZdfQ==[[/code]

Ovviamente, non esistono solo i pulsanti di Facebook, Twitter e Google+1, potete inserirne altri, semplicemente aggiungendo il relativo codice nel file [code]]czoxNzpcInNvY2lhbC1idXR0b24ucGhwXCI7e1smKiZdfQ==[[/code]. 😉

Alla prossima..

(Nessun voto)

Loading...