Aprende como hacer una Barra Social para compartir tus redes sociales desde tu sitio web. – HTML y CSS
Es muy importante hoy en día y mas que nunca antes tener presencia en redes sociales con tu sitio web, marca o empresa. Es por eso que hoy en este tutorial te enseñare como hacer la famosa barra social vertical que esta fija a pantalla y sigue al usuario a todas partes.
Así que empecemos, el código en realidad es muy sencillo, no necesitamos nada mas que HTML, y CSS asi de simple.
Todo lo que necesitamos es un div con una lista dentro y en cada elemento li una etiqueta a con una clase, pero mejor veamoslo en el código que es mas sencillo entenderlo asi.
<div class="social"> <ul> <li><a href="http://www.facebook.com/falconmasters" target="_blank" class="icon-facebook"></a></li> <li><a href="http://www.twitter.com/falconmasters" target="_blank" class="icon-twitter"></a></li> <li><a href="http://www.googleplus.com/falconmasters" target="_blank" class="icon-googleplus"></a></li> <li><a href="http://www.pinterest.com/falconmasters" target="_blank" class="icon-pinterest"></a></li> <li><a href="mailto:contacto@falconmasters.com" class="icon-mail"></a></li> </ul> </div>
Aquí hay varias cosas de que hablar, la primera es que he puesto el atributo target="_blank" para que cuando el usuario acceda al link este se abra en una nueva pestaña y asi no abandone tu sitio, muchas personas no lo recomiendan pero todo el mundo lo hace.
La segunda cosa que tenemos que observar es la class que le he agregado, cada class repesenta un icono, este icono lo agregamos con fuentes, asi como vimos en este tutorial:
Como utilizar iconos para sitio web mediante fuentes y CSS
Pasemos con el código CSS:
.social {
position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
left: 0; /* Establecemos la barra en la izquierda */
top: 200px; /* Bajamos la barra 200px de arriba a abajo */
z-index: 2000; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
}
.social ul {
list-style: none;
}
.social ul li a {
display: inline-block;
color:#fff;
background: #000;
padding: 10px 15px;
text-decoration: none;
-webkit-transition:all 500ms ease;
-o-transition:all 500ms ease;
transition:all 500ms ease; /* Establecemos una transición a todas las propiedades */
}
.social ul li .icon-facebook {background:#3b5998;} /* Establecemos los colores de cada red social, aprovechando su class */
.social ul li .icon-twitter {background: #00abf0;}
.social ul li .icon-googleplus {background: #d95232;}
.social ul li .icon-pinterest {background: #ae181f;}
.social ul li .icon-mail {background: #666666;}
.social ul li a:hover {
background: #000; /* Cambiamos el fondo cuando el usuario pase el mouse */
padding: 10px 30px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
}
En el código anterior he puesto comentarios explicando mas claramente para que usamos cada propiedad, pero en resumen lo que hicimos fue establecer una posición fija para la barra con position:fixed; También le dimos a cada elemento a un estilo de botón, le agregamos animaciones e hicimos que cuando el usuario pasara el mouse incrementara el espacio interior del botón y el color de fondo.
Con esto ya lo tendríamos, cabe aclarar una cosa y es que esta barra no funciona si la deseas posicionar a la derecha, puedes quitar left:0; y poner right:0; esto la moverá a la derecha, pero al pasar el mouse tendrás un error, si quieres tenerla a la derecha tendrás que quitarle el padding al hover.
Como hacer una Barra Social (vertical y fija a pantalla) con HTML y CSS3
Disculpa, ando en el diseño de una página y me encuentro en lo de una galería y un reproductor de música, será que puedas hacer un tutorial de lingthbox o fancybox para ayudarme a comprender todo esto
¿La propiedad ‘box-sizing’ en el selector universal es para que se haga uso de el en todos los elementos?
Excelente el tuto.
Así es, es para que se aplique a todos los elementos del sitio. Que de hecho hay una forma mejor de hacerlo, pero ya la explicare en un articulo.
ya pude incrustarla con éxito en mi wordpress, muchas gracias
Genial! :D
Aunque seguí todas las indicaciones del tutorial el mi página la barra no aparece pegada a la izquierda
La verdad es que no se que es lo que pueda estar mal: http://misitiodematematicas.com/
Me encanta tu diseño!! como podría hacer para tener el código,si no es mucha molestia.Un saludo y muchas gracias de antemano.y si pudiste solucionar el problema de la barra?
¿Me podrías decir dónde se pega el código html dentro de wordpress? Estoy empezando en esto y estoy un poco perdido. ¡muchas gracias!
Existen mucho plugins en WordPress para social networks
hay muchos plugins pero si quieres hacerlo manual solamente pega el div en el header o cabecera y lo demás en el style.css, creo nada mas que se tienen que subir manual las fonts
Por Favor. Alguien podría decirme como insertar el codigo en wordpress?
Hola que tal! como puedo hacer una barra de redes sociales como la que tienes en esta página en forma horizontal? agradezco tu pronta respuesta
Yo también estoy interesado en la barra horizontal? alguien sabe como adaptarla? Gracias
pork en el lado right no funciona igual que en el left??
Hola falcon podrias explicar como haces para usar el api de facebook?
Hola buenas , he visto tu tutorial, lo he imitado y en mi pagina (viendo el resultado en chrome) se me abre las pestañas a ambos lados ; como puedo solucionarlo?
Hola men quisiera que hagas un tuto con la barra vertical que tienes en tu pagina ojala pudieras ayudar Gracias …….Respondeee :c
Hola!! Excelente tutorial. Mira quise aplicar lo que enseñaste en mi página, pero le pasa esto y no sé porqué…
http://www.beeplop.cl/panel%20deslizable/index4.html
Muchas Gracias.
Muy buena Falcon , pero siguiendo , ¿puedes hacer un tutorial para crear una barra de búsqueda funcional, con resultados, enlaces, imágenes , etc .. ???
Quizá mas delante, ya que de momento no tengo tutoriales de programacion backend.
Muy buena Falcon , gracias por la rápida respuesta a mis preguntas , múltiples sitios y lo tuyo es lo que más me dijo , para que vea , soy de Brasil mano kkkk …
gracias por la atención …
¿Cómo puedo añadir esta búsqueda sitema el igual de su sitio en mi ?
Falcon , cómo crear un sistema de contacto como el de su página web : -?
Yo utilice un plugin llamado Contact Form 7
http://i.imgur.com/ohXzMtb.jpg
¿Cómo agrego este sistema de comentarios y mi sitio, sólo con el código ??
Se llama disqus, depende del sitio que tengas, puede ser en wordpress u otra plataforma, en su web están las instrucciones, si es wordpress haré un tutorial mas adelante.
Yo soy el dueño de Negaosite , es que me olvidé el # ¨ % ! # & Login
ainda não possuo site, ainda está no meu desktop \ todavía no propio sitio, todavía está en mi escritorio
Buenas yo consegui poner la barra social pero me gustaria ponerla en el lado derecho de la pantalla y que el efecto se haga al reves y yevo varios dias probando en el codigo css y no lo consigo alguien podria decirme como.
Ya lei la aclaracion para tenerla a la derecha gracias!!
falcon me pasas el codigo completo porque tengo problemas al poner los iconos plz
Ya solucione el problema gracias :)
Hola necesito encontrar la class donde se encuentra los iconos, se hace referencia a un tutorial pero no lo encuentro, por favor podría decirme donde lo puedo encontrar. Gracias y espero que me puedan ayudar.
Holaaaaaaaaaaa, necesito ayudaaaaaa, la class donde se encuentra los iconos, se hace referencia a un tutorial
pero no lo encuentro, por favor podría decirme donde lo puedo
encontrar?
Excelentes tutoriales Carlos, me han sido de mucha utilidad, espero hagas un video tutorial en donde nos enseñes a sacar los numeros con las Apis de facebook, twitter, etc.
gracias de antemano
tu sitio es elegante.
Hola Carlos, podrias dar un tutorial de como hacer que aparezca el contador de las veces que se ha compartido la pagina, eso de lo que dices al principio de este video, te lo agradeceria mucho, gracias.
Amigo me sale morado los iconos pero no me sale con color ¿nose cual es el problema? elegi los iconos de yahoo! google-plus facebook y twitter pero no me sale con estilos
Carlos, y si quiero que el hover sea diferente en cada coso.
Usted construyó este sitio con WordPress ?? Falcon
hola con una consulta fíjate que logre construir el menú desplegable animado , pero cuando la visualizo en el navegador no me aparecen los iconos a que se deberá? subí todas las carpetas a mi servidor, lo curiosos es que cuando visualizo la pagina en mi editor web si me aparecen los iconos solo cuando trato de visualizarla desde el navegador no me muestra los iconos, supongo que la carpeta en donde se encuentran los iconos es la que se llama fonts? o estoy equivocado revise el código y todo esta bien podrías darle una mirada de como me quedo por favor te lo agradecería mucho http://www.pruebachat.site40.net
amigo, hice todo bien pero el unico detalle es que el de facebook esta sobresaliente y los demas estan en posicion normal. que hago?
Falcon me intereso mucho la barra social, pero todavia me gustaria mejorarla mas, en el caso del mail mas bien, si me podrias decir como le hago, te lo agradeceria infinitamente. Saludos desde Rep. Dom.
Falcon sera que me podrias ayudar con esto no se porque los iconos me aparecen azules no entiendo ayudame porfavor tengo que terminar mi pagina web entre unos dias porfavor es una tarea final porfavor ayudame
Soy nuevo en esto pero me interesa aprender todo de paginas web, aunque estoy estudiando ingenieria en sistema y utilisamos sql server con visual studio pero necesito modificar una pagina web de una pequeña empresa en donde trabajo y me gustaria que me ayudaras bueno si no es mucha molestia. gracias por permitirnos ver tus videos.
Excelente presentación. Me podrías ayudar con el código que se necesita para saber la cantidad de me gusta que le han dado a la página en facebook y otras redes sociales; me es sumamente importante, ya que lo necesito para una página que estoy haciendo, he leido hasta la documentación que facebook da, pero no me funciona.
Muchas gracias…
Se puede hacer ese menú pero horizontalmente?
hola, es excelente este tutorial. lo hice en el index y salió perfecto, pero cuando quiero agregarlo a las otras portadas del menu de navegación solo aparecen unos puntitos indicativos de los íconos pero no aparece el menú. podrías ayudarme? mil gracias!!
no me salen los iconos y cuando voy a la pagina de Icomoon me sale entypo+
me podrias explicar como hago para que cada vez que el mouse se posicione sobre el icono de facebook o twitter me aparezca el numero de veces que se ha compartido la pagin
gracias men
Buenisimo unos retoques y de cabeza a mi web :D.
Muchas gracias Falcon
como faço para fazer essa barra lateral que de pra curtir direto como link direto
Falcon podrías decirme como hacer esta barra pero con las apis para que te ponga el numero de personas que lo han compartido? Graciass
Buenas Falcon, recién copie y pegue los códigos sin ningún problema, sin embargo me queda un espacio entre cada uno de los iconos y la barra me queda separada, te quería pedir ayuda para corregirlo ya que es bastante feo a la vista.
Muchísimas gracias por subir tus tutoriales y cursos de verdad he aprendido increíble ;)
Muchas gracias a ti por ver mi contenido :)
excelente tutorial hermano una abrazo desde Venezuela…
amigo hice todo tal cual y funciona perfecto cuando lo integro con mi web no se ven los iconos los coloque tal cual en la carpeta fonts y y las rutas correctas y nada, a que se debera esto? podrias ayudarme?
usa para los iconos https://fortawesome.github.io/Font-Awesome/icons/
muy buenos tutoriales! estoy empezando a meterme en bootstrap y me has resuelto muchisimas dudas, con respecto a éste video, como puedo hacer para que muestre un texto al pasar el mouse sobre el botón? justo como el que tienes en tu página. Gracias por el apoyo :D
Buenas tarde me gustaria saber como colocar el contador en la barra.
Gracias aunque a lo primero no entendia como hacerlo lo logre muchas gracias por el tutorial
Disculpa Falcón cómo logro poner los números al lado de la barra social
para insertar el contador a los botones podrias exponer un poco ese tema me interesa si no es mucha la molestia … excelente tutorial e aprendido mucho con tus videos
Thank you.
excellent tutorial.
Pregunta, como puedo ajustar esa barra verticalmente? y que este en la parte superior de mi web.
Hola Falcon Masters, lo primero agradecerte por tus tutoriales, son magníficos. Mi pregunta: esta misma barra social se puede hacer horizontal?, si es así me puedes detallar como se hace. La necesito para un cliente. Desde ya muchas gracias
amigos … por que a pesar de que utilizo el atributo … … el contenido de mi pagina se visualiza en portugues!!?? … que debo hacer para solucionarlo…!!!
másters falcón con esto e estado muy inquieto mejorando tu grandioso diseño
saludos desde Colombia creo que tu algún día vas ha estar trabajando en la Google
como puedo subir los íconos manualmente.. saludos
https://fortawesome.github.io/Font-Awesome/icons/ , hay encuentras los iconos, solo pega el el codigo del head y listo
carlos arturo, como hago para que aparezcan los iconos? ya pegue el html y el css, pero no aparecen los iconos
con icnocos de https://fortawesome.github.io/Font-Awesome/icons/
Hola, gracias por el tutorial!!
me sirvio perfecto!. pero… una pregunta.. cuando la veo en celulares.. como haces para que desaparezca?
es decir para RESPONSIVE no se vea?
gracias de antemano
la misma pregunta tengo yo :/
Saludos!
Muchísimas gracias, excelente me ha servido de mucho este post! ….Ahora bien, mi pregunta es como hacer para que al hacerse response cambie de horizontal a vertical su posición o que no se muestre?
genial…
Buen dia, esta Muy Bueno el tutotial, pero mi pregunta es la siguiente. Hice todos los pasos y los meti a mi BLOG, pero los iconos no se ven, funciona todo perfecto pero los iconos no se ven. En donde debo alojar los iconos para este Caso???, te agradeceria inmensamente , Muchas gracias
me gustaria saber como haces para quitar la barra social vertical cuando la vez desde el movil porque es un poco molesto tenerla fija todo el tiempo
creo haber leído sobre esto, y en el caso del móvil se establece un «media query» para los tamaños del móvil con el div, se le establece la propiedad visibility a «none» y con ello se ‘esconde’ literalmente la barra. Y con la propiedad «display:none», ésta desaparece y su espacio es ocupado por el contenido que le sigue.
Buen día.
Seguí tus indicaciones y ya quedó, pero tengo una duda, ¿cómo puedo integrarlo en una plantilla de joomla?
Gracias.
Muchas gracias por el aporte… tengo una duda, Como puedo agregarle los iconos y el contador de visitas?
muy bien explicado y muy util para una home page, Gracias!!!!
Excelentes vídeos mis felicitaciones, aqui esta lo que yo eh echo con tus tutoriales.
Como lograste poner la barra social & el menu juntos yo no puedo .. se pierden los iconos de la barra.. ayudame
Desbes checar tu iconos de fonts que esten todos en una solo archivo por que a mi me sucedio lo mismo, de preferencia descarga otra vez la carpeta pero con todos los iconos para cualquier cosa y vuelve aprobar
Gracias !! afortunadamente ya me quedo
https://uploads.disquscdn.com/images/ee47ea81858580187329e02d541495cd514ccb7cae75c8c2a5bc8801df01253c.png
hola por fas ayúdame lo que no entiendo es cómo hacer la barra fija y el vertical social bar a la vez :(
Hola, disculpa me puedes ayudar, no se ven los iconos en la barra lateral solo salen unos cuadritos
a instagram que color le pusiste?
Me gustaria saber que es lo que tengo que hacer para poder meter la barra social & el menu juntos , al hacerlo en la barra se me cambian los iconos por los del menu… ayuda por favor
hola, que gran aporte, solo tengo un problema cuando ingreso el codigo en sublime textal momento de cargar el archivo html me arroja la animacion ,los colores y todo , pero los iconos no, solo se ven unos cuadros pequeños en su lugar, me ayudarias porfavor
trata subir el nivel de la ruta:
font-family: ‘icomoon’;
src: url(‘../fonts/icomoon.eot?db25nn’);
src: url(‘../fonts/icomoon.eot?db25nn#iefix’) format(‘embedded-opentype’),
url(‘../fonts/icomoon.ttf?db25nn’) format(‘truetype’),
url(‘../fonts/icomoon.woff?db25nn’) format(‘woff’),
url(‘../fonts/icomoon.svg?db25nn#icomoon’) format(‘svg’);
Es por la ruta de tu carpeta fonts que no reconoce los iconos creo(no se si ya lo habras solucionado vale mas tarde que nunca xd)
Que show oigan que propiedades cambio para pasar la barra pero del lado derecho
y si quisiera ponerle un boton ala barra de redes sociales que me los oculte y luego otro botón que me lo muestre de nuevo
Llevo unos tres años sí no mal recuerdo, viendo sus tutoriales. Recien vuelvo a visitar su página Sr. Carlos Arturo. Me llevo su tutorial para aplicarlo a un cliente que requiere una barra social. Le hice unas cuantas modificaciones para que sea responsive.
Gracias por todo, me ha ayudado mucho y gracias a sus tutoriales empece a hacer $$$. Aquí les dejo mi barra, echenle un viztaso: https://www.libertytest.es/
esta padre no se complica uno la vida en visual studio o eclipse
El efecto hover no funciona, pues se mueve toda la barra, bastante raro.
Les grabé un video a ver si saben ayudarme. No entiendo. : (
Link del video: https://youtu.be/qBJArPpq8zI
Le conteste una solucion en su video
Hola. Ya puse la barra, todo excelente, muchas gracias. Pero me gustaría pasarla al superior de la pagina, que en vez de estar en la izquierda este en el centro arriba. HELP please, muchas gracias, saludos.
Hola todos!
Quisiera saber como meterle el icono «dibujito» del «F» de Facebook, para que mi pagina se vea mejor por supuesto…
Alguien podria ayudarme?
Gracias!:)
Es la barra que tiene a la izquierda esta pagina…lo que hace que uno se relacione por ejemplo con el Facebook Twitter u otros…necesito los iconos para ello!
hola que tal como estan, me gustaria saber como hacer que mi barra se oculte cuando se abra en dispositivo moviles.
mi barra funciona perfecto pero al reducir la resolucion,…
oye como hago para que se oculte la barra con el boton que tu tienes en tu pagina ¡ help please
Hola Carlos Arturo, como haría si ni me salen los iconos.? todo lo demás funciona… Necesito ayudaaaaa por favor
Hola! intersante articulo. Pero tengo dos problemas. El primero, es que los iconos me aparecen separados entre si.
El otro problema que tengo, es que pese a que le cambio las direcciones de facebook, correos y otras, me dirige siempre a tu página de falconmasteres. No se que más hacer para corregir eso.
Saludos.
es ridiculo tenes que hacer tanto alboroto por meter los iconos,facebook,twitter,G+,etc. tan facil como:
para poner los iconos, meten una imagen. de 15px por 15px de formato PNG a el folder «iconos»
y metes la imagen
entre las « »
y cambio el destino de falconmasters a «debian»
el codigo HTML
—Antes—
—Despues—
Hola Carlos he creado una página web con bootstrap,
como puedo agregar un formulario de comentarios como el tuyo, por ahora tengo puesto, el de html comment box,
gracias. http://jlg.net84.net/music.html
Hola;excelente documental,Me gustaría saber como puedo colocar los números que salen en cada icono del menú GRACIAS
Hola una pregunta. Cómo puedo hacer para que la barra se oculte cuando este desde mi móvil?
Creo que con agregar esto en el css basta para definir a partir de qué dimensión quieres que desaparezca:
@media only screen and (max-width: 768px) {
.social{
display: none;
}
}
Hola. Me gustaría saber cúal es el código que usas para que la barra no se vea en vista móvil. Por favor.
hye hermano, eres un master de verdad, muy buen tutorial, la verdad me resulta hacerlo facil desde mi pc, el problema esta que en intentado ponerlo en mi blog y ahi me sale otra cosa no se me cargan los iconos de la redes sociales que descarge de ICONMOON. me gustaria saber como puede hacer que me funcione en mis blogs. porque me gusta la idea.. dejame saber por favor los paso que debo dar.
muchisimas gracias me sirvio de mucho!!!!
Hola! Podrian decirme si el codigo funciona para blogger y donde lo inserto exactamente. Gracias
hermoso…..
amigo.. gracias por tus tutoriales, he aprendido mucho.. saludos desde venezuela… … pero tengo un problema aqui…. no esta al 100% al costado.. que seria? y de que tamaño tienen que ser los iconos? osea cuantos PX?
Hey falcon, buenos tutos, te tengo una pregunta: ¿se puede alinear esta barra a la derecha? ¿como se podría hacer?
dentro de .social{} cambias «left:0;» por «right: 0;» y dentro de .social ul li a{} agregas «float:right;» Jaksja no sé si sea correcto, pero a mí me funcionó :v suerte..
no me sirve, la hice en asp.net y no me salen las imagenes
a ti no te sirve
disculpen alguien le fallo en el google chrome?
saludos
Buen dia, gracias por tus tutoriales primero que todo, han sido de gran ayuda. Con respecto a este, tengo un problemita, cuando lo edito y pruebo en mi pc se ve bien, pero al subirlo al servidor, al pasar el mouse sobre una de las redes automaticamente todas las demás se van hacia el frente, no se porque sucede. Gracias de antemano.
hermano no se ve nada
Saludos… principalmente te felicito por tus aportes y por todos los videos que en lo personal de estan ayudando mucho.
Acabo de ver como 4 de tus tutoriales y los 4 me han salido bien.
Tengo una consulta… en la Social Bar… en tu pagina… veo que tiene una flechita para ocultar la barra… mi pregunta es… Como se hace ese truco?? quiero aplicarlo a una pagina en la cual estoy trabajando.
Te agradezco tu ayuda, te dejo mi correo para esperar tu respuesta ya sea con el codigo .css o algo mas.
Gracias y bendiciones.
Mi correo: lionheart2503@gmail.com
Buenos dias… me gustaria saber cual es el codigo en css para colocar el boton que oculta la barra… veo que aca en la pagina esta esa opcion y me gustaria aplicarla a un ejemplo que estoy realizando.
Si alguien lo ha hecho me gustaria y estaria agradecido con el aporte.
Bendiciones a todos.
como puedo hacerlo pero para la mano derecha amigos y para que el agrandado se de para la izquierda
como puedo hacerlo pero para la mano derecha amigos y para que el agrandado se de para la izquierda
dentro de .social{} cambias «left:0;» por «right: 0;» y dentro de .social ul li a{} agregas «float:right;» Jaksja no sé si sea correcto, pero a mí me funcionó :v suerte.
Hola Jaja tengo un problema: la barra no me queda completamente pegada a la izquierda. No sé por qué, pero cuando la pongo del lado derecho sí queda bien pegada y funciona correctamente. Alguien sabe qué puedo hacer para solucionarlo?
La idea es buena, practica y sencilla, pero podrias arreglarla para que funcione también a la derecha, y para que el link sea directamente de LIKE a la red sin salir y menos abrir otra VENTANA…?
Desde ya muchas gracias, el aporte es prometedor
Hola! recien veo tu tutorial y es muy bueno pero no sé porqué pongo todos los codigos en «estilos.css» y no salen….
hola me gustaria saber el codigo html que esta utilizando en este post debajo del video, donde abre otra ventana sin dejar de ver nuestra pagina gracias
tengo una pregunta y pues la verdad soy nuevo en esto, pero después de tener creada la carpeta de la barra social, como hago para subirla a mi pagina en wordpress a mi tema mas bien ???? no se como, agradesco ayuda en este tema
no me sale :s
gracias por el aporte, funciona muy bien
Como corrijo que en móviles en safari no me muestra la barra social.
Hola, ya de je un comentario en youtube, pero me a surgido una duda y es como podia ocultar manualmente la barra social.
Se que ya tiene tiempo el tutorial, a ver si tengo suerte que me respondas.
Gracias por tus contribuciones.
He buscado un tutorial «sencillo» que me permita exibir en mi pagina un Menu vertical que facilte la navegacion interna independientemente sea o no fija…Que cumpla el objetivo primario como es llevar alusuario a la pagina que desea ingrezar. Pregunto: ¿Puedo sustituir las imagenes por un indice o nombre del contenido a buscar?
Hermano muchas gracias por el aporte usted a sido luz en la oscuridad para mi
no me salen los icon que sera
buenas tardes… felicitaciones por tus tutoriales yo realice la vertical barra social y quedo muy buena… ahora como puedo insertar esa barra a mi pagina web que esta construida con wordpress… muchas gracias