Añadir enlaces para compartir en redes sociales sin plugins

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).

Añadir enlaces para compartir en redes sociales sin plugins

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.

Facebook

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>

 

Twitter

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>

 

Pinterest

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

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(46 votos, promedio: 4.5)

¿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.

48 comentarios en “Añadir enlaces para compartir en redes sociales sin plugins”

  1. nicolas reggio

    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!

    1. 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 😉

  2. 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.

    1. 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 😉

  3. Gabriel Holanda

    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!! 🙂

  4. 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.

  5. Franklin Roldá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

  6. 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.

    1. 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.

      1. 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

    2. 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’); ?>

  7. 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??

  8. 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.

    1. 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

      }

  9. 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!!

  10. 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. ¿?

  11. Agustin Stuer

    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!

      1. Agustin Stuer

        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!

  12. 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.

  13. german gittar

    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?

  14. Luis Gabriel Herrera

    Hola! como puedo hacer para mostrar compartir en la foto de cada artículo del home(tipo blog se ven varios post)?

  15. 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.

  16. 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?

  17. 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?

  18. Teresa Rodríguez

    ¿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

  19. 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

  20. 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.

      1. 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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido