Redes sociales para WordPress con código

La verdad es que me gusta muy poco entrar en un blog y ver que no tienen personalizado el bloque de compartir en redes sociales, a mi personalmente cuando comparto algo, en Twitter sobre todo, me gusta nombrar a la fuente enlazando su cuenta de la misma red social, y todavía encuentro blogs que ponen los iconos para compartir en redes sociales y no los personalizan como es debido.

Por eso hoy vamos a ver como crear un bloque para compartir nuestros artículos en redes sociales solo con nuestro propio código y personalizado para WordPress.

Plugins para compartir en redes sociales con WordPress puedes encontrar cientos en Google, a mi los tres que más me gustan de todos los que he probado son Csriptless Social Sharing, Sassy Social Share y Mowomo.

Pero nosotros lo haremos con código puro y duro para que nuestro WordPress cargue más rápido y no estemos dependiendo de plugins, lo haremos para cinco redes sociales, Facebook, Twitter, Linkedin, Pinterest y WhatsSapp, si también en WhatsApp.

Para hacerlo empecemos como siempre, abrimos nuestro ID de programación favorito y creamos un archivo PHP vacío, ahora copiaremos y pegaremos dentro el siguiente código.




<?php
<div class="share-post">
    <
p><?php _e('Si te ha gustado cuéntaselo a tus amigos en las redes...''tu_theme');?></p>
    <a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" class="facebook" target="_blank">
        <img src="<?php echo get_bloginfo('stylesheet_directory'); ?>/images/facebook.png" title="compartir en Facebook" />
    </a>
    <a href="https://twitter.com/intent/tweet?url=<?php the_permalink(); ?>&text=<?php the_title_attribute(); ?>%20por%20@ricardfs" class="twitter" target="_blank">
        <img src="<?php echo get_bloginfo('stylesheet_directory'); ?>/images/twitter.png" title="compartir en Twitter" />
    </a>
    <a href="https://www.linkedin.com/shareArticle?url=<?php the_permalink(); ?>" target="_blank">
        <img src="<?php echo get_bloginfo('stylesheet_directory'); ?>/images/linkedin.jpg" title="compartir en Linkedin" />
    </a>
    <a href="whatsapp://send?text=Mira que me he encontrado navegando por ahí:%20<?php the_title(); ?>%20Escrito por%20<?php the_author(); ?>%20<?php the_permalink(); ?>" target="_blank">
        <img src="<?php echo get_bloginfo('stylesheet_directory'); ?>/images/whatsapp.jpg" title="compartir en WhatsApp" />
    </a>
    <a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php $thumb wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'thumbnail' ); echo $thumb['0']; ?>&description=<?php the_title(); ?>" class="pin-it-button" conunt-layout="horizontal" target="_blank">
        <img src="<?php echo get_bloginfo('stylesheet_directory'); ?>/images/pinterest.png" title="compartir en Pinterest" />
    </a>
</div>
?>

Lo siguiente es guardar el archivo en la raíz de nuestro Theme con el nombre de content-share.php, acto seguido abrimos el single.php de nuestro Theme, buscamos el final del Loop y agregamos el siguiente código para hacer la llamada al nuevo bloque para compartir en redes sociales.




<?php
get_template_part
('content''share');
?>

Y por último un poco de CSS para completar el bloque por completo, yo os dejo un ejemplo, vosotros podéis personalizarlo a vuestro gusto, abrimos el archivo style.css de nuestro Theme y al final del todo agregamos el siguiente código.




<style>
.share-post{
    width:100%;
    display:block;
    overflow:hidden;
    margin-top:20px;
}
.share-post p{
    width:100%;
    display:block;
    color:#CC0C00;
    letter-spacing: 1.5px;
    font-style:normal;
}
.share-post a {
    width:150px;
    float:left;
}
.share-post a img{
    width:auto !important;
    max-width:200px;   
}
</style>

Primero tenemos un título para nuestro bloque de redes sociales, luego compartimos en Facebook, nos cojera la imagen destacada, el title y el meta description del artículo, siguiente Twitter, nos cojera el enlace, el meta title y nuestra cuenta de Twitter, por supuesto debéis cambiarla por la vuestra, luego va Linkedin, en el nos cojera la imagen destacada, el meta description y el enlace del artículo, seguimos con WhatsApp, el nos cojera el título, el nombre del autor y el enlace del artículo, pero al compartilo, bien sea por WhatsApp web o por WhatsApp móvil también saldrá la imagen destacada del artículo, y por último Pinterest, este nos cojera el título, la imagen destacada y el enlace, lo bueno de está última red social es que podremos agregar un enlace en nuestro muro de Pinterest hacia nuestro artículo.

Aquí seguido os dejo las imágenes que he utilizado yo para crear el bloque de redes sociales para WordPress con código, podéis descargarlas y utilizarlas, o buscar otras y utilizar las que queráis claro, eso es a vuestro gusto.





240 Visitas

3 marzo, 2020 por ricard

ricard
Soy Ricard FS, me dedico a la programación desde el año 2000, me dediqué en pleno a WordPress desde el año 2015, ahora creo Plugins y Theme para WordPress desde código cero, y me gusta la divulgación de código, por ello la creación de este blog.

Deja tu comentario

Deja una respuesta

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

:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!: