Wordpress

Botones sociales sencillos y estéticos para WordPress

Written by elHery

Hay un contratiempo cuando se trata de implementar botones para compartir en las redes sociales en una web: las peticiones y el tiempo de carga. Aunque por defecto algunas redes sociales proporcionan códigos asíncronos para implementar en webs externas y eso alivia el problema de cierta forma, lo ideal sería prescindir completamente de esas peticiones.

botones sociales

Para este fin hay multitud de plugins y servicios de terceros (AddThis, Po.st, Shareaholic, etc.) que aunque también implican peticiones, ciertamente son menos si se comparan con las de los botones nativos. Pero si lo tuyo es la simplicidad y no requieres de botones que implementen librerías como jQuery o elementos extras, aquí tenemos una solución.

Estos botones son puro CSS, HTML y un poco de JavaScript, podría prescindirse de este último, pero resulta realmente útil a la hora de presentar la ventana para compartir. Dale un vistazo al código y a las instrucciones para implementarlo.

Lo primero es implementar el código CSS, puedes hacerlo en el archivo style.css de tu themes o si tu theme incluye un apartado para agregar CSS, justo ahí puedes ubicarlo.

[css]

.compartir-post {
border-top: 0;
margin-top: 0;
padding-top: 0;
}

.compartir-post a {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
display: inline-block;
color: white;
padding: 0 3em;
line-height: 2.5em;
margin: 0.1em;
}

.compartir-post a:hover {
padding: 0 3.0em;
text-decoration: none;
}

.compartir-post .facebook {
background: #3b5998;
}

.compartir-post .twitter {
background: #55acee;
}

.compartir-post .googleplus {
background: #dd4b39;
}

.compartir-post .pinterest {
background: #cc2127;
}

[/css]

Lo siguiente es copiar y pegar el código a continuación en el lugar donde quieras que aparezcan los botones, comúnmente en el archivo single.php del theme.

[php]

<div class="compartir-post">

<a href="#" onclick="window.open (‘http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>’, ‘Facebook’, ‘toolbar=0, status=0, width=550, height=400’);return false" class="facebook">
Facebook
</a>
<a href="#" onclick="window.open (‘https://twitter.com/intent/tweet?url=<?php the_permalink(); ?>&text=<?php the_title_attribute(); ?>%20@marcianos_mx’, ‘Twitter’, ‘toolbar=0, status=0, width=550, height=400’);return false" class="twitter">
Twitter
</a>
<a href="#" onclick="window.open (‘https://plus.google.com/share?url=<?php the_permalink(); ?>’, ‘Google +’, ‘toolbar=0, status=0, width=550, height=400’);return false" class="googleplus">
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="#" onclick="window.open (‘https://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php echo $pin_imagen[0]; ?>’, ‘Pinterest’, ‘toolbar=0, status=0, width=550, height=400’);return false" class="pinterest">
Pinterest
</a>

</div>

[/php]

También puedes ubicarlos dentro de algún loop.

About the author

elHery

Leave a Comment