Cómo crear botones de compartir entradas de WordPress en redes sociales
¡Buenos días! En este artículo os voy a enseñar cómo añadir los botones de compartir en redes sociales nuestras entradas de WordPress, tanto sin plugin como con plugin.
Yo os recomiendo el primer método ya que resulta mucho más ligero para nuestro WordPress y nos permite ahorrarnos otro plugin.
Añadir botones de compartir en redes sociales sin plugin
Repasemos los pasos que hemos seguido en el vídeo:
Paso 1: creamos la función con los botones
La página donde hemos prestado el código para los enlaces es la siguiente: HTML Share Buttons.
En el vídeo he explicado el procedimiento para crear esta función en WordPress y os dejo aquí el código final:
function bs_social_share() {
if(is_singular('post')) {
echo '<div class="social-share">
<a href="http://www.facebook.com/sharer.php?u='.get_permalink().'" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" />
</a>
<a href="https://twitter.com/share?url='.get_permalink().'&text='.get_the_title().'&hashtags=empresiona&via=bohdanps" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" />
</a>
<a href="http://www.linkedin.com/shareArticle?mini=true&url='.get_permalink().'" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/linkedin.png" alt="LinkedIn" />
</a>
</div>';
}}
Os recuerdo que podéis cambiar las imágenes en la etiqueta <img> por vuestros propios iconos o incluso podéis crear iconos vectoriales de redes sociales como enseñé a hacer en un vídeo anterior (que es como lo tengo implementado en mi blog).
También os dejo el enlace a la página donde se explican los parámetros de URL de Twitter con más detalle.
Paso 2: mostramos los botones
Aquí os muestro tres opciones:
- Mostrarlos a través de un shortcode
- Mostrarlos modificando la template de los posts
- Mostrarlos a través de un hook de WordPress
Mostrar con shortcode
Para mostrar los botones a través de un shortcode utilizamos el siguiente código final:
function bs_social_share() {
if(is_singular('post')) {
return '<div class="social-share">
<a href="http://www.facebook.com/sharer.php?u='.get_permalink().'" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" />
</a>
<a href="https://twitter.com/share?url='.get_permalink().'&text='.get_the_title().'&hashtags=empresiona&via=bohdanps" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" />
</a>
<a href="http://www.linkedin.com/shareArticle?mini=true&url='.get_permalink().'" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/linkedin.png" alt="LinkedIn" />
</a>
</div>';
}}
add_shortcode('social-share','bs_social_share');
Ten en cuenta que en este caso en la función se utiliza un return y no un echo para imprimir el shortcode.
Modificar la template
Para mostrar los botones modificando la template simplemente insertaremos la función anterior en algún lugar del archivo php encargado de mostrar la entrada, tal como enseño en el vídeo:
bs_social_share();
Si te has perdido en este paso de modificar la template te recomiendo echarle un vistazo a este otro artículo sobre cómo modificar el HTML en WordPress que te será de gran ayuda 🙂
A través de hooks
Y finalmente para mostrarlos a través de un hook (en este caso de Genesis), que es mi método preferido y el que recomiendo, simplemente añadimos esta acción después de la función del principio de la entrada:
add_action('genesis_entry_footer','bs_social_share');
En este caso utilizo el hook genesis_entry_footer para mostrar esos botones en el footer de la entrada pero puedes consultar más hooks y lugares donde insertar la función aquí: Genesis Visual Hook Guide.
Recuerda que si utilizas este método, tienes que imprimir los botones con echo, y no con return.
Paso 3: estilizamos los botones
Os comparto el código CSS que he utilizado en el vídeo:
.social-share img {
width: 35px;
margin:0 10px;
border: 0;
box-shadow: none;
display: inline-block;
}
Os remito de nuevo a la entrada de cómo crear iconos vectoriales en WordPress ya que es una manera mucho más ligera y flexible de mostrar iconos en WordPress.
¡Y con esto ya estamos! Veamos finalmente cómo podemos hacer lo mismo utilizando un plugin, aunque es un método que no recomiendo pero que podéis utilizar si os da miedo el código o simplemente para ir más rápido.
Añadir botones de compartir en redes sociales con plugin
El plugin que he utilizado en el vídeo es el siguiente: AddToAny Share Buttons.
He elegido este plugin por su ligereza y porque trae un diseño muy limpio y elegante.
También te puede interesar
Cómo insertar publicaciones de Facebook en WordPress
Cómo insertar el perfil de LinkedIn en WordPress
WordPress: Cómo mostrar las últimas publicaciones de Instagram
WordPress: Cómo añadir las etiquetas Open Graph de Facebook
