Hace algunos días Fernando publicó un excelente artículo en el cual compartía una comparativa de diferentes plugins que sirven para compartir en redes sociales los contenidos publicados en WordPress, resultando como ganador el plugin Monarch de Elegant Themes.
Siguiendo con la misma temática, en este tutorial compartiré contigo un método simple para añadir botones al final de cada artículo para compartirlo en redes sociales sin la necesidad de instalar ningún plugin, tal como lo apliqué en mi propio sitio (mira el final de cualquiera de los artículos del blog para verlo funcionando).
Lo que haremos será añadir la funcionalidad en tu tema activo, por lo que se requiere un poco de conocimiento en este aspecto.
¿Listo? Vamos a ello:
1. Crear archivo
Dentro de la carpeta de tu tema activo tenemos que crear un nuevo archivo, y asignarle un nombre descriptivo. Para efectos de este ejemplo le llamaremos content-share.php.
2. Crear maquetado base
Dentro de este archivo tenemos que escribir el maquetado HTML que queremos asignar a la sección que incluirá los botones para compartir en redes sociales. En este ejemplo, crearemos un div con la clase share-post que incluirá un h4 con el texto “Compartir”. Puedes hacer que ese texto sea traducible al ponerlo dentro de la función _e() e incluyendo el texto de traducción de tu tema.
Así luce nuestro archivo hasta ahora
<div class="share-post"> <h4><?php _e('Compartir', 'theme_name');?></h4> </div> <!-- /. share-post -->
3. Crear enlaces a redes sociales
Para efectos de este tutorial nos limitaremos a 4 redes sociales: facebook, Twitter, Google Plus y Pinterest. Pondremos un enlace a cada una de ellas luego del h4.
Para que un link permita compartir un contenido en facebook tiene que responder a la siguiente estructura:
https://www.facebook.com/sharer/sharer.php?u=[URL_DE_LA_PÁGINA]
Por supuesto tenemos que reemplazar [URL_DE_LA_PÁGINA] por la verdadera url, y para ello usaremos la función the_permalink(). El enlace quedaría así:
https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>
Y puesto en el maquetado sería así:
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" class="facebook" target="_blank"> Facebook </a>
La estructura de un link para twitter debe ser así:
https://twitter.com/intent/tweet?url=[URL_DE_LA_PÁGINA]&text=[TEXTO_DEL_TWEET]
En este caso debemos reemplazar [URL_DE_LA_PÁGINA] por la url del contenido a publicar y en [TEXTO_DEL_TWEET] debemos escribir el texto que queremos que acompañe el enlace. En mi caso haré que el texto sea el nombre de la entrada, para lo cual usaremos la función the_title_attribute() que imprime el título del post de manera segura para usarlo como atributo y lo acompañaremos de “por @ayudawp”. El link quedaría así:
https://twitter.com/intent/tweet?url=<?php the_permalink(); ?>&text=<?php the_title_attribute(); ?>%20por%20@ayudawp
Y puesto en el maquetado sería:
<a href="https://twitter.com/intent/tweet?url=<?php the_permalink(); ?>&text=<?php the_title_attribute(); ?>%20por%20@ayudawp" class="twitter" target="_blank"> Twitter </a>
Google Plus
La estructura de enlace de Google plus es muy similar a la de facebook:
https://plus.google.com/share?url=[URL_DE_LA_PÁGINA]
Entonces reemplazaremos [URL_DE_LA_PÁGINA] por la función the_permalink(). El link quedaría así:
https://plus.google.com/share?url=<?php the_permalink(); ?>
y puesto en maquetado sería:
<a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" class="googleplus" target="_blank"> Google+ </a>
Para compartir un post o página en pinterest la estructura del enlace es la siguiente:
https://pinterest.com/pin/create/button/?url=[URL_DE_LA_PAGINA]&media=[URL_DE_LA_IMAGEN_DESTACADA]
En este caso, aparte de reemplazar [URL_DE_LA_PÁGINA] por la función the_permalink() tenemos que incluir la url de la imagen destacada. Esto es un poco más complejo, pero lo podemos conseguir con solo una línea de código.
Antes de escribir el enlace vamos a obtener la url de la imagen destacada y la vamos a guardar dentro de una variable llamada $pin_imagen. Esto debemos ponerlo dentro de las etiquetas de PHP:
<?php $pin_imagen = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large' ); ?>
Ahora solo tendremos que imprimir esta variable para reemplazar [URL_DE_LA_IMAGEN_DESTACADA]. El link entonces quedaría así:
https://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php echo $pin_imagen[0]; ?>
Y si miramos todo el enlace de pinterest puesto en el maquetado sería así:
<?php //Obtenemos la URL de la imagen destacada $pin_imagen = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large' ); ?> <a href="https://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php echo $pin_imagen[0]; ?>" class="pinterest" target="_blank"> Pinterest </a>
Con todo esto incluido, nuestro archivo content-share.php se ve así:
<div class="share-post"> <h4><?php _e('Compartir', 'theme_name');?></h4> <a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" class="facebook" target="_blank"> Facebook </a> <a href="https://twitter.com/intent/tweet?url=<?php the_permalink(); ?>&text=<?php the_title_attribute(); ?>%20por%20@ayudawp" class="twitter" target="_blank"> Twitter </a> <a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" class="googleplus" target="_blank"> Google+ </a> <?php //Obtenemos la URL de la imagen destacada $pin_imagen = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large' ); ?> <a href="https://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php echo $pin_imagen[0]; ?>" class="pinterest" target="_blank"> Pinterest </a> </div> <!-- /. share-post -->
4. Incluir el archivo
Ahora que ya tenemos listo el archivo content-share.php es momento de incluirlo en la pantalla de detalle de cada entrada, para ello, vamos a abrir el archivo single.php, allí vamos a buscar la función the_content() y justo a continuación vamos a añadir lo siguiente:
<?php get_template_part('content', 'share');?>
Con esto estamos indicándole a WordPress que en este lugar (después del contenido) tiene que incluir la sección de compartir en redes sociales que acabamos de crear en el archivo content-share.php.
Si lo deseas puedes repetir el mismo ejercicio en el archivo page.php, para que los links sociales también aparezcan al final de cada página.
Si ahora vas a ver el detalle de cada entrada debieras ver los enlaces listos y funcionales.
Sólo nos queda el último paso.
5. Añadir estilos
Es el momento de que agregues al archivo CSS de tu tema todo el código necesario para mostrar los enlaces con los estilos que tu quieras. Este es un ejemplo de cómo pueden ser tus estilos:
.share-post { border-top: 0; margin-top: 0; padding-top: 0; } .share-post a { display: inline-block; color: white; padding: 0 1em; line-height: 2em; margin: 0.1em; } .share-post a:hover { padding: 0 1.5em; text-decoration: none; } .share-post .facebook { background: #3b5998; } .share-post .twitter { background: #55acee; } .share-post .googleplus { background: #dd4b39; } .share-post .pinterest { background: #cc2127; }
Los colores de cada botón están basados en la marca de cada red social. Estos colores los puedes obtener desde brandcolors.net.
6. Íconos [Opcional]
Si tu tema usa la fuente de iconos FontAwesome, puedes añadir los íconos de cada red social, quedando el archivo de la siguiente forma:
<div class="share-post"> <h4><?php _e('Compartir', 'theme_name');?></h4> <a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" class="facebook" target="_blank"> <i class="fa fa-facebook"></i> Facebook </a> <a href="https://twitter.com/intent/tweet?url=<?php the_permalink(); ?>&text=<?php the_title_attribute(); ?>%20por%20@ayudawp" class="twitter" target="_blank"> <i class="fa fa-twitter"></i> Twitter </a> <a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" class="googleplus" target="_blank"> <i class="fa fa-google-plus"></i> Google+ </a> <?php //Obtenemos la URL de la imagen destacada $pin_imagen = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large' ); ?> <a href="https://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php echo $pin_imagen[0]; ?>" class="pinterest" target="_blank"> <i class="fa fa-pinterest"></i> Pinterest </a> </div> <!-- /. share-post -->
Conclusión
Con esto ya hemos implementado en nuestro sitio los enlaces necesarios para que nuestros visitantes puedan compartir el contenido en 4 redes sociales sin la necesidad de instalar ningún plugin.
No hay nada malo en usar un plugin para este mismo fin, pero cuando lo único que necesitas es incluir cuatro enlaces al final de cada post, te encontrarás con que la mayoría de los plugins incluyen un montón de opciones que probablemente nunca usarás. Además, es un buen ejercicio para practicar tus habilidades en la creación y edición de themes de WordPress.
Un abrazo,
@FranciscoAMK
La entrada Añadir enlaces para compartir en redes sociales sin plugins la publicó primero Francisco Aguilera G. en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.