Utilizzando questo sito accetti il nostro uso dei cookie. Approfondisci

Aggiungere pulsanti sociali laterali nella sharebar in WordPress senza plugin

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:

barra laterale

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).


/*************************
* MOSTRA LA SHAREBAR LATERALE
* Author: Roberto Iacono
* Site: http://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;
}

Aggiungi questo codice prima di </body>nel file footer.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>

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

<?php if (function_exists('ri_sharebar')) ri_sharebar(); ?>

Diamo un po’ di stile alla barra con il codice CSS, da incollare alla fine del file style.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; }

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:

<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>

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 wp_footer(); ?>

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ù:


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; }

Grazie Pasquale per l’integrazione!


VUOI CREARE IL TUO SITO O BLOG WORDPRESS?

Scegli uno tra i migliori hosting per WordPress

HOSTING

Scegli uno tra i migliori hosting per WordPress

Hosting

Scegli uno tra i migliori temi WordPress professionali

GRAFICA

Scegli uno tra i migliori temi WordPress professionali

Grafica

Guide e risorse per gestire il sito WordPress a 360°

GESTIONE

Guide e risorse per gestire il sito WordPress a 360°

Gestione

EMAIL NEWSLETTER

Vuoi ricevere i miei ultimi articoli
comodamente nella tua email? È gratis!
Ben 3552 persone lo stanno già facendo!
Anonimo
   
con le dita sempre in costante, frenetico movimento sulla tastiera… vengo spesso trascinato e catturato “in rete” per colpa delle mille idee che mi girano per la testa (prima o poi troverò quella giusta)… dal futuro incerto (nonostante una laurea, e chi non lo è?..siamo in tanti!) .. credo fortemente nella condivisione della conoscenza!
37 Commenti
  • Andrea Barghigiani

    Grazie mille per questo tutorial Roberto!

    Veramente molto utile si questo, che andrò ad applicare anche al mio sito, che il percorso di articoli che stai realizzando per avere un WordPress più veloce.

    Grazie per condividere questa conoscenza.

  • Mirko

    Roberto ho inserito il codice sul mio sito ma funziona male.
    La sharebar appare per un secondo e poi scompare..
    Articolo d’esempio:
    hwmaster.com/2013/03/11/michael-pachter-spara-a-zero-sulla-next-gen/

    • Roberto Iacono

      Mi pare che tu abbia corretto tutto, è così? Io lo vedo bene :)
      Dov’era l’errore?

      • Mirko

        Sì, adesso ho corretto!
        Però mi da’ problemi di visualizzazione con Firefox :(

      • Mirko

        niente..?

        • Roberto Iacono

          Io vedo tutto sistemato Mirko :) Prova a descrivere il problema…

          • Mirko

            Ecco uno screen di come lo vedo io con Firefox..
            grabilla.com/03317-e4ad0abf-4dfd-429e-9b7d-34811f611d52.png

          • Roberto Iacono

            Ok, grazie. È solo un problema di posizionamento del codice. Cambia la posizione. Prova ad esempio prima della funzione che richiama la sidebar…

  • Stefano

    Ciao Roberto, ho provato a mettere il codice ma mi manda in crash il sito con server error. Dreamweaver mi dice che c’è un errore di sintassi, quindi l’ho rimosso. Se riesci a fare un debug lo metto di sicuro. 😉

    • Roberto Iacono

      Ciao Stefano,
      probabilmente è qualche errore nello script… mi puoi mandare l’errore che ti dà Dreamweaver? A me risulta tutto ok…

  • Armando Armanner Ferri

    Ciao Roberto, complimenti e grazie per quello che scrivi 😀

    Sto strutturando il mio sito, sarà prevalentemente un sito portfolio, ma voglio includere una zona blog :)

    Stavo provando a inserire questa feature, ma quando carico il file functions.php nel child theme mi crasha il sito :(
    il file functions.php del tema child contiene solo

    inoltre l’editor di testo che uso (textwrangler) mi segnala tutto il contenuto tra $ri_sharebar .= ‘ e ‘; di un solo colore come se fosse errata la sintassi, però non me ne intendo di php..

    Grazie mille se vorrai aiutarmi :)

    • Roberto Iacono

      Ti ringrazio Armando, ho modificato la funzione, puoi darmi un feedback?

      • Armando Armanner Ferri

        Grazie a te per l’intervento, purtroppo non riesco a farla comparire, però com’è adesso il codice non mi crasha più il sito, semplicemente non sbuca fuori la barra.. jo provato a ripetere l’operazione più volte,
        questo è un articolo di esempio: armanner.it/hello-world/ l’ho fatto lungo appositamente per i test, ma nada :)

        • Roberto Iacono

          Ciao Armando,
          hai controllato di aver impostato correttamente l’ID a cui si deve aggenciare il codice javascript? Di default è “content”, ma nel tuo caso non c’è. Puoi usare “left-area” per il tuo.
          Fammi sapere.

          • Armando Ferri

            Grazie molte Roberto, appena ho tempo provo la modifica che mi suggerisci, per il momento mi sono affidato al plugin socialize per avere anche il call to action, ma tanto devo prima completare il sito eheheh poi tutte queste features le sistemo :)

            PS: a causa di un problema di connessione ho fatto un doppio/triplo post… scusami :)

      • Armando Armanner Ferri

        Ciao Roberto, grazie a te per l’aiuto, ho modificato i file ed ora non crasha piuù il sito, il problema è che comunque non esce la barra laterale.

        Ho provato più volte a fare da capo e controllare che non stessi sbagliando qualcosa, ma niente.. Grazie comunque :) al massimo userò Sharebar

  • Marco

    Ciao Roberto e grazie per le tue preziose guide. :)

    Ho seguito questa interessantissima guida per filo e per segno, inserendo il tutto nei vari file ma nel mio sito non visualizzo nulla. Dove sto sbagliando secondo te?…

    • Roberto Iacono

      Controlla nel sorgente della pagina se il codice viene caricato.
      Poi controlla se nel codice javascript fai riferimento ad una sezione del blog che esiste (tipo “content”)

      • Marco

        Ciao Roberto, non so ma non me lo visualizza. Controlla tu stesso se puoi. :)

        Grazie mille

  • Emanuele

    Se può essere d’aiuto anch’io ho avuto dei problemi nella visualizzazione (uso Firefox) ho risolto spostando il codice copiato in style.css prima di /* CONTENT AREA */. Ora mostra correttamente i pulsanti.
    I pulsanti appaiono quando scorrendo la pagina si raggiunge circa il 15-20% per poi scomparire una volta raggiunto il 75-80%. L’effetto è carino, è voluto? Si può rendere permanente la visualizzazione?

    • Marco

      Niente da fare, io il /* CONTENT AREA */ neanche lo ho nel mio stile. Uso un tema personalizzato, forse è quello che rompe le scatole :(

      • Roberto Iacono

        Basta che sostituisci il “content” del codice con un tuo id che è presente nella pagina…

        • Marco

          Scusa l’ignoranza Roberto, ma quale sarebbe un mio id? :p

    • Roberto Iacono

      Sì, l’effetto è voluto, leggi bene l’articolo che ho spiegato come impostare questi parametri :) Per renderla permanente, devi modificare il codice css ed eliminare “display: none;”

  • Andrea

    Grazie mille per il tuo articolo, davvero utile!
    Quello che ti volevo chiedere era però come potrei integrare i plugin social nel mio blog in maniera simile a come hai fatto tu nell’header (con le icone di FB, Twitter, Google+ e RSS): hai usato un plugin?
    Se non hai usato un plugin: come hai fatto a mostrare il numero di iscritti/fan per ogni piattaforma social

    Complimenti per il sito: ha una grafica pulita ed estremamente curata ed offre contenuti sempre interessanti!!!

    • Roberto Iacono

      Ti ringrazzio Andrea,
      ho aggiunto i pulsanti a mano, sono delle semplici immagini :)

      Per il numero testuale, appena trovo un po’ di tempo scrivo come fare, ma al momento legge bene solamente Facebook, con gli altri ho dei problemi.

  • pietro

    salve roberto, grazie per il post, molto interessante! una domanda, qual è il plugin per realizzare il form per la newsletter come il tuo? ho provato con enews (mi pare) ma a livello grafico non riesco a modificarlo a me piacerebbe uguale come il tuo ma con colori diversi! grazie

    • Roberto Iacono

      Ciao Pietro,
      è il codice fornito da Feedburner modificato con un po’ di CSS :)

      • pietro

        grazie roberto, comunque ti seguo sempre! il blog girandoleinfesta.com è come se lo avessi fatto insieme a te! grazie

        • Roberto Iacono

          Grazie a te Pietro, mi fa molto piacere :)

  • chiaramuss

    Ciao Roberto, ho seguito a modino le tue indicazioni ma probabilmente ho sbagliato qualcosa perchè non riesco a visualizzare la sharebar. Forse ho sbagliato a inserire il primo codice in functions.php ?
    Mi daresti una mano?

    Grazie!!

    • Roberto Iacono

      Se elimini display:none; nel codice css, la barra sarà sempre visibile. Se non la vedi, può essere un problema di dove hai inserito il codice php.

      • chiaramuss

        Ti posso chiedere dove si mette in functions.php la tua funzione? Alla fine di tutto? Dopo questo segno? ?>

        • Roberto Iacono

          Prima dell’ultimo ?> che trovi nel file. Salva sempre una copia del file stesso così hai una sicurezza in più, in caso di errore lo ricarichi.

  • alberto

    Io non riesco a capire perché, invece, a me non va!!! Non compare assolutatamente nulla! E ho rifatto tutti passaggi più volte! :(

    • Roberto Iacono

      Prova ad eliminare dal css il display:none;

Seguimi

Scarica gli ebook gratuiti

Vuoi creare e gestire il tuo blog WordPress autonomamente ed in maniera gratuita?

Allora scarica gratuitamente gli ebook Blogging Box e Le 30+ cose da non fare con WordPress, inserisci la tua email qui sotto:
13584+
Scarica gratuitamente gli ebook!

Per maggiori informazioni guarda questa pagina per la Blogging Box e questa per le 30+ cose da non fare con WordPress.

Scarica gli ebook gratuiti

Vuoi creare e gestire il tuo blog WordPress autonomamente ed in maniera gratuita?

Allora scarica gratuitamente gli ebook Blogging Box e Le 30+ cose da non fare con WordPress, inserisci la tua email qui sotto:
13584+
Scarica gratuitamente gli ebook!

Per maggiori informazioni guarda questa pagina per la Blogging Box e questa per le 30+ cose da non fare con WordPress.
Unisciti agli oltre 10999 lettori
che seguono questo blog
3152
982
2251
4614