Partiamo dal presupposto che “permettere” una qualsiasi azione all’utente che naviga il Sito Web è cosa buona e giusta ed è comunque meglio del contrario.
In latino > “melius abundare quam deficere“.
Premessa fatta, consentire ai tuoi visitatori una condivisione social, non solo rende felici loro ma agevola anche il tuo Sito Web nella dura scalata alla vetta della Brand Awarness … e non solo.
Come fare, quindi? Scopriamolo insieme.
Condivisione Social (Social Sharing) cos’è?
Per prima cosa cerchiamo di capire cosa sia davvero la condivisione social o Social Sharing.
In un mondo sempre più mobile e social (appunto), diventa fondamentale quanto e come le informazioni vengono trasmesse online.
Uno dei canali principali è senza dubbio quello dei Social Network che, attraverso appositi pulsanti di condivisione social, permettono all’utente di effettuare un classico “passaparola”.
Tecnicamente, dunque, si tratta di inserire e posizionare dei pulsanti appositi all’interno del Sito Web o Blog.
Come aggiungere i pulsanti di condivisione social?
Per questa pratica ci vengono (spesso) in aiuto non solo temi professionali come ad esempio Avada ma anche plugin di terze parti che si installano su WordPress o applicazioni e servizi forniti da piattaforme esterne.
Le principali differenze sono da ricercarsi nella fruibilità di questi pulsanti. Nei temi, quasi sempre, si attivano solo nel Blog e nelle pagine articolo, mentre plugin avanzati e piattaforme esterne permettono lo sharing su tutto il Sito Web.
Condivisione social tramite temi
Non tutti sono così maledettamente perfetti da integrare nelle loro options anche la possibilità di visualizzare i pulsanti di condivisione social.
Avada, arrivato ieri alla sua versione 7.0, è senza dubbio il numero uno fra quelli professionali.
Da backend di WordPress:
Avada > Opzioni > Blog > Blog a post singolo > abilita Casella condivisione social
PRO
Integrato, nessuna difficoltà di implementazione, facile da usare.
CONTRO
Funziona solo su articoli del Blog e non ha metriche di valutazione o report numerici.
Condivisione social tramite plugin
Si sprecano, qui, i plugin di terze parti. Ve ne sono ovviamente di gratuiti o professionali e, come per qualsiasi altra pratica legata alla realizzazione di Siti Web professionali, il consiglio è sempre lo stesso: se puoi usa sempre e solo prodotti premium.
Pertanto te ne suggerisco due:
Social Media Feather, gratuito, facile e intuitivo;
Easy Social Share Buttons for WordPress, premium, completo e supportato.
PRO
Considerazione a parte per la questione supporto (premium), che vince sempre su tutto, sono entrambi prodotti versatili, completi, adatti a qualsiasi esigenza e forniscono molte configurazioni, report e statistiche.
CONTRO
Essendo plugin, quindi software appositamente creato, appesantiscono il Database e il Sito Web stesso perché sono sempre attivi e le loro chiamate JS e CSS possono incidere sulla velocità di caricamento della pagina/articolo.
Condivisione social tramite piattaforme esterne
Altra soluzione per l’inserimento di pulsanti di condivisione social sul tuo Sito Web o Blog è senza dubbio quella offerta da piattaforme di servizi online esterni.
Anche in questo caso te ne suggerisco alcuni:
AddThis, pulsanti di condivisione, strumenti di targeting e consigli sui contenuti per ottenere più Mi piace, condivisioni e follower.
sharethis, pulsanti di condivisione facili da usare e altri strumenti di pubblicazione per il tuo Sito Web o Blog.
Sumo, strumenti gratuiti per automatizzare la crescita del tuo Sito Web o Blog.
PRO
Essendo piattaforme collaudate e in continua evoluzione, garantiscono un prodotto complessivo altamente professionale, corredato di un supporto attivo e da molti strumenti di analisi e report.
CONTRO
Al pari del discorso relativo ai plugin, anche queste soluzioni sono parecchio invasive. Non installano file e codici quanto fanno i plugin ma, ugualmente appesantiscono il Database e il Sito Web stesso perché sono sempre attivi e le loro chiamate JS e CSS possono incidere sulla velocità di caricamento della pagina/articolo.
Dunque, come aggiungere i pulsanti di condivisione social?
Al solito, tecnicamente è forse possibile stabilire quale soluzione sia migliore e quale no; tuttavia, essendo un Sito Web strettamente soggettivo e strettamente correlato alle esigenze e necessità di un Cliente, la valutazione diventa opinabile e occasionale.
Tuttavia, ne esiste un’altra che amo particolarmente e che uso spesso, la dove il tema non permetta questo inserimento.
Aggiungere i pulsanti di condivisione social tramite codice!
Tendo sempre ad evitare l’uso indiscriminato dei plugin al netto della loro imprescindibile utilità.
Sempre, quindi, per il discorso di come ottimizzare al meglio un Sito Web e di renderlo sempre un Sito Web Professionale, la cosa migliore è sempre quella di utilizzare codice proprietario, scritto ad hoc e implementato sempre e solo all’occorrenza.
Il codice che vedi di seguito, non fa altro che inserire i pulsanti di condivisione social, SOLO all’interno degli articoli del Blog e SOLO sotto il contenuto. limitando di molto le chiamate JS e CSS.
Implementarlo è facilissimo, basta copiare il codice PHP seguente ed incollarlo nel file functions.php del tuo tema figlio (child) e successivamente, copiare ed incollare il codice di stile (CSS) nel tuo file personalizzato.
Codice PHP
// Function to handle the thumbnail request
function get_the_post_thumbnail_src($img)
{
return (preg_match('~\bsrc="([^"]++)"~', $img, $matches)) ? $matches[1] : '';
}
function wpvkp_social_buttons($content) {
global $post;
if(is_singular() || is_home()){
// Get current page URL
$sb_url = urlencode(get_permalink());
// Get current page title
$sb_title = str_replace( ' ', '%20', get_the_title());
// Get Post Thumbnail for pinterest
$sb_thumb = get_the_post_thumbnail_src(get_the_post_thumbnail());
// Construct sharing URL without using any script
$twitterURL = 'https://twitter.com/intent/tweet?text='.$sb_title.'&url='.$sb_url.'&via=glpartengo';
$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$sb_url;
$whatsappURL = 'whatsapp://send?text='.$sb_title . ' ' . $sb_url;
$linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&url='.$sb_url.'&title='.$sb_title;
// Add sharing button at the end of page/page content
$content .= '<div id="ssb" class="social-box"><div class="social-btn">';
$content .= '<a class="col-1 sbtn s-twitter" href="'. $twitterURL .'" target="_blank" rel="nofollow"><span>Share on twitter</span></a>';
$content .= '<a class="col-1 sbtn s-facebook" href="'.$facebookURL.'" target="_blank" rel="nofollow"><span>Share on facebook</span></a>';
$content .= '<a class="col-2 sbtn s-whatsapp" href="'.$whatsappURL.'" target="_blank" rel="nofollow"><span>WhatsApp</span></a>';
$content .= '<a class="col-2 sbtn s-linkedin" href="'.$linkedInURL.'" target="_blank" rel="nofollow"><span>LinkedIn</span></a>';
$content .= '</div></div>';
return $content;
}else{
// if not a post/page then don't include sharing button
return $content;
}
};
// Enable the_content if you want to automatically show social buttons below your post.
add_filter( 'the_content', 'wpvkp_social_buttons');
add_shortcode('social','wpvkp_social_buttons');
ALERT! Ricordati di cambiare lo username di Twitter che trovi alla voce “VIA=” della riga 20.
Codice CSS (personalizzabile)
/*
SOCIAL SHARING BUTTONS
*/
a.col-1.sbtn {
width: 180px;
display: inline-block;
text-align: center;
padding: 10px;
color: #fff !important;
margin: 0 0.5% 0 0;
font-size: 12px;
}
a.col-1.sbtn span {
margin: 0 0 0 15px;
}
a.col-1.sbtn.s-facebook:hover {
background: #2f409f;
}
a.col-2.sbtn {
width: 180px;
display: inline-block;
text-align: center;
padding: 10px;
color: #fff !important;
margin: 0 0.5% 0 0;
font-size: 12px;
}
a.col-2.sbtn span {
margin: 0 0 0 15px;
}
a.col-2.sbtn.s-whatsapp:hover {
background: #3d9440;
}
a.col-2.sbtn.s-linkedin:hover {
background: #136288;
}
a.col-2.sbtn.s-pinterest:hover {
background: #a10718;
}
article #ssb {
display: unset;
text-align: center;
}
.s-facebook {
background: #3F51B5;
}
.s-facebook::before {
font-family: fontawesome;
content: '\f09a';
}
.s-googleplus {
background: #F44336;
}
.s-googleplus::before {
font-family: fontawesome;
content: '\f0d5';
}
.s-googleplus:hover {
background: #c82c21;
}
.s-linkedin {
background: #1a7baa;
}
.s-linkedin::before {
font-family: fontawesome;
content: '\f0e1';
}
.s-pinterest {
background: #bd081c;
}
.s-pinterest::before {
font-family: fontawesome;
content: '\f231';
}
.s-twitter {
background: #03A9F4;
}
.s-twitter::before {
font-family: fontawesome;
content: '\f099';
}
.s-twitter:hover {
background: #0093d6;
}
.s-whatsapp {
background: #4CAF50;
}
.s-whatsapp::before {
font-family: fontawesome;
content: '\f232';
}
.social-box {
display: block;
margin: -20px 0 40px;
padding: 0 6rem 0;
}
.social-box:last-of-type {
margin: 40px 0 40px;
}
.social-btn {
display: block;
width: 100%;
}
.social-btn a:last-of-type {
margin: 0;
}
#ssb {
display: none;
}
.ut-blog-mixed-large-article #ssb {
display: none;
}
@media only screen and (max-width: 768px) {
a.col-1.sbtn {
width: 46px;
}
a.col-1.sbtn span {
display: none;
}
a.col-2.sbtn {
width: 46px;
}
a.col-2.sbtn span {
display: none;
}
.social-box {
padding: 0px;
text-align: center;
}
}
/*
FINE SOCIAL SHARING BUTTONS
*/
Ecco il risultato
PRO
Due minuti per implementare il codice, funziona solo quando è necessario, non appesantisce il peso totale dell’articolo ed è completamente personalizzabile.
CONTRO
Non funziona sulle pagine del Sito Web a meno di non voler cambiare il codice PHP inserito e non offre statistiche e report.
Conclusioni
Come detto, al netto di avere tools e strumenti più o meno simili, la scelta su quale usare diventa molto soggettiva.
Tuttavia, non finirò mai di dirlo, per un Sito Web Professionale è fondamentale anche l’ottimizzazione relativa alla velocità di caricamento. Quindi meno cose installi meno intasi il tutto 😉
Fammi sapere se questo articolo ti è stato utile. 👍
