Aggiungere pulsanti sociali laterali nella sharebar in WordPress senza plugin

Dopo aver visto la lista dei migliori plugin per inserire i pulsanti sociali in WordPress, e dopo aver capito che i plugin possono rallentare il proprio blog, ecco che ti propongo una soluzione alternativa: inserire i pulsanti sociali lateralmente in posizione fissa, con effetto fadein e fadeout, senza plugin, ma solamente smanettando un po’ con il codice 😯

Il risultato

Il risultato è un contenitore laterale fisso (ad esempio a sinistra) dove sono inseriti i pulsanti sociali belli grossi:

L’aspetto del contenitore è completamente personalizzabile tramite codice CSS, quindi se lo vuoi un po’ più a sinistra, a destra, rettangolare o altro, lo potrai fare tranquillamente senza nessun problema. È possibile inserire anche altri pulsanti sociali, ma per questo ci devi pensare te 🙂

Il codice

Per aggiungere la sharebar laterale fissa (il contenitore con i pulsanti) aggiungi questo codice nel file functions.php del tuo tema (salvane una copia prima di modificarlo).

[php]

/*************************
* MOSTRA LA SHAREBAR LATERALE
* Author: Roberto Iacono
* Site: https://www.robertoiacono.it/
****************************/
function ri_sharebar() {
$ri_sharebar = ”;
$ri_sharebar .= ‘
<div id="ri_share">
<div class="sbutton" id="ri_share_twitter">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html?url=’. get_permalink() .’&amp;count=vertical&amp;via=robertoiacono&amp;text=’. preg_replace(‘/\%/’,”, get_the_title()) .’" style="width:65px; height:65px;"></iframe>
</div>
<div class="sbutton" id="ri_share_fb">
<iframe src="//www.facebook.com/plugins/like.php?href=’. get_permalink() .’&amp;send=false&amp;layout=box_count&amp;width=65&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=65&amp;appId=161799020519349" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:65px; height:65px;" allowTransparency="true"></iframe>
</div>
<div class="sbutton" id="ri_share_gplusone">
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
</div>’;
echo $ri_sharebar;
}
[/php]

Aggiungi questo codice prima di </body>nel file footer.php:

[php]

<script type="text/javascript">
var $ri_sharebar = jQuery.noConflict();
$ri_sharebar(window).scroll(function() {

if (($ri_sharebar(this).scrollTop() > 300) && ($ri_sharebar(this).scrollTop() < document.getElementById("content").offsetHeight – 800)) {
$ri_sharebar("#ri_share").fadeIn("medium");
} else {
$ri_sharebar("#ri_share").fadeOut("medium");
}

});
</script>

[/php]

Poi aggiungi questo codice nel file single.php prima dell’ultimo </div>, se vuoi mostrare la barra negli articoli:

[php]
<?php if (function_exists(‘ri_sharebar’)) ri_sharebar(); ?>
[/php]

Diamo un po’ di stile alla barra con il codice CSS, da incollare alla fine del file style.css:

[css]
#ri_share {position:fixed; top:40%; display: none;margin-left:-107px; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:5px 5px 2px 5px;z-index:10;}
#ri_share .sbutton {text-align:center; margin:5px 5px 0 5px;}
#ri_share .ri_share_fb {margin-left:6px;}
#___plusone_3{ width:72px !important; }
[/css]

Un suggerimento? Fai un piccolo controllo di come si vede la barra su tutti i browser più importanti, come FireFox, Chrome, IE…

Spiegazione del Codice

Partendo dal presupposto che non sono un programmatore, quindi il codice potrà essere sicuramente migliorabile, ecco cosa potrebbe esserti utile sapere:

ri_sharebar()

La funzione ri_sharebar() mostra a video il contenitore con i relativi pulsanti. Di default, ho inserito solamente Facebook, Twitter e Google+, ma puoi aggiungerne quanti ne vuoi, adattando il codice del nuovo pulsante a quello che ho inserito io.

Un consiglio? Se aggiungi i pulsanti con codice iframe, avrai meno funzionalità, ma saranno molto più veloci da caricare.

Se non visualizzi il pulsante di Google+, probabilmente è perchè devi ancora aggiungere un altro codice, più precisamente questo:

[php]
<script type="text/javascript">
(function() {
var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;
po.src = ‘https://apis.google.com/js/plusone.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);
})();
</script>
[/php]

da aggiungere prima di </body> nel footer.php.

add_ri_sharebar_scripts()

La funzione add_ri_sharebar_scripts() aggiunge lo script per l’effetto fadein e fadeout direttamente nel footer. Per poter funzionare, ha bisogno che nel file footer.php sia presente il codice wp_footer(). Se non c’è, aggiungilo prima di </body> in questo modo:

[php]
<?php wp_footer(); ?>
[/php]

Il numero 300 che vedi alla riga 5 del secondo codice, indica che la sharebar verrà mostrata dopo 300px.

Il numero 800 che vedi sempre alla riga 5, indica che la sharebar verrà nascosta a 800px dalla fine dell’elemento “content”.

La stringa “content” indica che il codice per nascondere la sharebar, fa riferimento all’elemento html con id uguale a content. Cosa vuol dire? Che la sharebar verrà nascosta 800px prima della fine dell’elemento id=”content” (che dovrebbe essere presente in tutti i temi). Per trovare id e/o l’elemento, leggi questo articolo su come usare FireBug. Se non è presente questo elemento, usane un altro.

Puoi cambiare la velocità di fadein e fadeout modificando la stringa “medium” in “fast” (veloce) o “slow” (lento).

PS: la soluzione migliore sarebbe quella di inserire il codice javascript in un file .js esterno, e poi includerlo tramite la funzione wp_enqueue_script.

codice CSS

La prima riga è relativa allo stile del contenitore.

• top:40%; – indica che la barra viene mostrata a partire dal 40% della schermata del computer (è una misura relativa)
• margin-left:-107px; – puoi spostare la sharebar più a destra o più a sinistra modificando il valore del margine sinistro
• border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px; – per arrotondare gli angoli.

La seconda riga è relativa al pulsante di Twitter, la terza al pulsante di Facebook e la quarta a quello di Google+. Da notare che per Google+ potresti avere anche un id diverso da “___plusone_3”, quindi controlla sempre con firebug.

Cosa ne pensi?

Hai suggerimenti per migliorare il codice?

Fammi vedere se la sharebar che ho inserito sul mio blog con questo codice, funziona bene… clicca su quei pulsanti 😉

Aggiornamenti

Pasquale Scarpati mi ha fatto notare che il codice ha un problema con le categorie. Se si prova a condividere la pagina della categoria sui social, compare nome+url del primo articolo (e non della categoria). Quindi ha proposto questo codice con qualche modifica in più:

[php]

function ri_sharebar() { $ri_sharebar = ”; $ri_sharebar .= ‘ <div id="ri_share"> <div class="sbutton" id="ri_share_twitter"> <iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html?url=’. "http://" . $_SERVER[‘HTTP_HOST’] . $_SERVER[‘REQUEST_URI’] .’&amp;via=robertoiacono&amp;count=vertical&amp;text=’. wp_title( ‘|’, false ) . ‘" style="width:65px; height:65px;"></iframe> </div> <div class="sbutton" id="ri_share_fb"> <iframe src="//www.facebook.com/plugins/like.php?href=’. "http://" . $_SERVER[‘HTTP_HOST’] . $_SERVER[‘REQUEST_URI’] .’&amp;send=false&amp;layout=box_count&amp;width=65&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=65&amp;appId=161799020519349" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:65px;" allowTransparency="true"></iframe> </div> <div class="sbutton" id="ri_share_gplusone"> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g:plusone size="tall"></g:plusone> </div> </div>’; echo $ri_sharebar; }
[/php]

Grazie Pasquale per l’integrazione!