Pulsanti social sharing personalizzati per condividere con stile

Oggi ti voglio parlare di come realizzare dei pulsanti social sharing dal design personalizzato, e da usare nei tuoi progetti web.

Molto spesso mi sono imbattuto nella necessità di personalizzare i pulsanti social per la condivisione, e posso dirti che avere la possibilità di realizzarli con il design che più mi piace e in sintonia con lo stile del sito che vado a realizzare, vuol dire dare quel tocco in più.

“ Come dico sempre, è il particolare che fa la differenza ! “

I pulsanti che andremo a realizzare sono destinati ad essere usati con WordPress e per il funzionamento è necessario l’uso del PHP, ma niente paura…, STEP by STEP andrò ad elencare la struttura HTML, le funzioni necessarie e il CSS che andrà a dare lo stile.

Premesso questo iniziamo !

 

STEP 1 – Struttura HTML + PHP

<?php $linkimg = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' ); ?>
<section id="social">
        <div class="center">
            <h3>Condividi sui tuoi social preferiti !</h3>
            <h4>Condivisioni totali: <?php pic_social_shares_total(); ?></h4>

            <a title="facebook" href="https://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>">
                <div id="fb"><i class="fa fa-facebook fa-2x"></i><span class="counter fb"><?php pic_social_shares_count('fb'); ?></span></div>
            </a>

            <a title="Linkedin" href="http://linkedin.com/shareArticle?mini=true&amp;url=<?php the_permalink();?>&amp;title=<?php the_title();?>&amp;ro=false&amp;summary=<?php echo pic_custom_excerpt(25, get_the_content(), '...'); ?>&amp;source=<?php the_permalink();?>">
                <div id="in"><i class="fa fa-linkedin fa-2x"></i><span class="counter in"><?php pic_social_shares_count('in'); ?></span></div>
            </a>

            <a title="Twitter" href="https://twitter.com/share?url=<?php the_permalink(); ?>&amp;text=<?php echo pic_custom_excerpt(16, get_the_content(), '...'); ?>">
                <div id="tw"><i class="fa fa-twitter fa-2x"></i><span class="counter tw"><?php pic_social_shares_count('tw'); ?></span></div>
            </a>

            <a title="Google+" href="https://plusone.google.com/_/+1/confirm?hl=en&amp;url=<?php the_permalink(); ?>">
                <div id="gp"><i class="fa fa-google-plus fa-2x"></i><span class="counter gp"><?php pic_social_shares_count('gp'); ?></span></div>
            </a>

            <a title="Pinterest" href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&amp;media=<?php echo $linkimg[0] ?>&amp;description=<?php echo pic_custom_excerpt(16, get_the_content(), ''); ?>">
                <div id="pt"><i class="fa fa-pinterest fa-2x"></i><span class="counter pt"><?php pic_social_shares_count('pt'); ?></span></div>
            </a>
        </div>
</section>

 

STEP 2 – La url per la codivisione.

Per condividere il contenuto del post useremo una URL che si occuperà di avviare la condivisione dei dati.

https://www.facebook.com/sharer.php?u=url

http://linkedin.com/shareArticle?mini=true&amp;url=url&amp;title=title&amp;ro=false&amp;summary=summary&amp;source=url

https://twitter.com/share?url=url&amp;text=text

https://plusone.google.com/_/+1/confirm?hl=en&amp;url=url

http://pinterest.com/pin/create/button/?url=url&amp;media=media&amp;description=description

Ad esempio per Facebook dopo la u= va la url della pagina da condividere, che nel nostro caso andiamo a recuperare con la funzione di WordPress <?php the_permalink(); ?> che ci restituisce la URL del post corrente.

Stesso procedimento (nonostante qualche piccola differenza nei parametri) si deve seguire per tutti gli altri social usando la propria url per la condivisione.
Come puoi notare ad esempio per valorizzare il parametro text nella query string di twitter si usa la funzione
<?php echo pic_custom_excerpt(16, get_the_content(), ‘…’); ?>.
In questo caso si tratta di una funzione personalizzata che va a filtrare il testo da tutti i tag html, in modo da poterlo passare al parametro della query.

