Botones de Facebook

20 de mayo de 2011 84 comentarios ,

La otra vez MaG@S RaDioMuSiC me comentaba que en la red hay muchos botones para Twitter pero muy pocos para Facebook. Por alguna razón los diseñadores gráficos no le han puesto mucha atención a ello y desconozco por qué. Yo no soy diseñador ni nada que se le parezca pero me tomé un tiempo para hacer estos cinco botones de Facebook que aunque son muy pocos espero que alguno les agrade por si consideran usarlo para enlazar su página o perfil de Facebook desde su blog.

Son 5 y están en formato PNG, sólo hay que subirlos a un hosting y en un elemento HTML/Javascript poner un código simple de imagen con enlace:
<a href="http://www.facebook.com/usuario"><img src="URL de la imagen" /></a>
Siento no poder hacer botones a petición pero espero que al menos éstos sean de su agrado.




84 comentarios en:

" Botones de Facebook "

  1. HOLA POTRO,ME GUSTARÍA SABER SI ES POSIBLE QUE EL BOTON "ME GUSTA ESTE BLOG" QUE HE PUESTO EN MI BLOG COMO IMAGEN FLOTANTE, AL "PICAR" SOBRE EL, SIRVIERA DE CONTADOR PROPIO. VINCULANDOLO O ENLAZANDOLO DE ALGUNA MANERA CON UN CONTADOR OCULTO. NO LO SÉ , QUIZÁS ES UNA COSA MUY COMPLICADA...?
    UN SALUDO. GRACIAS POR TU ATENCIÓN.

    ResponderEliminar
  2. gracias, me serviran. de seguro a mas de alguno le ayudaran o por lo menos de la daran alguna idea.

    ResponderEliminar
  3. Hola! Excelentes tus entradas! Pero tengo una duda... Cómo hago para ver la URL de las imagenes que adjuntaste para descargar? No entiendo esa parte... Gracias y saludos!

    ResponderEliminar
  4. Hola Potro! He agregado un intro, tal y como lo explica uno de tus post. Sin embargo, luego de dar clic en ENTRAR, todo el blog aparece a la izquierda y ya no centrado como antes. Pero al ingresar en una de las entradas, vuelve a su posición centrada. Como hago para que se vuelva a centrar? Espero tu respuesta.! Mi blog: http://avril-paraguay.blogspot.com !!!

    ResponderEliminar
  5. Muy buenos Potro, muchas gracias! :)

    ResponderEliminar
  6. Potro, me parecen excelentes, de verdad. Ya me he puesto uno de ellos y estoy privadita!.
    Me gusta mucho el que parece escrito a mano de Sígueme en el Face.
    Gracias chiquillo!!!!! Un besote

    ResponderEliminar
  7. matiasascanio, para esos menesteres debes usar el botón de Me gusta que sí cumple con esas características.

    MCarlitooH2, nEjO, gracias por su visita, saludo a ambos!

    Nayita, debes subirlas a la red y ahí y obtener su URL. Puedes bien hacerlo desde PicasaWeb, o usar otros hostings como Google Sites o Dropbox.

    ResponderEliminar
  8. enrique, alore67, gracias por pasar, saludos!

    .::DIEGO::, deja el comentario en la entrada que corresponde para no desviarnos del tema de este post.

    Laube, qué gusto que han sido de tu agrado. Gracias por el beso, otro para ti :)

    ResponderEliminar
  9. ayudame ya que tu eres el mejor dime como puedo poner sañales en mi blog con los videos en vivo yel chat al lado por favor ayudame.

    ResponderEliminar
  10. Estan Geniales !

    Yo tambien manejo el Photoshop.. e_e

    Pasense por mi Blog ! www.postdesign.blogspot.com

    ResponderEliminar
  11. nueva concepcion, no soy el mejor pero tampoco entiendo exactamente qué quieres hacer (?)

    Carlos Sz, qué bueno que te gustaron :)

    ResponderEliminar
  12. O_o Potro, jajajajaja ahora me siento muy halagado de verme nombrado en la página que considero un ejemplo de como dar soporte a gente que quieran bien, iniciarse o bien seguir aprendiendo en un nivel más alto, y que me hayas nombrado (ya sé que es como una bobería) pero a mi me ilusiona muchísimo, así que muchas gracias Potro por este post y este gesto que has tenido conmigo, ahora venía solo a saludarte pero mañana tengo puesto el botón fijo!!! Un abrazo enorme y muchas gracias Potro

    ResponderEliminar
  13. Hey @potro mira estos botones de compartir que encontre que personalmente me gustaron porque son simples pero muy completos !

    http://www.addtoany.com/buttons/for/blogger

    Ya estan en mi blog por si los quieres ver !

    postdesign.blogspot.com

    ResponderEliminar
  14. MaG@S RaDioMuSiC, había tardado en hacerlos pero aunque sea tarde pero cumplí con lo prometido :D

    Carlos Sz, son muy similares a los de AdThis.

    ResponderEliminar
  15. Disculpame Potro jejeje, que va en la parte de usuario ?

    ResponderEliminar
  16. Gracias por el pack de botones Potro.

    ResponderEliminar
  17. hola potro...quiero decirte que coloque un banner de tu blog en mi web....puedes pasar a mirar...me gustaria q lo visitaras... www.cienciaverde.co.cc

    ResponderEliminar
  18. MaG@S RaDioMuSiC, el nombre de usuario que tengas para tu página, por ejemplo el mío es fans.ciudadblogger
    O si se te complica eso entonces elimina esta URL:
    http://www.facebook.com/usuario

    Luego entra a tu perfil de Facebook y copia la URL que esté en la barra de direcciones y ponla en lugar de lo que has eliminado anteriormente.

    ResponderEliminar
  19. miguelangelgc, por nada ;)

    katensa, muchas gracias por el enlace :D

    ResponderEliminar
  20. y para al momento de dar click en dicha imagen no nos cambie la pagina del blog, osea que el face salga en otra pagina, como se podria hacer alli?

    ResponderEliminar
  21. Mira esta entrada que explica cómo abrir los enlaces en otra ventana.

    ResponderEliminar
  22. Facebook debería agradecértelo!!..yo desde luego te lo agradezco...pienso elegir uno

    ResponderEliminar
  23. Hola de nuevo potro cual son los tamaños de las imagenes sobre todos el de "Sígueme en Facebook" Saludos!

    ResponderEliminar
  24. Kenny Smith (:, qué gusto que así haya sido!

    Graci, gracias!

    Antonio, dale click derecho a la imagen, selecciona Propiedades y tendrás la info de las medidas.

    ResponderEliminar
  25. Hola Potro: Me encanta este blog...desde que lo descubrí me animé a hacer un blog dedicado a mi idolo maximo...cada cosa que puse o modifique lo saque de este sitio. muchisimas gracias, a todos les encantó!!!!

    ResponderEliminar
  26. Wow!!!! excelente como siempre potrito!!! y la foto del seductor potro??.......bueno no importa tu talento dice más!!! Éxito!!

    ResponderEliminar
  27. ............Roxana C. Rocha, el Puma es un grande, y qué gusto que te animes a rendirle tributo con tu blog!

    Kary, aun queda mi primer avatar cuando salía sin camisa pero pronto tendré también que eliminar esa evidencia :P

    ResponderEliminar
  28. potro:
    como agrego una imagen en lugar de "publicar un comententario en esta entrada" como la que tienes arriba donde se escriben los comentarios.
    gracias por todo.

    ResponderEliminar
  29. hola, queria saber si se puede hacer algo como lo que tienen en esta pagina
    http://www.dpelicula.net/
    (abajo a la derecha)

    ResponderEliminar
  30. Hola Imperfecto,

    Crea el fanbox, enciérralo entre:
    <div style="display:scroll;position:fixed;bottom:0px;right:0px; background-color: #e6e6e6;"/>

    y

    </div>

    Y pon todo ese código antes de </body>

    ResponderEliminar
  31. Potro ya está colocado y funcionando a la perfección, muchísimas gracias de parte mia y de parte de los caras de faiiis buik que se van aprovechar de unos botones super guapos a costa de haberlos currado=trabajado...tú ;-)

    ResponderEliminar
  32. Hola de nuevo potro! Gracias por los botones los andaba buscando.

    Tengo una pregunta que nada que ver con la entrada. Te comento , en mi blog tengo instalado el gadget para ver las entradas mas leidas y lo que quiero hacer es que tenga un estilo similar al tuyo en "ultimos articulos" es decir que el link de la entrada se vea de un color y poder cambiar la fuente de la descripcion (cursiva vendana arial esas cosas) nose si me explico , como hago eso?

    ResponderEliminar
  33. interesante este post....potro deberias hacer un post sobre como colocar un formulario de registro para saber quien esta interesado en la web de uno.. y tambien para comentar

    ResponderEliminar
  34. Hugo, pues no veo cómo pueda hacerse pues el gadget que uso es específico para las últimas entradas, no es un gadget predefinido de Blogger.

    katensa, hay un formulario de contacto que te puede servir, ahora no lo tengo en la mano pero en el buscador podrás dar con él.

    ResponderEliminar
  35. Hola! Potro como te comentaba ami blog cuando los abres con Internet Explorer no se visualiza la imagen de fondo, ni la del header y menos el footer y eso es lo que le luce, necesito que me ayudes: http://www.pixeltuxpan.com/

    ResponderEliminar
  36. Hola Potro. Verás, he visto un efecto de anclas en jquery (cómo tus flechas de arriba-abajo) que me ha gustado mucho pero por más que lo intento no logro incluirlo en el blog.

    ResponderEliminar
  37. Hola administracion,

    Prueba cambiando la forma en la que pones los fondos en los estilos, por ejemplo este:

    background: #000000 url(http://img72.xooimage.com/files/4/3/9/viejas-28e9509.png)no-repeat top center;

    Cámbialo por este:
    background-image: url(http://img72.xooimage.com/files/4/3/9/viejas-28e9509.png);
    background-repeat: no-repeat;
    background-position: top center;

    Es lo mismo, sólo que la primera (como lo tienes) es una forma resumida y válida también pero algunas veces IE tiene problemas con ello.

    ResponderEliminar
  38. Hola Javi, nunca he usado las flechas arriba y abajo de jQuery así que no sabría cómo ayudarte.

    ResponderEliminar
  39. No. Me refiero a anclas (www.ejemplo.com#ejemplo) pero en vez de la brusquedad de html hay anclas en jquery con efecto deslizante.
    (http://www.pizcos.net/2008/09/anclas-con-jquery.html). Lo he intentado pero no lo consigo.

    ResponderEliminar
  40. Potro Mucchisimas Gracias, eres Grande Man!
    solo una dudita, le puedo poner color al fondo
    junto con la imagen de fondo que tengo???
    GRACIAS! de nuevo :D

    ResponderEliminar
  41. Javi, en entradas de otros blogs no puedo asesorarte, pero si preguntas ahí seguro te darán las indicaciones que necesitas.

    pixeltuxpan.com, claro:
    background-color:#000;

    ResponderEliminar
  42. Potro, Osea que sustituyo background-image: url...
    por: background-color: #...???

    ResponderEliminar
  43. No, arriba o debajo de ese estilo agregas el nuevo:

    background-color:#000;
    background-image:url(.....);

    ResponderEliminar
  44. Hola Potro te tengo una preguntita que no esta tan relacionado con el tema. La custion es que yo cuando hay algun dia conmemorativo cambio la imagen de la entrada del blog al mejor estilo doodle de Google. Pero lo que yo quiero es que cuando pasas el mas alla un texto que mencione las festividad. Ya se vos estaras pensando en poner title= etc... pero ya lo probe y no funciona. Bueno te dejo las lineas aver si podes hace algo

    #header-wrapper{width:950px;margin:0 auto 0;height:120px;background: url(URL de la Imagen de Cabecera) top no-repeat;overflow:hidden;}

    ResponderEliminar
  45. Efectivamente tienes que poner el title pues eso es justo lo que muestran los doodles.
    Con los artilugios expandidos busca esta área y agrega lo que está en negrita:

    <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block' title='Festividad' />

    ResponderEliminar
  46. Hola Potro, oye tengo un problema, instale el boton compartir de Facebook y funcionaba bien hasta que un día el boton comenzo como a travarse, es decir creaba una entrada nueva y en vez que apareciara el contador 0 aparecia automaticamente el 6 en todas las entradas aunque nadie les halla dado click para compartir, en vez de comenzar de 0 empieza el contador en 6.

    El codigo del botón es el siguiente:

    <a href='http://www.facebook.com/sharer.php?href=" + data:post.url+ "' name='fb_share' type='button_count'>Compartir</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>

    Lo adapte para que mostrara en la descripcion el titulo del articulo y la descripcion del blog y funcionaba bien hasta que empezo a comenzar de 6 y ya no me muestra mas que el pura descripcion del blog.

    Alguna solucion?? ya que se ve raro eso y no se como solucionarlo!

    ResponderEliminar
  47. ¿Lo has puesto para que se muestre también en la portada? Porque si es así entonces ese es el problema ya que el botón no identifica de dónde se compartieron las entradas pues todas provienen de la portada.
    Es necesario que el botón se vea sólo en las entradas individuales para que el conteo no se vea afectado.

    ResponderEliminar
  48. Potro el boton los tengo en la portada junto con el boton me gusta y el del twitter, lo raro que los otros botones funcionan bien.

    Veo que algunos blogs de blogger tienen el boton compartir en la portada abajo de cada entrada y funciona bien.

    Si yo tenia el boton de compartir en la portada pero de un tiempo para aca comenzo a fallar el contador, alguna solucion?

    PD: Aclaro que al entrar a los articulos y el boton funciona perfecto, saludos!
    Y funcionaba bien solo que de eun tiempo para aca comenzo el conteo en 6, pero si ingreso a la entrada el boton se normaliza y funciona perfecto, alguna solucion?

    ResponderEliminar
  49. Si está en la portada no puede funcionar bien pues como te comentaba el botón no sabe cuál entrada es la que se debe compartir pues la portada no es una entrada. Todos los que han tenido el mismo problema hacen que sólo se muestre en las entradas y con eso se les ha solucionado el problema.

    ResponderEliminar
  50. Necesito ayuda Mr. Potro! Estoy varado con el numero de visitas de mi blog desde hace meses y no puedo aumentarlas.
    Sería mucho pedir que le heche una ojeada y me de su opinión en que esta fallando?
    odontologiasalud.blogspot.com
    Muchas gracias por este blog!!!

    ResponderEliminar
  51. Oye Potro ya hise que el boton compartir de facebook se mostrara solo en las entradas, pero una pregunta, porque el boton me gusta funciona bien en la portada y el boton compartir no??

    ResponderEliminar
  52. Hola Dr,

    El tema de las visitas y el posicionamiento a veces puede ser un tanto complejo por las diferentes variantes que hay y el tiempo que se necesita para que los resultados se vean; mucho de esto es paciencia, dependiendo de la temática será lo rápido que empiecen a verse las llegadas de visitas, obviamente hay temas que tienen más demanda que otras y aun así estos tienen que competir con un sin número de sitios que hablan sobre lo mismo.

    La recomendación que le doy a todos es la misma, escribir periódicamente contenido nuevo y de calidad (eso le gusta a Google), inscribirte en un par de directorios, y de repente hacerte un poco de promoción consiguiendo enlaces o con un intercambio pero preferentemente con sitios que vayan acorde a la temática de tu blog.

    A veces un recurso que puede ayudar (a mí alguna vez me ayudó) es que entres a Yahoo Respuestas, hay mucha gente buscando información de todo tipo, seguro encontrarás gente que pregunte cosas que sabes y que tienes en tu blog, con solo dar una muy breve respuesta y dejando la URL de tu blog o entrada como referencia podrá ayudarte un poco, pero ojo, no hay que tomarlo como SPAM, no es dejar la dirección de tu blog y ya, tienes que satisfacer la duda de quien preguntó pero no extenderte para que le quede un poco de curiosidad y entre a ver la información completa en tu blog.

    Y aunque los metatags ya no son tan importantes como antes lo cierto es que sigue habiendo una regla general, no debe abusarse de la meta etiqueta keywords, he visto que has puesto demasiadas palabras clave y eso no es recomendable pues no es grato para los buscadores, trata de reducirlo a unas 10 o 12 palabras, las más representativas y que creas que son las que tienen más demanda en las búsquedas.

    Saludos.

    ResponderEliminar
  53. Admin, no lo sé, en teoría ninguno de los dos debe funcionar bien en la portada, pero como los plugins de Facebook siempre hacen lo que quieren se vuelve difícil saber porqué a algunos sí les funciona de esa forma y a otros no :/

    ResponderEliminar
  54. Realmente te agradezco tu tiempo y dedicación!
    Perdón mi ignorancia: no estoy muy seguro a que te referis con meta etiquetas keywords. Son las que coloqué en la plantilla como meta content?
    Muchas gracias de nuevo y SOS GROSO...SABELO.

    ResponderEliminar
  55. Así es, son esas que están debajo de 'Metatags de la página principal'
    ¡Saludos!

    ResponderEliminar
  56. Saludos Potro kiciera saber si se puede poner la barra de comentarios de facebook en cada entrada individual y si es asi y ya lo tienes dime donde se encuentra ya ke no lo e encontrado...
    Gracias

    ResponderEliminar
  57. Yo nunca lo he hecho, pero en Vagabundia tienen una entrada donde hablan sobre eso.
    Saludos.

    ResponderEliminar
  58. Me gustaria saber si hay algun gadget que sea para saber que personas del face vio tu blog es posible?

    ResponderEliminar
  59. Me temo que no existe algo parecido a ello.

    ResponderEliminar
  60. Hola, la verdad es que tenes un blog, excelente, tus post siempre son interesantes y me sirven pila. Felicitaciones por el blogy seguí publicando!!! saludos

    ResponderEliminar
  61. Gracias Alan, es un gusto saber que encuentras útil la información de este sitio. ¡Saludos!

    ResponderEliminar
  62. Hola Potro,tengo un problema,en uno de mis blogs,tengo que dar dos veces click sobre el boton me gusta para que recien lo marque,que puedo hacer?
    Este es el blog al que me refiero http://goo.gl/C8pP4

    ResponderEliminar
    Respuestas
    1. A mí me funciona bien JB, di click al botón de la entrada y lo marcó de inmediato.

      Eliminar
  63. buenas que tal una consulta quisiera hacer tengo mi blog con dominio .com puse una radio en el pero me sale solo en la primera entrada luego si le dan en entradas antiguas ya no sale el reproductor por sera este es mi blog www.yimidj.com
    mi msn yimidj2003@hotmail.com

    ResponderEliminar
  64. buenas que tal una consulta quisiera hacer tengo mi blog con dominio .com puse una radio en el pero me sale solo en la primera entrada luego si le dan en entradas antiguas ya no sale el reproductor por sera este es mi blog www.yimidj.com
    mi msn yimidj2003@hotmail.com

    ResponderEliminar
    Respuestas
    1. Es posible que toda esa área (la llamada slider-k) esté encerrada en una condicional, por eso sólo se muestra en la portada:
      http://ciudadblogger.com/2010/03/condicionales-de-blogger.html

      Eliminar
  65. Como andas el potro te consulto:
    tengo esto : utilice tu imagen de recomendacion de facebook que por cierto esta muy padre... ahi te mando mi consulta:
    Quiero que solo aparesca la imagen como un icono y siempre que subo imagenes me salta el cuadrado plateado te doy un ejemplo http://jugoseo-and-cosplay.blogspot.com.ar/2012/07/el-blog-formado-parte-de-la-red-socian.html

    Sabrias como sacarlo? desde ya muchas gracias

    ResponderEliminar
    Respuestas
    1. No he comprendido angel, ¿a cuál cuadrado plateado te refieres?

      Eliminar
  66. El link esta muerto potro, podrias resubirlo? Muchas Gracias

    ResponderEliminar
  67. Saludos Potro! Tnego un breve problema con mi blog. Creo que en algún movimiento desactivé la dirección, ahora tecleo en google el nombre del blog y me dice que la dirección ya no existe. ¿Qué debo hacer? auxilio

    ResponderEliminar
    Respuestas
    1. Hola Vautrin, quizás estás escribiendo mal la dirección. Entra a tu panel de Blogger, ahí verás tu lista de blogs, da click en Ver blo y lo abrirá, ahí podrás ver la dirección correcta.

      Eliminar
  68. Genial !!! Me he recorrido toda la web en 4 idiomas sin encontrar nada... hasta encontrar el código html mágico que nos has puesto !
    Oye... espero no abusar... pero si sabes como hacerlo, me puedes añadir a este mismo código como forzar el tamaño de la imagen y que el mouse over ponga "Facebook" ? Es que yo... no soy muy amigo del html...

    ResponderEliminar
    Respuestas
    1. Hola Sébastien, cambia esta parte del código:
      <img src="URL de la imagen" />

      Por esta:
      <img src="URL de la imagen" width="200px" alt="Facebook" />

      Donde dice 200px es el ancho de la imagen.
      Saludos.

      Eliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger