In questo articolo vedremo come aggiungere i pulsanti social dei maggiori social network negli articoli del nostro sito.
In ogni sito o blog che si rispetti i pulsanti social sono ormai un qualcosa che non può mancare visto che ormai ogni utente è propenso a condividere i contenuti che gli piacciono con i propri amici e conoscenti.
Soprattutto con l’arrivo del pulsante +1 di Google questi pulsanti diventano indispensabili per aumentare la diffusione dei contenuti del proprio sito tra gli utenti.
Molti dei template disponibili per le più diverse piattaforme di cms e blogging (wordpress, joomla ecc.) spesso contengono già l’implementazione per la condivisione dei contenuti sui social network ma spesso sono contenuti all’interno di interfacce pesanti e poco usabili e spesso gli utenti neanche le notano.
Se utilizziamo un template che non contiene questa possibilità possiamo rimediare utilizzando qualche componente o plug-in studiato appositamente.
Il miglior modo per posizionare i pulsanti dei social network è quello di inserirli manualmente nella zona del sito in cui vogliamo che compaiano che di solito è subito sotto al titolo del post.
Metodo 1: pulsanti integrati nel post
Inserire il codice necessario per il pulsante +1
Tra i tre pulsanti che andremo ad inserire nei nostri post sicuramente quello più importante è sicuramente Google +1 poiché permette di votare il gradimento di un articolo.
Per far funzionare bene questo pulsante è necessario inserire la seguente porzione di codice nel file header.php prima della chiusura del tag “<head>“:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"> {lang: 'it'} </script>
Qui di seguito un esempio:
Inserire il codice necessario per i pulsanti nei post
Una volta inserito il codice necessario al funzionamento del pulsante di Google nel file header.php non ci resta che inserire il codice vero e proprio per la visualizzazione dei 3 pulsanti all’interno degli articoli del nostro sito.
Il modo migliore è visualizzare tutti i pulsanti su un’unica riga in modo da non rovinare l’aspetto dei nostri articoli.
La prima cosa da fare è aprire il file single.php e posizionarsi sotto il codice del titolo.
Posizionatevi sotto il tag “<?php the_title(); ?>” e inserire il seguente codice:
<!-- codice pulsante mi piace di Facebook e tasto invia --> <div style="float:left;"> <script src="http://connect.facebook.net/it_IT/all.js#xfbml=1"> </script> <fb:like href="" width="170" layout="button_count" send="true" font=""></fb:like> </div> <!-- codice pulsante Twitter --> <div style="float:left;"> <a href="https://twitter.com/share" class="twitter-share-button" data-via="username-twitter" data-lang="it">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> <!-- codice pulsante Google +1 --> <g:plusone size="medium"></g:plusone> </div> <!-- codice per annullare le proprietà float in modo da non modificare gli elementi seguenti --> <br clear="all"/>
Per quanto riguarda il pulsante Twitter sostituite al posto del testo “username-twitter” il vostro username.
Qui di seguito un esempio:
Abbiamo finito.
Ora avrete i pulsanti social subito sotto il titolo dell’articolo come potete vedere su questo sito.
Ovviamente potete posizionarli in qualsiasi parte del sito.
Metodo 2: pulsanti in un box separato
Abbiamo visto come integrare i pulsanti all’interno del post sotto il titolo. Questo metodo è utile però ha il difetto che l’utente per condividere l’articolo debba necessariamente tornare all’inizio.
Il metodo che vedremo ora permette di avere un box laterale con i pulsanti che scorrono insieme alla pagina in modo da essere sempre utilizzabili.
Creare un file con il codice dei pulsanti
Per un fatto di semplificazione la cosa migliore è creare un file social-button.php contenente il codice dei pulsanti.
Per farlo create un nuovo file con Dreamweaver, o un qualsiasi altro editor, e copiateci il seguente codice:
<!-- codice pulsante mi piace di Facebook e tasto invia --> <div id="fb-root"></div> <script> (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/it_IT/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> <div class="buttons"> <fb:like send="true" layout="box_count" show_faces="false"></fb:like> </div> <!-- codice pulsante Twitter --> <div class="buttons"> <a href="https://twitter.com/share" class="twitter-share-button" data-size="large" data-via="username-twitter" data-lang="it">Tweet</a> <script> !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); </script> </div> <!-- codice pulsante Google +1 --> <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>
Salviamo il file come social-button.php e carichiamolo nella cartella del tema.
Ora andiamo in single.php e aggiungiamo la seguente riga di codice dove vogliamo che compaia il box.
Di solito la riga di codice va posizionata dopo “<div id=content>“.
<div id="social-buttons"> <?phpinclude(TEMPLATEPATH .'/social-button.php'); ?> </div>
Ora non dobbiamo fare altro che impostare il css del box nel file style.css. Potete utilizzare il seguente codice come base e poi modificarlo a vostro piacimento.
#social-buttons {
position:fixed;
width:73px;
margin:0px 0px 0px -120px;
background:#fff;
border: 1px solid #ddd;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;}
.buttons{margin:10px 0px;text-align:center;}
Abbiamo finito.
Ora non vi resta che scegliere lo stile che più si addice al tema del vostro sito.
Se avete problemi non esitate a scrivermi o a commentate l’articolo.