Questa è la funzione:

function pic_custom_excerpt($limit, $get_content, $exp = '[...]' )
    {
        $thecontent = trim(strip_tags($get_content));

        $output = str_replace( '"', '', $thecontent );
        $output = str_replace( '\r\n', ' ', $output );
        $output = str_replace( '\n', ' ', $output );
        $content = explode( ' ', $output, $limit );
        array_pop( $content );
        $content = implode( " ",$content);
        return strip_tags( $content . $exp, ' ' );
    }

mentre $linkimg = wp_get_attachment_image_src( get_post_thumbnail_id(), ‘full’ ); ci da un array contenente gli attributi url, width, height dell’immagine del post. Quindi per ottenere la url dell’immagine basta andare a prendere il primo valore dell’array con $linkimg[0], che useremo per la condivisione su Pinterest passandola alla query.

 

STEP 3 – Funzione per il conteggio delle condivisioni

la funzione va a leggere un array di variabili che con json_decode() andiamo ad intercettare e stampare in base al parametro che si passa alla funzione.

Per il conteggio delle condivisioni mi sto affidando alle api di SharedCount.
E’ facile capire dal codice che, ad esempio, <?php pic_social_shares_count(‘fb’); ?> andrà a stampare il conteggio delle condivisioni su Facebook.

Ecco la funzione che si occupa di visualizzare il conteggio delle condivisioni nei vari social.

function pic_social_shares_count($social)
    {
        $url = get_permalink( get_the_ID() );
        $json = file_get_contents("http://api.sharedcount.com/?url=" . rawurlencode($url));
        $counts = json_decode($json, true);
        switch($social)
        {
            case 'fb':
                echo $counts["Facebook"]["total_count"];
                break;
            case 'tw':
                echo $counts["Twitter"];
                break;
            case 'gp':
                echo $counts["GooglePlusOne"];
                break;
            case 'pt':
                echo $counts["Pinterest"];
                break;
            case 'in':
                echo $counts["LinkedIn"];
                break;
            default:
                break;
        }
    }

 

STEP 4 – Css per lo stile grafico

Sotto troverete il css che andrà a stilizzare i pulsanti.

