×
logo inovablog

2017/11/17

Botones para Compartir el Blog en Redes Sociales

Como poner botones para compartir en redes sociales  nuestro blogger, ahora que las redes sociales cada vez están haciendo mas peso sobre los motores de búsqueda, es esencial hallar una forma de compartir, nuestro blog de blogger o una web, ademas de eso, regar nuestra url por las redes sociales ayuda a aumentar el trafico de visitas en nuestro sitio, una buena forma de lograrlo es insertar iconos o botones de estas redes sociales en el blog, para que los usuarios que interactúan en el, puedan compartir nuestro enlace, y así se difunda. No confundir, lo que mostrare en esta entrada es para compartir una URL especifica o la pagina principal, si lo que estas buscando es colocar botones para compartir las entradas o post visita esta entrada de botones para compartir las entradas de blogger, por otro lado si lo que quieres son iconos tipo sígueme en tu blog sigue esta entrada para colocar iconos para seguidores, no siendo mas, basta de parloteo y manos a la obra.


Botones para compartir en Redes Sociales

Tengo listos estos botones (como los de la imagen), para agregarlos a tu blog, solo debes seleccionarlos y pegarlos en un HTML/Javascript. Si usas dispositivo movil o no quieres copiar el código, usa el botón rápido que dice Añadir a Blogger, pero recuerda que debes cambiar lo que dice URL-BLOG por la URL de tu blog o pagina. Nota el botón de facebook no se vera hasta que le coloques la URL de tu blog.

Si usas wordpress: copia el código -> ve a Escritorio-> Apariencia-> Widgets -> elige el widget cuyo nombre es ‘Texto’-> y pega el código.




O también este diseño estilo botón pequeño con contador al lado del botón, como en el caso de arriba puedes agregarlo mas rápido o desde un dispositivo movil con el boton Añadir a Blogger, recuerda cambiar lo que esta en color rojo por la URL de tu Blog. Nota el botón de facebook no se vera hasta que le coloques la URL de tu blog.

 compartir en Redes Sociales



También les presento estos estilizados iconos sociales para compartir el blog en redes sociales como los de arriba, solo que en estos incluye pinterest y likedin, a diferencia de los anteriores, estos iconos no generan carga adicional, (es decir no cargan los scripts de los botones) son livianos y están optimizados al 100%, al dar click para compartir el blog se abre una pequeña ventana POP Up! y después de compartir en enlace se cierra, ademas de que se tornan circulares y con una leve sombra al pasar el cursor sobre ellos, muy buena opción para los que prefieren este tipo de estilo, puedes ver como funcionan a continuación, Recuerda cambiar donde dice URL-BLOG por la dirección de tu blog.

compartir en facebook compartir en google+ compartir en twitter compartir en pinterest compartir en likedin





Como no incluir por lo menos el mismo estilo de botones pero para los usuarios que prefieren algo un poco mas pequeño literalmente, por ello también tengo estos bonitos iconos sociales para compartir, tienen las mismas funciones que los anteriores, simplemente son un poco mas pequeños, aunque no son los mismos, son iconos diferentes a los otros ya que están hechos de este tamaño para una mejor optimizacion, puedes verlos en acción a continuación. Recuerda cambiar donde dice URL-BLOG por la dirección de tu blog.

compartir en facebook compartir en google+ compartir en twitter compartir en pinterest compartir en likedin






Pero eso no es todo para los bloggers que no les gusta el diseño cuadrado les tengo este impecable diseño de Inovablog, tipo iconos redondos con rotación al pasar el mause por ellos, una muy buena forma para cautivar a tus usuarios y motivarlos a compartir el blog, tiene la misma función que los anteriores solo que el estilo es diferente, están de impacto y recuerda cambiar lo que dice URL_BLOG por la dirección de la pagina que vas a ponerle.

compartir en facebook compartir en google+ compartir en twitter compartir en pinterest compartir en likedin



Botones, compartir el blog, compartir en redes sociales, compartir sitio en facebook, compartir blog en twitter, boton para compartir, publicar en redes sociales, compartir tu blog en redes sociales, agregar botones de redes sociales, enlace para compartir en facebook, compartir mi blog en redes

52 comentarios:

Andres Felipe dijo...

muy bueno funciono de 10!

ADMINISTRADOR dijo...

Donde coloco el codigo en que parte del HTML estare agradecido

ADMINISTRADOR dijo...

espero tu respuesta

Loquendo Manzano dijo...

