Quantcast
Channel: HTML – Ayuda WordPress
Viewing all articles
Browse latest Browse all 48

Añadir enlaces para compartir en redes sociales sin plugins

0
0

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%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>

 

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


Viewing all articles
Browse latest Browse all 48

Latest Images

Vimeo 10.7.0 by Vimeo.com, Inc.

Vimeo 10.7.0 by Vimeo.com, Inc.

HANGAD

HANGAD

MAKAKAALAM

MAKAKAALAM

Doodle Jump 3.11.30 by Lima Sky LLC

Doodle Jump 3.11.30 by Lima Sky LLC

Doodle Jump 3.11.30 by Lima Sky LLC

Doodle Jump 3.11.30 by Lima Sky LLC

Vimeo 10.6.2 by Vimeo.com, Inc.

Vimeo 10.6.2 by Vimeo.com, Inc.

Vimeo 10.6.1 by Vimeo.com, Inc.

Vimeo 10.6.1 by Vimeo.com, Inc.

Vimeo 10.6.0 by Vimeo.com, Inc.

Vimeo 10.6.0 by Vimeo.com, Inc.

Re:

Re:





Latest Images

Vimeo 10.7.0 by Vimeo.com, Inc.

Vimeo 10.7.0 by Vimeo.com, Inc.

HANGAD

HANGAD

MAKAKAALAM

MAKAKAALAM

Doodle Jump 3.11.30 by Lima Sky LLC

Doodle Jump 3.11.30 by Lima Sky LLC

Doodle Jump 3.11.30 by Lima Sky LLC

Doodle Jump 3.11.30 by Lima Sky LLC

Vimeo 10.6.1 by Vimeo.com, Inc.

Vimeo 10.6.1 by Vimeo.com, Inc.

Vimeo 10.6.0 by Vimeo.com, Inc.

Vimeo 10.6.0 by Vimeo.com, Inc.

Re:

Re:

Re:

Re: