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

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:

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:

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

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:

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.

Leer también

Etiquetas

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.

Deja un comentario