puedes colocarlo en un HTML/Javascript
si quieres de otra forma dímelo y revisare tu blog para ver donde lo calocas

Irene Buendía Espada dijo...

Muchas gracias por tu ayuda! ha quedado genial ;-D

Loquendo Manzano dijo...

me alegro irene saludos!

Jonathan LR dijo...

Yo quiero colocarlo debajo de cada entrada ;)

Isabel Lopez dijo...

He puesto el botón contador de facebook y se ve bien.pero creo que tiene un error,pues despues de pinchar en ME GUSTA sale la palabra confirmar,pinchas en esa palabra y se te abre un cuadro de diálogo donde sale para publicarlo en tu facebook,pero esto no ocurre.......me ayudas a corregirlo por favor...........o me puedes explicar algo mas

Loquendo Manzano dijo...

si quieres que estos botones de redes sociales para compartir estén debajo de la entrada

ve a plantilla
editar HTML
oprime las teclas CTRL F (Mac ⌘F) para activar el buscador
y busca esta linea

<div class='post-footer'>

si encuentras 2 fíjate en la segunda y pega el código debajo de esa linea y guarda

Albert. K dijo...

Buenas, pide "confirmar" seguramente porque la página no tiene demasiados likes. Es una nueva técnica que implementó Facebook. Sólo las páginas que poseen una cantidad considerable de "Likes", no les pide confirmar cuando le das click en "Me gusta".. Espero que haya servido de algo mi pequeña explicación y se entienda!!.. jeje.. Saludos :)

Lourdes Rodriguez dijo...

Muchas gracias, me quedo genial.

Mi vida acuatica dijo...

Pero no me queda alineado en el centro de la pantalla, ¿que le debo añadir?

Esneider Manzano dijo...

debajo de #botones-para-compartir { pega esto
margin: 0 auto;

Doble Cara dijo...

Oye amigo tengo una duda como los coloco en mi blog para que queden flotando en la barra izquierda, y al bajar las paginas este también se mueva?

saludos espero me puedas ayudar

Arturito capturado dijo...

cómo agrego el botón de youtube?

Angel Chacin dijo...

Gracias..! =)

Gabriela Rodriguez dijo...

Muchas gracias!!

Carlos Carranza dijo...

gracias maestros web

Galería Mo-Mont dijo...

Hay algunos tipos de botón en los que no aparece la posibilidad de incluir la URL de mi blog, particularmente en los cuadrados (ninguno de los dos tipos). Los circulares que giran son los que más me gustan y en estos si aparece "URL BLOG", pero sale error en linkedin. (También puede ser que no los vea). Gracias por adelantado

Loquendo Manzanoi dijo...

por supuesto, hay algunos botones que son genericos, es decir, funcionan para la URL que este por defecto abierta en ese momento.

Galería Mo-Mont dijo...

Perfecto, gracias. Otra pregunta si no te importa: tengo varias imágenes en la portada del blog y cuando doy a compartir cada botón coge la imagen que le da la gana y me gustaría que cogiesen la imagen que aparece en la entrada (mis entradas son de una sola imagen). Si me puedes ayudar te lo agradecería. Gracias

Galería Mo-Mont dijo...

He visto que tienes publicada una entrada explicando lo que te pregunto, por lo que retiro lo dicho; no la uso porque no me gusta tocar mucho la plantilla salvo que sea estrictamente necesario. Pero sí te pregunto como puedo hacer para que los botones de compartir cojan una imagen concreta. Gracias de nuevo

juankarlos dijo...

hola amigo esta muy bien tu blog de los botones y me funciona pero ahora tuno tienes el de youtube y el de instagram es que generalmento los uso y ahi no estan en el codigo como edito los que hay paara que se de el de estos gracias por tu ayuda de antemano

La nueva rola dijo...

Hola, tengo una duda, ¿Cómo haces para que cuando se va a compartir, la información que aparezca sea la de ese artículo y no otra cosa en el blog?

Neuro64. dijo...

Hola, una pregunta, como podría colocar los botones de youtube e instagram tambien en el último estilo?

Maco lopez romero dijo...

Hola docotre chevre los iconso pero como podemos ponerle el de youtube envez de otros que pueda considerar innecesarios

JESÚS ALBERTO dijo...

muchas gracias, me sirvieron muchisimo, pero el de pinterest circular no me da el link para compartir, solo da el cuadro blanco y se cierra

Adin Rodriguez dijo...