#social{
    padding: 2rem 0;
}
#social h3{
    margin-bottom: 0;
}
#social .center{
    text-align: center;
}
#social #fb{
    -webkit-transition: all ease-in 120ms 0ms;
    -moz-transition: all ease-in 120ms 0ms;
    -ms-transition: all ease-in 120ms 0ms;
    -o-transition: all ease-in 120ms 0ms;
    transition: all ease-in 120ms 0ms;
    background: #3B5998;
}
#social #tw{
    -webkit-transition: all ease-in 120ms 0ms;
    -moz-transition: all ease-in 120ms 0ms;
    -ms-transition: all ease-in 120ms 0ms;
    -o-transition: all ease-in 120ms 0ms;
    transition: all ease-in 120ms 0ms;
    background: #55ACEE;
}
#social #in{
    -webkit-transition: all ease-in 120ms 0ms;
    -moz-transition: all ease-in 120ms 0ms;
    -ms-transition: all ease-in 120ms 0ms;
    -o-transition: all ease-in 120ms 0ms;
    transition: all ease-in 120ms 0ms;
    background: #007bb6;
}
#social #gp{
    -webkit-transition: all ease-in 120ms 0ms;
    -moz-transition: all ease-in 120ms 0ms;
    -ms-transition: all ease-in 120ms 0ms;
    -o-transition: all ease-in 120ms 0ms;
    transition: all ease-in 120ms 0ms;
    background: #DD4B39;
}
#social #pt{
    -webkit-transition: all ease-in 120ms 0ms;
    -moz-transition: all ease-in 120ms 0ms;
    -ms-transition: all ease-in 120ms 0ms;
    -o-transition: all ease-in 120ms 0ms;
    transition: all ease-in 120ms 0ms;
    background: #C8232C;
}
#social #fb:hover{
    -webkit-transition: all ease-in 120ms 0ms;
    -moz-transition: all ease-in 120ms 0ms;
    -ms-transition: all ease-in 120ms 0ms;
    -o-transition: all ease-in 120ms 0ms;
    transition: all ease-in 120ms 0ms;
    background: rgba(59, 89, 152, 0.81);
}
#social #tw:hover{
    -webkit-transition: all ease-in 120ms 0ms;
    -moz-transition: all ease-in 120ms 0ms;
    -ms-transition: all ease-in 120ms 0ms;
    -o-transition: all ease-in 120ms 0ms;
    transition: all ease-in 120ms 0ms;
    background: rgba(85, 172, 238, 0.80);
}
#social #in:hover{
    -webkit-transition: all ease-in 120ms 0ms;
    -moz-transition: all ease-in 120ms 0ms;
    -ms-transition: all ease-in 120ms 0ms;
    -o-transition: all ease-in 120ms 0ms;
    transition: all ease-in 120ms 0ms;
    background: rgba(0, 123, 182, 0.81);
}
#social #gp:hover{
    -webkit-transition: all ease-in 120ms 0ms;
    -moz-transition: all ease-in 120ms 0ms;
    -ms-transition: all ease-in 120ms 0ms;
    -o-transition: all ease-in 120ms 0ms;
    transition: all ease-in 120ms 0ms;
    background: rgba(221, 75, 57, 0.81);
}
#social #pt:hover{
    -webkit-transition: all ease-in 120ms 0ms;
    -moz-transition: all ease-in 120ms 0ms;
    -ms-transition: all ease-in 120ms 0ms;
    -o-transition: all ease-in 120ms 0ms;
    transition: all ease-in 120ms 0ms;
    background: rgba(200, 35, 44, 0.80);
}
#social #fb, #social #tw, #social #in, #social #gp, #social #pt{
    height: auto;
    width: 15%;
    padding: 1%;
    line-height: 0;
    display: inline-block;
    margin: 2px 0 ;
}
.counter{
    background: none repeat scroll 0 0 #FFFFFF;
    display: inline-block;
    height: 20px;
    line-height: 1;
    margin: 6px 0 0;
    padding: 1%;
    width: 100%;
}
.counter.fb{
    color: #3B5998;
}
.counter.in{
    color: #007bb6;
}
.counter.tw{
    color: #55ACEE;
}
.counter.gp{
    color: #DD4B39;
}
.counter.pt{
    color: #C8232C;
}
#social i.fa{
    font-size: 1.6em;
    color: #FFFFFF;
}

In 4 step abbiamo realizzato i nostri pulsanti social, che puoi vedere proprio qui sotto.

Ora cosa aspetti… condividi anche tu con stile 😉

Condividi sui tuoi social preferiti !

0
7
0
0
1

L'autore: Alfredo Piccione

Webdesigner, Wordpress Designer & Developer, svolgo il mio lavoro con passione e dedizione cercando di tenermi aggiornato e sperimentando sempre cose nuove. Amo questo lavoro perché mi permette di esprimere il mio lato creativo, mi piace curare i miei lavori e dare sempre il meglio di me stesso.

