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:
Índice de contenidos
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%[email protected]
Y puesto en el maquetado sería:
<a href="https://twitter.com/intent/tweet?url=<?php the_permalink(); ?>&text=<?php the_title_attribute(); ?>%20por%[email protected]" 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%[email protected]" 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%[email protected]" 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
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)
Muy útil! Una vez busqué, sin éxito, como añadir automáticamente los links al estilo de muchos plugins.
Qué bueno que te resulte útil 🙂
Muy buen post. Imagino que puedo poner el mismo maquetado para que aparezca en la parte de los excerpts del index. Quería saber si podría poner también un contador de compartidos. Saludos!
Sip, puedes hacer lo mismo para los excerpts, siempre y cuando incluyas el archivo dentro del loop, no deberías tener problemas. No he probado el poner un contador, es una buena idea para un tutorial más adelante 😉
Lo hice y no me funciona no se por que… lo hice tal cual lo explicas =/
Un artículo interesantísimo!
He tenido un problema a la hora de incluir el archivo con la línea:
get_template_part(‘content’, ‘share’);
No me aparecía nada. La he cambiado por
get_template_part(«content-share»);
y me funciona bien.
Reconozco que soy un novato pero me gustaría saber por qué me ocurre esto.
Gracias.
Es extraño que no te funcione. Lo único que se me ocurre es que algo no estaba bien escrito. También me llama la atención que en tu primer ejemplo usaste comillas simples y en el segundo comillas dobles 😉
Hola, muchas gracias por esta explicación, me está resultando muy útil! sin embargo tengo una duda, como enlazo el archivo .css al . php. Se que se debe hacer una llamada desde el php al css, pero no se como hacerla, me podrias decir, te lo agradecería!! 🙂
Es una buena idea, quizás en un próximo tutorial lo explique 🙂
hola, quiero poner esto al final de cada página, o sea debo editar mi page.php, pero no encuentro exactamente el lugar donde debo insertar
soy principiante.
Busca donde salga the_content() y ponlo a continuación
Francisco muy bueno post. He estado investigando para compartir en linkedin pero no consigo la forma de hacerlo. ¿Tendrás idea de como sacar la url para linkedin? Gracias por compartir tus conocimientos
Sería algo más o menos así:
https://www.linkedin.com/shareArticle?mini=true&url=http://ayudawp.es&title=Ayuda%20WordPress&summary=&source=
Muy bueno! Consulta, se puede compartir en Instagram?
Me parece que instagram no es para compartir contenido, sino para publicar material original a modo de imágenes.
Fantástico artículo. He probado y funciona a la perfección excepto un detalle: el botón de twitter no funciona si en el título del articulo hay un signo de porcentaje, como por ejemplo: «Un 90% del agua es salada». Si no hay signo de porcentaje comparte perfectamente pero si lo hay abre una pestaña en blanco (lo he probado en diferentes navegadores desde el PC). ¿como podría solucionar esto?
Y otra cosa: Tras darle a compartir se queda marcado (subrayado) el texto del botón. ¿Hay forma de evitar eso?
Muchísimas gracias por todo.
Para que no quede subrayado el botón ,deberías modificar el css, agregarle algo para que cuando este en focus, no tenga subrayado. Es facil.
Hola Karen, el subrayado efectivamente fue fácil, pero no me había dado cuenta. A ver lo de twitter si me pueden echar una mano.
Saludos
Estuve buscando una respuesta a tu pregunta y llegué a esta página de stackoverflow donde alguien comparte una solución: http://stackoverflow.com/questions/10771728/encoding-get-the-title-for-twitter-share-url
En síntesis, lo que hay que hacer es reemplazar en la url de twitter: <?php the_title_attribute(); ?>
Por: <?php echo htmlspecialchars(urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, ‘UTF-8’)), ENT_COMPAT, ‘UTF-8’); ?>
Hola francisco !!! Cómo hago para personalizar lo que se comparte? Es decir, las metaetiquetas og:. Vi que tu lo tienes con metaetiquetas. Podrías explicarme como lo hago? Tendría que hacer un header especial para el single.php y alli agregarlas??
En mi caso está configurado con el plugin «WordPress SEO by Yoast». Estoy pensando hacer un tutorial en detalle respecto a esto más adelante 🙂
Hola!
He creado el archivo content-share.php y lo he introducido en content-single.php, justo después de «the_content», así:
El problema es que al instalar plugins, tales como Entradas Relacionadas (Related Posts), todo ellos se agregan al contenido justo por encima de la barra de compartir, que siempre está de última. Esto es lo que quiero evitar, ya que deseo que la barra de compartir esté de primera.
¿Alguién me puede ayudar?
Muchísimas gracias anticipadas.
Esto ocurre porque esos plugins usan un filtro que hace referencia a the_content y les permite poner el contenido dentro de el contenido, justo después del texto del post.
Si quieres que tus botones de compartir se muestren entre el texto y el resultado de esos plugins, deberías crear una función que use el mismo filtro desde functions.php.
Algo más o menos como esto:
add_filter(‘the_content’,’agregar_esto’)
function agregar_esto($content) {
$content. = ‘insertar aquí contenido al final del post’;
return $content
}
Siguiendo este mismo patrón se puede tener las funciones de compartir sin necesidad de instalar pesados plugins. Siendo un post con relativa antigüedad hasta ahora que lo veo, felicidades Francisco.
De hecho con la polémica de las licencias GPL estaba desarrollando un Fork de Monarch por tratarse de uno de los plugins más ligeros para compartir entradas, pero viendo esto me anime a comenzar un proyecto desde cero, aunque lamentablemente de momento lo estoy implementando directamente en mis themes, quizás cuando ande menos cargado de trabajo me anime a crear versión plugin…
Saludos!!
Lo he probado y no me funciona. Lo cierto es que lo he hecho en local. ¿Será por eso? ¿Alguien lo ha probado en local? Al pinchar en el enlace de facebook (por ejemplo), abre una ventana en la que sale un botón que dice: compartir y una casilla de formulario con la dirección URL del sitio (local) y nombre del post, pero al pulsar sobre el botón, no hace nada. ¿?
No te va a funcionar en local porque facebook, twitter y los otros sitios no podrán ver el contenido que estás compartiendo.
Francisco, muchas gracias por el aporte, realmente grandioso. Tengo una pregunta, al agregar los botones arriba del título Compartir queda un espacio en blanco que no me agrada del todo, hay alguna posibilidad de disminuir el espacio? Saludos y muchas gracias!
Para ello tendrías que modificar el CSS de tu theme 😉
Y qué tendría que buscar específicamente? Traté de editar un par de cosas pero no tuve suerte, qué sería lo que tendría que editar? Muchas gracias!
Usa el inspector de tu navegador para encontrar cual es el elemento que agrega ese espacio, y ese es el que tienes que editar.
Gracias por la información!
No olviden visitar mi sitio. 🙂
Hola Francisco!
Gracias por compartir este artículo.
¿Puedes ayudarme con un problema por favor?
Consigo que aparezcan los enlaces donde yo quiero, pero los links no me funcionan correctamente. En el de Facebook «abre una ventana del navegador y la cierra». En twitter lo abre y escribe «por @ayudawp». En google simplemente abre la página de la red social. En pinterest abre una ventana de la red social para seleccionar un tablero pero no ingresa ninguna url.
Creo que deberías verificar que no estés trabajando en local sino en un servidor que las redes sociales puedan ver y que los enlaces tengan la estructura correcta, incluyendo la URL del post.
Hola te consulto en el home de la web tengo una especie de grid con distintos posts; quiero ponerle estos botones en cada cuadro de esta grilla, la pregunta es sirve para compartir cada contenido sin necesidad de abrir cada post? o todos compartirán la Home del sitio?
Hola! como puedo hacer para mostrar compartir en la foto de cada artículo del home(tipo blog se ven varios post)?
Muy útil el post la verdad. Es justo lo que deseo hacer pero en las fichas de productos en las descripciones cortas. Si para las entradas es el archivo single.php ¿Cual sería para las descripciones cortas de los productos? muchas gracias saludos.
Si no es pedir demasiado, como quedaría el codigo para poner esos mismo botones en blogger?
Hola Francisco te agradezco por el tutorial, me ayudo mucho. Quisiera saber si hay alguna posibilidad de que se habra una ventana emergente al momento de compartir y no en una nueva ventana del navegador, es posible esto?
Hola genial el tuto muy util de comprender, pero en caso de querer ponerlo dentro de las entradas de los proyect y no dentro del blog, como debería hacerlo?
Simplemente quiero tomarme el tiempo para agradecer compartir su publicación.
¿cómo se haría en Instagram? nunca viene esta red social en los plugin para compartir el contenido de un blog de wordpress en Instagram. He llegado a este post buscando como meterla «a mano» ¿es posible?
Mis felicitaciones por la publicación, muy interesante
Hola compis! Una pregunta, por saber si a vosotros también os ha pasado. Al publicar en facebook el artículo de mi blog, sólo me aparece en la publicación la url de la web. En cambio al compartir con google plus o twitter, no tengo problema y sí que se publica la foto del artículo, el título correspondiente…¿Os ha pasado esto mismo o algo parecido al compartir con facebook? Gracias! =D
Eso es que no estás integrando las tags Open Graph. Deberías usar un plugin que las genere, como Yoast SEO, por ejemplo
Graciaaaas =D
Hola, Ya implemente el tutorial y todo perfecto, pero tengo una petición, no se si sera posible, quisiera que al dar click en el botón de compartir, en lugar de abrir una nueva pestaña, se abra un popups de dialogo para que la persona de en compartir y automáticamente se cierre y quede en mi pagina. Que código debo agregar y en que parte? Gracias de antemano por tu ayuda.
Prueba con un plugin o script de lightbox que también funcione con enlaces externos
Gracias por responder amigo, el detalle es que no quiero meter mas plugins al sitio, debe haber algún código que se les pueda agregar a estos para darle esa funcionalidad, si pudieras ayudarme con ese código te lo agradecería mucho
Al final un plugin es código también. Lo busco pero ahora tengo una racha jodida, con bastante tarea. Lo miro