Este post ha sido uno de los más útiles que he enoontrado, muchas gracias por tu tiempo La verdad no se nada de diseño web con html, me he hido con códigos pero este esta BUENISIMO, me sirvió mucho. MUCHAS GRACIAS

Joffre C dijo...

Excelente artículo, estoy tratando de implementar los botones de compartir en mi web, pero, no toma la imagen que deseo. Puedes ayudarme por favor www.ec.viajandox.com - mail: jchito_g3@yahoo.com

Anónimo dijo...

Gracias!!!

Unknown dijo...

y si quiero poner un boton de instagram como le hago?

Loquendo Manzanoi dijo...

Por el momento Instagram no ha sacado un sistema para compartir fotos, hay que esperar.

Unknown dijo...

en la etiqueta

pollagrandeyjugosa dijo...

en la etiqueta footer

Daniel Crespo dijo...

Muy buen post.
Hay alguna manera de poner una foto por defecto al compartir el contenido con facebook??
La foto me sale en blanco.

ana julia maleta marin dijo...

Falta el de instagram. No se puede poner?

MiGuE dijo...

genial muy buen trabajo, GRACIAS, yo voy a usar el 3ero, si no es molestia seria me gustaría mostrar también la cantidad de compartidos, sera posible en ese estilo que escogí...

Shandi dijo...

Los botones están geniales y quedan fantásticos, pero... al pincharlos ¡no sucede nada! Puse la url de mi blog en los lugares que marcaste y todo ¿me faltará algo que no sé? Soy nueva en esto y no sé nada de html, pero me le animo a todo si me dices qué hacer. ¡Muchas gracias!

Shandi dijo...

Para que se entienda: probé los primeros y funcionan muy bien, pero necesito los de más abajo, los que tienen Pinterest e Instagram. Son esos los que no me funcionan.

Loquendo Manzanoi dijo...

Pero, ninguno de esto botones tiene instagram

Shandi dijo...

Ups... claro, era LinkedIn ¡qué burra! jajaja. Bueno, seguiré buscando el botón de Instagram entonces. ¡Gracias por responder!

gracieta martin dijo...

Puedes dejar el codigo para poner el boton de wattsap y de telegram?

Gracias

Laura dijo...

Muchas gracias por tu ayuda. Me puedes decir como se podría poner el boton de Instagram? Un saludo.

TONNY MACIAS dijo...

No he podido poner los botones de el ultimo, los que giran, los quiero poner en html en mi pagina web pero no se donde se pone el url de face ni de ninguno, ya me enrede jeje sorry ojala me puedan ayudar. gracias

Loquendo Manzanoi dijo...

Tonny, tienes que cambiar la parte que dice "inovablog.com" por la de tu blog, gracias por hacerme dar cuenta de esto, ya voy a cambiarlo

TONNY MACIAS dijo...

No veo ninguna palabra que diga asi para cambiarlo, habria otra manera para contactarte y me ayudes porfa para mi pagina web porfa?

TONNY MACIAS dijo...

o mira si no es mucha molestia, te paso los links de mis redes sociales y si me los puedes pasar porfa o no se como lo veas? solo utilizo, Facebook, Twitter, Google+, Linkedin, si podrias ayudarme o me los envias a mi correo electronico porfa?? parquemargarita@gmail.com saludos y gracias amigo

TONNY MACIAS dijo...

esto sirve para compartir los articulos que uno escribe verdad??

Tu pesadilla, la sombra dijo...

Intente colocarlo debajo de la entrada y no me funciona, ya hize lo que especificaban más arriba para hacerlo de ese modo.

DIGITAL MARKETER TOOLS dijo...

Hola,
Podrias ayudarme???, he colocado el código en el widget html/javascipt de blogger (sidebar), pero no sale el pop up, vibra el círculo pero no hace nada mas. Te dejo mi correo, por si puedes decirme como arreglarlo: mirthamichal@gmail.com,
Muchas gracias. Un saludo

Mar Bruja dijo...

Hola, por favor, se ve que Blogger ha cambiado y ya no se abren las ventanas pop up, sin embargo los botones sí aparecen, ¿como puedo solucionar este problema?Agradezco la respuesta muchas gracias!

Loquendo Manzanoi dijo...

Hola Mar Bruja, el efecto pop up funciona y es independiente de blogger, debe ser que tu navegador los bloquea, cuando abras una ventana mira la esquina superior derecha y desbloquealo

2018 © Inovablog