11 COMMENTI

  1. 14 giugno, 2014 / Rispondi »

    Ciao Alfio, sono Danilo Tomasino e in questo momento siamo nella pausa del webinar del 14 Giugno 2014. Mentre attendo che si cuoce la pasta ho approfondito la conoscenza del tuo bel sito e sono incappato in questo interessante tutorial sulla personalizzazione dei pulsanti.

    Ho un problemino: essendo in via di formazione con WP mi chiedevo se il codice che hai postato va inserito uno nella index.php del tema e l’altro ovviamente in style.css. I primi due file indispensabili per la creazione di un tema. Dico bene?

    Stessa cosa invece se lo inserisco in un tema esistente…? Dove inserisco il codice php?
    Grazie!

    • 14 giugno, 2014 / Rispondi »

      Ciao Danilo
      Finito di mangiare ? :)
      Rispondo alla tua domanda:
      I file indispensabili per un tema sono la index.php, style.css e functions.php

      Detto ciò la parte di codice messo in Struttura HTML + PHP va inserito nel punto dove vuoi visualizzare i bottoni.
      Le funzioni pic_custom_excerpt() e pic_social_shares_count() vanno nel file functions.php
      Mentre il css ovviamente va in style.css

      Ho realizzato anche un plugin dove ho migliorato alcune funzioni rispetto a quelle che vedi, e che puoi scaricare e usare! :)

      Buon Webinar !

  2. 14 giugno, 2014 / Rispondi »

    Grazie mille Alfio!!!

  3. 25 luglio, 2014 / Rispondi »

    Ciao Alfredo, stavo cercando qualcosa che mi aiutasse a personalizzare i miei pulsanti social in un sito web quando ho letto il tuo interessante post. E’ la prima volta che ci provo quindi non sono praticissima; mi stavo chiedendo se quello che ho letto qui potrebbe funzionare anche su una normale pagina web, senza WP quindi.
    Ti ringrazio in anticipo,
    Buona giornata!

    • 25 luglio, 2014 / Rispondi »

      Ciao Raffaella!
      Con le dovute modifiche (sostituire le funzioni WordPress es: the_title(), the_permalink(), ecc ecc con delle funzioni php) il tutto può funzionare tranquillamente in qualsiasi pagina web.

      Se non sei pratica di php e vuoi solo condividere il contenuto della pagina senza contare le condivisioni, potresti farlo inserendo nella URL al posto delle funzioni, il valore che il parametro ti richiede.

      Ad esempio per Facebook potresti inserire dopo ?u= il link della pagina che vuoi condividere.

      Spero di esserti stato di aiuto!

      Ciao :)

  4. 2 settembre, 2014 / Rispondi »

    Ciao Alfredo, volevo complimentarmi per l’ottimo tutorial che hai scritto, stavo giusto cercando una spiegazione sul funzionamento dei pulsanti social per il mio sito che sto creando ed il tuo tutorial è stato perfetto :) devo solo apportare alcuni adattamenti, un saluto

    • 2 settembre, 2014 / Rispondi »

      Grazie, sono felice di esserti stato utile! :)

  5. 17 novembre, 2014 / Rispondi »

    Ciao Alfredo,
    post interessante, ma avrei bisogno di qualcosa di più specifico… ti spiego:
    devo inserire i tasti di condivisione social con uno slider su WP specifico, si chiama LayerSlider, non so se lo conosci.
    Sto inserendo dei layer contenenti l’icona dei social dai quali condividere a cui ci aggiungo l’URL che mi consente di passare alla condivisione. Sono riuscito a realizzare questo per Facebook e Twitter, ma non riesco con Google+, utilizzando un classico URL di condivisione da G+. Vorrei capire se esiste qualche alternativa al semplice “https://plus.google.com/share?url” per condividere, visto che non mi funziona (sparisce addirittura il tasto di g+ dallo slider).
    Grazie

  6. 21 gennaio, 2015 / Rispondi »

    Ciao Alfredo, vorrei farti una domanda a proposito degli share button. Nel caso avessi un’applicazione e volessi integrare lo share button, con il consenso dell’utente potrei mandare lo stesso messaggio a tutti i suoi contatti di WhatsApp ogni settimana in automatico? Riesco a fare questo anche con altri social come Facebook, Wechat, Line e altri. Grazie in anticipo per la disponibilità attendo una tua risposta, buonlavoro.

  7. 8 settembre, 2015 / Rispondi »

    Ciao!premetto che nn so assolutamente niente di siti internet, ma ho appena creato su wp il sito per il mio blog…lo sto personalizzando e vorrei inserire l’opzione di condividere gli articoli anche su instagram…ho creato il pulsante ma mi serve l’url di condivisione..ne ho messo uno ma si collega solo al mio profilo instagram e nn crea un nuovo post…mi potete aiutare???😨😨😨grazieee
    Chiara

    • 29 settembre, 2015 / Rispondi »

      Ciao Chiara
      Mi dispiace ma da quello che so attualmente non è possibile fare uno sharing di un post su Instagram.
      A presto! :)

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>