Hay muchos blogs que recurren a plugins realizados por terceros para implementar botones sociales para WordPress. Es un práctica legítima y muy rápida de implementar, efectivamente, pero personalmente…no me convence. En pocos minutos podrás tener implementado los botones sociales para WordPress evitando posible código malicioso y un impacto negativo en el rendimiento ya que no se hace uso de Javascript.
Los botones sociales que se van a implementar son Facebook, Twitter, Google+, Whatsapp y LinkedIn. Estos aparecerán al finalizar el artículo.
Paso 1: Implementar función para compartir artículos
Localiza el fichero “functions.php” del Theme para añadir una nueva función con el siguiente código:
/**
* Social Sharing Buttons
*/
function social_sharing_buttons($content) {
if(is_singular() || is_home()){
// Get current page URL
$sharingURL = get_permalink();
// Get current page title
$sharingTitle = str_replace( ' ', '%20', get_the_title());
// Set current user on Twitter
$userTwitter = 'jmaleman_dev';
// Construct sharing URL without using any script
$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$sharingURL;
$twitterURL = 'https://twitter.com/intent/tweet?text='.$sharingTitle.'&url='.$sharingURL.'&via='.$userTwitter;
$whatsappURL = 'whatsapp://send?text='.$sharingTitle . ' ' . $sharingURL;
// Add sharing button at the end of page/page content
$content .= '<div class="social">';
$content .= '<a class="facebook" href="'.$facebookURL.'" target="_blank">Facebook</a>';
$content .= '<a class="twitter" href="'. $twitterURL .'" target="_blank">Twitter</a>';
$content .= '<a class="whatsapp" href="'.$whatsappURL.'" target="_blank">WhatsApp</a>';
$content .= '</div>';
return $content;
}else{
// if not a post/page then don't include sharing button
return $content;
}
};
add_filter( 'the_content', 'social_sharing_buttons');
Nuestra función detectará si estamos en portada (home) o en un artículo, obtenemos la URL (permalink) y otros parámetros como el título del artículo. El único dato que tendrás que cambiar de forma manual será el correspondiente a tu usuario de Twitter $userTwitter.
Paso 2: Aplicar estilo a nuestro botones sociales
Localiza el fichero “style.css” de tu tema. Puedes editarlo directamente desde el propio WordPress en Apariencia > Editor de temas si no estás muy familiarizado con la edición de temas. También puedes editarlo directamente en wp-content/themes/<nombre_de_tu_tema>/style.css.
Si estás utilizando un tema propio de WordPress, por ejemplo Twenty Fifteen, buscamos la zona “social” exacta del fichero style.css (Posterior a 12.3 – Comments) y ahí insertaremos nuestro código CSS:
/**
* 12.4 Social
*/
.social{
margin-bottom: 20px;
}
.social a{
padding: 5px 10px;
border: none;
color: #ffffff;
border-radius: 2px;
margin-top: 10px;
margin-right: 10px;
cursor: pointer;
box-shadow: inset 0 -2px 0 rgba(0,0,0,.1);
display: inline-block;
text-decoration: none;
}
.social .facebook{
background-color: #3b5998;
}
.social .twitter{
background-color: #55acee;
}
.social .googleplus{
background-color: #dd4b39;
}
.social .whatsapp{
background-color: #43d854;
}
Puedes consultar los colores de las diferentes redes sociales que se han utilizado y muchas más en brandcolors.net
Paso 3: Desactivar y limpiar la caché
Es importante desactivar y regenerar la caché (si tienes algún sistema de caché, claro). Si no tienes ninguno instalado en tu WordPress te recomiendo encarecidamente que instales uno, por ejemplo: W3 Total Cache.
Resultado
Si queréis incluir más botones de otras redes sociales podéis echar un vistazo al código de David Neal en Github. Obviamente la solución escogida para mostrar el botón de Whatsapp no es la mejor, pero es bastante sencilla de implementar.