Come aggiungere i pulsanti social su WordPress, senza plugin
Inserire i pulsanti di condivisione verso i social network è fondamentale, in questo modo potrai diffondere rapidamente i contenuti del tuo sito web oppure del tuo blog WordPress.
In rete esistono molti plugin, gratuiti e non, che permettono l’aggiunta dei bottoni social, come puoi ben vedere effettuando una ricerca su Google oppure dando uno sguardo alla directory di WordPress.
Alcuni di essi però, potrebbero causare dei rallentamenti al tuo sito, caricando un numero eccessivo di risorse, come file javascript, oppure lasciarti insoddisfatto dal punto di vista dell’aspetto grafico.
In questa guida ti farò vedere come aggiungere i pulsanti social di Facebook, Twitter, Google Plus e Pinterest all’interno del tuo sito WordPress, senza installare plugin di terze parti, ma creandone uno da zero.
Alla fine dell’articolo troverai un link per scaricare il plugin, pronto per essere utilizzato nella tua installazione di WordPress.
Una caratteristica che potresti apprezzare è l’assenza di cookie di profilazione, molto utile vista la normativa di qualche mese fa. In più avremo una maggiore libertà nella personalizzazione grafica dei pulsanti, potendo utilizzare il set di icone a noi preferito, in questo caso utilizzeremo la libreria Font Awesome, ma è possibile utilizzare qualsiasi altra risorsa.
Ecco il risultato finale.
(Il tema nello screenshot è la versione gratuita di Jax)
Come aggiungere i pulsanti social su WordPress
Per prima cosa devi creare la cartella wip-social-buttons, all’interno della directory wp-content/plugins/ e la sottocartella css, in cui andremo a salvare il codice css del nostro plugin, tramite il file socialbuttons.css
.wip-social-buttons {
text-align:center;
margin:40px 0
}
.wip-social-buttons a {
display:inline-block;
margin:0 2px;
filter: none ;
width:40px;
height:40px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px;
text-align:center;
line-height:40px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
}
.wip-social-buttons .fa {
color:#fff !important;
margin-right:0px !important;
font-size:14px !important;
}
.wip-social-buttons a:hover {
opacity: 0.8;
filter: alpha(opacity=80);
}
.wip-social-buttons a.facebook-button {
background:#3b5998;
}
.wip-social-buttons a.twitter-button {
background:#00b6f1;
}
.wip-social-buttons a.google-button {
background:#df4a32;
}
.wip-social-buttons a.pinterest-button {
background:#cb2027;
}
A questo punto inserisci, nel file init.php, l’intestazione del plugin.
/* Plugin Name: Wip Social Buttons Plugin URI: https://www.wpinprogress.com/ Description: Wip Social Buttons Author: WPinProgress Author URI: https://www.wpinprogress.com/ Version: 1.0.0 License: GPL3 */
Ora utilizza l’azione wp_enqueue_scripts() per caricare il file css e la libreria Font Awesome
if (!function_exists('wip_social_buttons_scripts')) {
function wip_social_buttons_scripts() {
wp_enqueue_style( "wip-font-awesome", "//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css", array(), "4.5.0" );
wp_enqueue_style( "wip-social-buttons.css", plugins_url('/css/socialbuttons.css', __FILE__ ), array(), "" );
}
add_action( 'wp_enqueue_scripts', 'wip_social_buttons_scripts', 11 );
}
Infine, utilizzando il filtro the_content(), inseriamo i pulsanti dopo il contenuto di ogni articolo.
if (!function_exists('wip_social_buttons_html')) {
function wip_social_buttons_html($content) {
global $post;
$html = '<div class="wip-social-buttons">';
$html .= '<a href="http://www.facebook.com/sharer.php?s=100&p[url]='.get_permalink($post->ID).'&p[images][0]='.wp_get_attachment_url( get_post_thumbnail_id($post->ID)).'&p[title]='.get_the_title().'&p[summary]='.substr(strip_tags(get_the_content()),0,200).'" target="_blank" class="facebook-button" onclick="javascript:window.open(this.href,v"", "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=220,width=600");return false;"><i class="fa fa-facebook"></i></a>';
$html .= '<a href="https://twitter.com/share?text='.get_the_title().'&url='.get_permalink($post->ID).'" onclick="javascript:window.open(this.href, "", "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=260,width=600");return false;" target="_blank" class="twitter-button"><i class="fa fa-twitter"></i></a>';
$html .= '<a href="https://plus.google.com/share?url='.get_permalink($post->ID).'" onclick="javascript:window.open(this.href, "", "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=260,width=600");return false;" target="_blank" class="google-button"><i class="fa fa-google-plus"></i></a>';
$html .= '<a href="http://pinterest.com/pin/create/button/?url='.urlencode(get_permalink($post->ID)).'&media='.wp_get_attachment_url( get_post_thumbnail_id($post->ID)).'&description='.urlencode(get_the_title()).'" onclick="javascript:window.open(this.href, "", "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=260,width=600");return false;" target="_blank" class="pinterest-button"><i class="fa fa-pinterest"></i></a>';
$html .= '</div>';
if ( is_single() || is_page() ) :
return $content . $html;
else:
return $content;
endif;
}
add_filter( 'the_content', 'wip_social_buttons_html' );
}
Visto che non è possibile utilizzare la funzione get_the_excerpt(), per generare il sommario dell’articolo da condividere su Facebook, al suo posto ho aggiunto
substr(strip_tags(get_the_content()),0,200)
Se preferisci utilizzare i pulsanti di condivisione anche dopo il riassunto di ogni articolo visualizzato, ad esempio, nelle categorie, puoi sostituire
if ( is_single() || is_page() ) : return $content . $html; else: return $content; endif;
con
return $content . $html;
Potrai anche aggiungere nuovi pulsanti, l’importante è integrare i parametri del pulsante con le informazioni dell’articolo, come il titolo, l’immagine, l’url dell’articolo ecc.
Come sempre ti lascio il link per scaricare il plugin, è già pronto e funzionante, ti basterà installarlo all’interno del tuo sito e personalizzarlo come meglio credi, intervenendo sul codice css e sull’HTML dei pulsanti.