Blogs / WordPress

Integra botones sociales en WordPress (II)

En otro artículo similar explicaba como se pueden integrar botones sociales en WordPress. Explicaba que existen varios plugins para ello, pero os proponía una integración personalizada. Ahora, como una ampliación del artículo anterior os hago una nueva propuesta, con cambios radicales a la hora de la presentación de los botones en las páginas. También he hecho cambios en alguno de los servicios a integrar y en los tipos de botones.

Integra botones sociales en WordPress (II)

Los botones a integrar ahora son los de ‘Me gusta’ de Facebook, +1 de Google,  Bitacoras y Divoblogger. Se integran al final de cada artículo, dentro de un recuadro de color azul tenue. Se deben añadir algunas porciones de código en diferentes archivos. estos son los cambios a realizar:

Botones sociales

Definición de nuevos estilos

Hay que añadir la siguiente porción de código en el archivo que gestiona los estilos en nuestro tema (generalmente style.css):

.socialbotones {background: #dfeafa; padding: 10px; margin: 0 0 20px 0; overflow: hidden;}
.socialbotones h4 {font-size: 16px; line-height: 1.3em; color: #222; margin-bottom: 10px;}
.socialbotones .socialtwitter {float: left; width: 80px;}
.socialbotones .socialfacebook {float: left; width: 80px;}
.masbotones {margin-top: 90px; clear: both;}
.masbotones .socialmasuno {float: left; width: 80px;}
.masbotones .socialbitacoras {float: left; width: 100px;}
.masbotones .socialdivo {float: left; width: 80px;}

Inserción de los botones

Para que los botones aparezcan en las páginas que muestran los artículos o posts, tendrás que incluir el código siguiente en el archivo single.php. Lo mejor es añadirlo después de la parte que muestra la categoría o categorías y las etiquetas que corresponden al artículo. Este es el código:

<!-- Inicio botones sociales -->
<div class="socialbotones">
<h4>Comparte este artículo</h4>
<div class="socialtwitter"><a href="http://twitter.com/share" data-count="vertical" data-via="tu_nombre" data-lang="es">Tweet</a>
<script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script></div>
<div class="socialfacebook"><div id="fb-root"></div><script src="https://connect.facebook.net/es_ES/all.js#appId=****************&
amp;xfbml=1&amp;status=1&amp;cookie=1&amp;oauth=1"></script><fb:like 
href="<?php the_permalink() ?>" send="false" layout="box_count" 
width="450" show_faces="true" action="like" font=""></fb:like></div>
<!-- Inicio segunda línea botones sociales -->
<div class="masbotones">
<div class="socialmasuno"><g:plusone></g:plusone></div>
<div class="socialbitacoras"><a href="http://bitacoras.com/anotaciones
/<?php the_permalink() ?>" target="_blank"><img src="https://widgets.bitacoras.com/votar/mini/<?php the_permalink() ?>" 
alt="votar" title="Votar esta anotación en Bitacoras.com" style="vertical-align:middle;border:0" /></a></div>
<div class="socialdivo"><script src='https://divoblogger.com/api/check_url.js.php' type='text/javascript'></script></div>
</div><!-- Fin segunda línea botones sociales -->
</div><!-- Fin botones sociales -->

Nota importante: No te olvides de cambiar tu_nombre por el que tienes registrado en tu cuenta de Twitter. Tendrás que indicar también la appId de Facebook que corresponde a tu sitio web (sustituir los asteriscos). Si no dispones de una appId, deberás crearla en Crea una Aplicación (después de iniciar sesión en tu cuenta de Facebook), copiarla y pegarla en el lugar indicado. Si ya la tienes creada pero no sabes cual es, accede a tu sección de Aplicaciones, cópiala y pégala.

Otras inserciones

Con el fin de activar el lenguaje XFBML, al que llama el botón de Facebook, debes añadir al final de la línea que incluye la etiqueta html xlmns, en header.php, lo siguiente:

xmlns:fb="http://www.facebook.com/2008/fbml"

Quedando algo similar a lo que viene a continuación:

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?> xmlns:fb="http://www.facebook.com/2008/fbml">

También, para que el botón +1 de Google funcione, debes añadir al final del archivo footer.php, justo antes de la etiqueta </body>, la siguiente porción de código:

<!-- Inicio código botón +1 -->
<script type="text/javascript">
window.___gcfg = {lang: 'es'};

(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<!-- Fin código botón +1 -->

Al final aparecerá en todas las páginas que contienen artículos un recuadro similar al que aparece en la imagen que acompaña este artículo.

Etiquetas

Contenidos Relacionados

fabriciano

Amante de la informática y de Internet entre otras muchas pasiones. Leo, descifro, interpreto, combino y escribo. Lo hago para seguir viviendo y disfrutando. Trato de dominar el tiempo para que no me esclavice.