Blogpocket

Cómo agregar los botones de redes

sociales a tu blog
POR ANTONIO CAMBRONERO (HTTPS://WWW.BLOGPOCKET.COM/AUTHOR/ANTONIO/) - PUBLICADO: 6 OCTUBRE, 2014 - ÚLTIMA
MODIFICACIÓN: 19 FEBRERO, 2018

Se conocen con el nombre de “botones sociales” a los que se suelen poner al final de las entradas de un blog con
objeto de que el usuario pueda compartir contenidos en sus perfiles de redes sociales.

En las líneas que vas a leer a continuación te enseñaré cómo agregar los botones de redes sociales a tu blog.
Veremos los correspondientes a las cuatro principales plataformas: Twitter, Facebook, LinkedIn y Google+).

Fundamentalmente, existen dos tipos de botones que puedes añadir a tu blog: el de "follow" y el de "share/like". El
de "follow" ("sígueme") te permite promocionar los perfiles de tus redes sociales en el blog, lo cual es,
indudablemente, una extraordinaria manera de darte a conocer y un paso más en tu estrategia de marketing 2.0.
Por otra parte el botón de "share/like" ("compartir/me gusta") proporciona a tus visitantes una forma fantástica de
Por otra parte, el botón de share/like ( compartir/me gusta ) proporciona a tus visitantes una forma fantástica de
compartir tus contenidos entre sus seguidores de los medios sociales y amplificar la audiencia de lo que publicas.
Los botones para compartir deben incluirse al final de cada entrada del blog, mientras que el de follow deber ir en la
página de "about" (acerca de) y en el sidebar (columna lateral) del blog.

APADRINA ESTE POST (HTTP://WWW.BLOGPOCKET.COM/PATROCINADORES)

A continuación los botones de redes sociales para compartir entradas, entre otras funciones, y cómo integrarlos en
tu blog.

Tabla de contenidos

Botones para Twitter

Botones para Facebook
Botones para LinkedIn
Botones para Google+
Caso práctico
Código a añadir en tu plantilla de Blogger

Algunas puntualizaciones sobre el código

Pasos a seguir
Botones para Twitter
Botón de Follow. ir a la siguiente dirección, configurar las opciones (cuenta a la que seguir, tamaño y lenguaje)
copiar el código y pegarlo allí donde se desee que aparezca:
https://twitter.com/about/resources/buttons#follow Para más información ver la documentación de Twitter
en https://dev.twitter.com/docs/follow-button.

Botón de Share. Acudir a la siguiente dirección, configurar las opciones, copiar el código y pegarlo en el sitio en
donde se quiere mostrar: https://twitter.com/about/resources/buttons#tweet Para leer más información, ingresar en
la documentación de Twitter en https://dev.twitter.com/docs/tweet-button.

Botones de hashtag y mención. De forma similar a los botones para seguir y compartir, existe la posibilidad de
implementar botones para ver un hashtag y para publicar un tweet mencionando a un usuario. Para ello, ir
respectivamente a las direcciones https://twitter.com/about/resources/buttons#hashtag y
https://twitter.com/about/resources/buttons#mention.

Twittear enlaces. Existen herramientas como http://clicktotweet.com/ (http://clicktotweet.com/) para incluir enlaces
que permitan a tus visitas publicar tweets escritos por ti. Por ejemplo: ¡Twittea este artículo!
(http://clicktotweet.com/9Kl5C)

Widgets. Los widgets proporcionan un mecanismo para crear timelines de Twitter dinámicos que se pueden
insertar en cualquier sitio. Para crear el código de un widget, ingresar en https://twitter.com/settings/widgets/new,
seleccionar el tipo (cronología, favoritos, lista o search), configurar las preferencias y copiar el código necesario
para llevarlo a tu blog
 para llevarlo a tu blog.

¿Te está gustando este artículo?

Compártelo en redes sociales

Me gusta este artículo sobre cómo agregar los botones de redes

sociales a tu blog (https://twitter.com/share?
text=Me+gusta+este+art%C3%ADculo+sobre+c%C3%B3mo+agregar+los
+botones+de+redes+sociales+a+tu+blog&via=blogpocket&related=blogp
ocket&url=https://www.blogpocket.com/2014/10/06/como-agregar-los-
botones-de-redes-sociales-a-tu-blog/)
R+LOS+BOTONES+DE+REDES+SOCIALES+A+TU+BLOG&VIA=BLOGPOCKET&RELATED=BLOGPOCKET&URL=HTTPS://WWW.BLOGPOCKET.COM/2014/10/06/COMO-

Botones para Facebook

Botón de Follow. Ve a la dirección https://developers.facebook.com/docs/reference/plugins/follow/ y personaliza el
botón a tu gusto. Genera el código (HTML5, XFBML O IFRAME) y ponlo en el lugar en el que quieres que
aparezca.
Caja de Like ("me gusta"). De forma similar al botón de Follow, acude a la
dirección https://developers.facebook.com/docs/reference/plugins/like-box/
(https://developers.facebook.com/docs/reference/plugins/like-box/). También existe el botón de
like: https://developers.facebook.com/docs/reference/plugins/like/
(https://developers.facebook.com/docs/reference/plugins/like/)

Botón de enviar. Para facilitar a los usuarios que visitan tu blog que puedan compartir los contenidos en sus
perfiles crea el botón de enviar en https://developers.facebook.com/docs/reference/plugins/send/
(https://developers.facebook.com/docs/reference/plugins/send/)

Compartir enlaces. Si quieres que tus visitantes compartan enlaces directamente, dirígelos a
http://www.facebook.com/share.php?u=http://bit.ly/133DbQF donde el enlace despues de "u=" (en este caso, un
enlace de bit.ly) es el link al artículo que se quiere compartir. Por ejemplo: ¡Comparte este artículo!
(http://www.facebook.com/share.php?u=http://bit.ly/133DbQF).

Todos los botones están recogidos en la página de Facebook https://developers.facebook.com/docs/plugins/

(https://developers.facebook.com/docs/plugins/).

Botones para LinkedIn

Botón Seguir. El botón para seguir en LinkedIn se crea y configura en https://developer.linkedin.com/plugins/follow-
company (https://developer.linkedin.com/plugins/follow-company).
Caja con el perfil de tu compañía. LinkedIn ofrece este plugin para crear un bloque de información de tu
compañía que, además, incluye el botón seguir: https://developer.linkedin.com/plugins/company-profile-plugin
(https://developer.linkedin.com/plugins/company-profile-plugin). Para marcas personales, acude
a http://developer.linkedin.com/plugins/member-profile-plugin-generator
(http://developer.linkedin.com/plugins/member-profile-plugin-generator)

Botón compartir. El botón para compartir contenido en LinkedIn se crea

en https://developer.linkedin.com/plugins/share-button. Configura la URL del artículo a ocmpartir y genera el código
necesario con el fin de incluirlo en el sitio donde quieres incorporarlo.

Botón para recomendar productos. El botón para recomendar productos se crea

en http://developer.linkedin.com/plugins/recommend-button y para aprender a crear productos en tus páginas de
LinkedIn, acude a http://ayuda.linkedin.com/app/answers/detail/a_id/5287
(http://ayuda.linkedin.com/app/answers/detail/a_id/5287)

Puedes encontrar todas las posibilidades de LinkedIn, en cuanto a botones se refiere

en http://developer.linkedin.com/plugins (http://developer.linkedin.com/plugins).

Botones para Google+

Botón seguir. Para crear y generar el código del botón seguir de Google+, ingresa
en https://developers.google.com/+/web/follow/ (https://developers.google.com/+/web/follow/).
Caja de Google+. La caja de Google+ tiene el mismo propósito que la caja con el perfil de compañìa de LinkedIn.
Para generar el código correspondiente y poder insertarlo en tu blog, ve
a https://developers.google.com/+/web/badge/ (https://developers.google.com/+/web/badge/).

Botón +1. El botón +1 de Google+ se crea en http://www.google.com/webmasters/+1/button/

(http://www.google.com/webmasters/+1/button/)

Botón compartir. Genera el botón de compartir yendo a la dirección https://developers.google.com/+/web/share/

(https://developers.google.com/+/web/share/).

Compartir enlaces. En Google+ puedes invitar a tus lectores a compartir enlaces configurando la siguiente URL
con el link al artículo a compartir: https://plusone.google.com/_/+1/confirm?
hl=en&url=http%3A%2F%2F%20http://bit.ly/133DbQF (https://plusone.google.com/_/+1/confirm?
hl=en&url=http%3A%2F%2F%20http://bit.ly/133DbQF) El enlace de bit.ly que va al final de dicha URL es la
dirección del artículo a compartir. Por ejemplo: ¡Publica este artículo en Google+!
(https://plusone.google.com/_/+1/confirm?hl=en&url=http%3A%2F%2F%20http://bit.ly/133DbQF).

Caso práctico
A continuación veremos, con un caso práctico, cómo se incluyen los botones de redes sociales para Blogger. Para
ello, incluiremos la botanadura al final de cada entrada, como es habitual. Añadiremos los siguientes botones:
 +1 de Google+
Twittear
Compartir en Facebook
Seguir en Twitter

Lo que nos interesa es proporcionar a nuestros visitantes un mecanismo sencillo para que ellos puedan compartir
nuestros posts en Google+, Twitter y Facebook.

Para ello, te proporciono el código correspondiente, basado en la guía incluida en este artículo, y las principales
indicaciones para que no tengas problema en la configuración en Blogger.

Código a añadir en tu plantilla de Blogger

Copia el código siguiente en tu plantilla de Blogger (un poco más adelante te explico en qué lugar exacto debes
hacerlo).

Sustituye [usuario de Twitter] por tu usuario de Twitter.

Algunas puntualizaciones sobre el código

La botonadura social que incluye Blogger por defecto (y que se configura en el apartado “Diseño > Entradas
del blog” activando la opción “Mostrar botones para compartir”) no funciona. Por eso se debe añadir el código
 en el sitio concreto que te indico.
Para que la ristra de botones solo aparezca en las entradas individuales del post, y no en la página home, se
engloba el código entre las sentencias <b:if cond=’data:blog.pageType == "item"’> y </b:if>
En Facebook, se elige el tipo de layout button-count y no se pone el parámetro href para que la página a
compartir sea aquella en la que se encuentra el código (cada entrada del blog, en este caso)

Pasos a seguir
 (http://www.blogpocket.com/wp-content/uploads/blogger-botonaura.png)
1. Haz una copia de seguridad de tu plantilla. Ve a “Plantilla > Crear/Restablecer copia de seguridad” y haz clic
en el botón “Descargar plantilla completa”. Guarda el archivo .xml a buen recaudo.
2. Duplica el archivo previamente descargado en 1 y, usando tu editor de texto preferido (compatible con
código), busca el siguiente literal: <div class=’post-footer-line post-footer-line-3’> Busca el final de ese div
(alineado con la etiqueta de comienzo). En la imagen se señala el sitio en el que debes pegar el código de la
botonadura.
3. A continuación del bloque de instrucciones encontrado en el punto 2, pega el código indicado anteriormente.
4. Guarda el archivo y súbelo, yendo a “Plantilla > Crear/Restablecer copia de seguridad”, seleccionando el
archivo en el apartado “Sube una plantilla desde un archivo de tu equipo.” y haciendo clic en el botón “Subir”.
 ¿Te ha gustado este artículo?
Haz clic en la imagen siguiente, para aprender más trucos sobre redes sociales:

(http://www.blogpocket.com/mejores-
trucos-social-media/)

Entradas Relacionadas:

1. El minimalismo te puede hacer grande (https://www.blogpocket.com/2013/02/13/el-minimalismo-te-

puede-hacer-grande/)
2. 51 superconsejos para utilizar Twitter (https://www.blogpocket.com/2013/02/21/51-super-consejos-para-
utilizar twitter/)
 utilizar-twitter/)
3. Uso de redes sociales en empresas españolas (https://www.blogpocket.com/2014/09/29/uso-de-redes-
sociales-en-empresas-espanolas/)
4. Redes sociales, los mejores horarios para publicar y cómo ser más eficiente
(https://www.blogpocket.com/2018/03/21/mejores-horarios-publicar-redes-sociales/)

Acerca de Antonio Cambronero

Informático y blogger. Pionero del mundo del blogging (desde 25-1-2001). Publicando
información gratuita y sin publicidad sobre blogging y social media.
Sígueme en Google+ (https://plus.google.com/+AntonioCambronero/?rel=author)

Comentarios

grupo de trabajo (https://www.bareinternational.cl/servicio/fuerza-de-grupo-trabajo-en-equipo-colaboracion/) dice

20 diciembre, 2017 en 4:56 pm (https://www.blogpocket.com/2014/10/06/como-agregar-los-botones-de-redes-sociales-a-
tu-blog/#comment-1223)
Muy buena publicación, útil y muy detallada.

Saludos

Mario

Responder

Antonio Cambronero (http://www.blogpocket.com) dice

2 enero, 2018 en 12:06 pm (https://www.blogpocket.com/2014/10/06/como-agregar-los-botones-de-redes-sociales-a-
tu-blog/#comment-1232)

Gracias por el feedbback. Saludos :))

Responder

Comentarios
Por favor, no incluyas ningún enlace. Los comentarios se moderan, así que transcurrirá un tiempo entre su escritura
y publicación. Lee nuestras condiciones de uso (https://www.blogpocket.com/aviso-legal).
 Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios
(https://akismet.com/privacy/).

TODAVÍA HAY MÁS… Tutoriales, cursos y artículos, básicos y avanzados, para aprender
a desarrollar un blog de WordPress.

ACCEDE AL CURSO DE WORDPRESS

(HTTPS://WWW.BLOGPOCKET.COM/CURSO-DE-WORDPRESS)

¿ESTÁS BUSCANDO HOSTING? Centro de privacidad TAMBIÉN PUEDES ENCONTRARME

EN
(https://www.blogpocket.com/centro-
privacidad)
El servicio de alojamiento web es eMail
Aviso legal
fundamental para que tengas un blog (http://www.blogpocket.com/contactar)
(https://www.blogpocket.com/aviso-legal)
seguro y rápido.
Antonio Cambronero
Política de Privacidad
(http://www.antoniocambronero.com) [mi
HOSTÉATE (https://www.blogpocket.com/privacidad)
(HTTPS://WWW.BLOGPOCKET.COM/HOSTING) blog personal en GitHub Pages]

Cookies
(https://www.blogpocket.com/politica-de- ¡Accede también a los
cookies) contenidos de Blogpocket
desde Telegram!
Licencia Creative Commons telegram.me/blogpocket
(http://creativecommons.org/licenses/by- (http://telegram.me/blogpocket)
nc-sa/2.5/es/)

Todo el mundo tiene algo que decir y siempre hay alguien dispuesto a escuchar