Si algo a hecho de Facebook la Red de redes ha sido el botón “me gusta”. Gracias a este botón todos nosotros podemos conseguir que nuestros contenidos lleguen a ser virales y se propaguen por toda la Red. En este post te voy a explicar como hacer botones “me gusta” personalizados para que les saques el máximo provecho en tu blog o página web.
1. Primero de todo sigue el enlace para ir a la página de Facebook de configuración del botón me gusta.
2. Ahora simplemente has de seguir las instrucciones y rellenar los campos que te indican para personalizar el botón a tu gusto. Los cambios que vas introduciendo se muestran en tiempo real a mano derecha de la imagen.
3. Clica en el botón de Get Code, copia el código que te da Facebook y pégalo en cualquier lugar de tus posts en el blog. ¿Qué te parecería intercalar a mitad de post el botón de “me gusta”?
Por ejemplo aquí mismo: Dale un “me gusta” al post si te gusta lo que estás leyendo. Gracias!
Campos a editar para personalizar el botón “Me Gusta” de Facebook a tu gusto
URL to like: coloca aquí la URL de la página que recibirá los “me gusta” tras cada clic en el botón. Puedes poner incluso la URL de tu página de Facebook para que sea esta la que recibe los “me gusta”.
Send Button: Este botón permite que quien lo clique mande tu contenido fácilmente a cualquiera de sus contactos en Facebook via mensaje.
Layout Style: Existen tres estilos de botón a escoger (standard – button count – box count).
Width: Ancho del botón.
Show Faces: Muestra imágenes de perfiles debajo del botón.
Verb to display: ¿Quieres que el botón ponga Like o Recommend? Puedes ponerlo en español editando manualmente el código del botón que te da Facebook.
Si usas la versión XFBML sólo tienes que reemplazar de la línea de código que te muestro abajo el en_US por es_ES.
‘//connect.facebook.net/en_US/all.js’;
Si usas la versión Iframe tendrás que hacer lo mismo pero en la src URL.
src=”http://www.facebook.com/plugins/like.php?locale=es_ES&…”
Es posible que tengas que ajustar el ancho del botón para acomodarlo al cambio de idioma (aunque en español con 450 de ancho se ve bien, como puedes comprobar en el botón de más arriba).
Color Scheme: Elige si quieres el botón con el típico color azul claro de los botones de Facebook o con un tono gris. Sin duda la primera opción es la mejor.
Font: cambia, si quieres (yo no lo haría), el tipo de letra usado para el botón.
Clica en Get Code, copia el código, ajusta lo que tengas que ajustar (como el idioma del botón) y pégalo a donde quieras de tu blog.
Sencillo ¿verdad? Las posibilidades de uso de estos botones “me gusta” de Facebook personalizados para que tus contenidos se propaguen con mayor viralidad son enormes. Prúebalo en tu blog y ya me contarás.
¿Te ha gustado esta entrada? Compártela con tus seguidores o amigos en Twitter y Facebook clicando cualquiera de los botones que tienes abajo. Gracias!
Información Bitacoras.com…
Valora en Bitacoras.com: Si algo a hecho de Facebook la Red de redes ha sido el botón “me gusta”. Gracias a este botón todos nosotros podemos conseguir que nuestros contenidos lleguen a ser virales y se propaguen por toda la Red. En este post t……
[…] Lee el artículo completo MeneameDivúlgameDivobloggerBitacorasRedditDeliciousGoogle BuzzFacebookTwitter Esta entrada fue publicada en Facebook, Social Media. Guarda el enlace permanente. ← Curiosidades florales: Iris de Van Gogh […]
Hola David, si, muy bueno disponer de herramientas para llegar a mas personas. Antes se decía que la gran mayoría de profesionales se sienten mas cómodos con herramientas de hace 10 años, pero ahora las herramientas cambian en menos de un año…. En Lima estamos en otoño, clima frío, pero hoy día el sol esta radiante, buen día.
Nos vemos empujados por el cambio. Ya se bien la ropa con botón me gusta. ¿Quieres cavar aun mas profundo?
Cómo cambio el color de la letra, mi background es negro y pues a penas se lee el texto de facebok. Alguna idea?
Lo que yo intento saber es si se puede modificar el texto “me gusta” por cualquier otro.
¿Es posible?
No que yo sepa. Estamos hablando del botón oficial de Facebook.
Saludos,
Que tal sabrías explicarme como puedo poner el boton me gusta estilo plugin like a una foto, no a una fanpage ni a un sitio fuera de facebook si no a una foto mia, para que mis amigos le puedan dar “me gusta” mas rápido y carge la pagina más rápido.
que tal amigo. Mira no se si se pueda pero si se puede me podrías decir como ¿?— mira lo que sucede es que yo quiero hacer el boton me gusta para las APLICACIONES de facebook o como dice Fabián… para las fotografías.. que carguen más rápido para poner me gusta. Yo no te voy a mentir yo soy una caza fortunas y lo ocupo para promociones de facebook… Muchas gracias de antemano. ojalá y me contestes… Gracias amigo}
Muchas gracias por la explicación. Aprovecho para preguntar si suele notarse de forma clara algun aumento de visitas por el hecho de tener el botón. Un saludo!!
hola . accidentalmente se borró el numero de ” me gusta” en mi página. Hay alguna forma de recuperarlo?
Gracias!
hola amigo quisiera saber como colocar varios botones de me gusta como lo he visto en varias paginas por ejem ponen dale a todos los me gusta y salvas al gatito eso es un truco para invitar mas personas cuales son los codigos para hacerlo??
Hola y gracias por tu página, tengo una gran duda con los botones like:
Tengo dos botones like que quisiera que se sumaran en el conteo, uno es el like de la landing page tal y como aparece después de seguir tu tutorial de como hacer una landing page, el otro lo cree para mi sitio web (relacionado a la misma fan page), ¿hay forma de que si le das click al like de la fan page aparezca en mi sitio web y viceversa?
Gracias de antemano.
hola, un favor, disculpa la ignorancia pero cuando dices “pégalo en tu blog”, a que página u opción te refieres?? en estado?? gracias por tu tiempo.
Hola,
Copia el código (ctrl+c) y pégalo (ctrl+v). Por ejemplo, si quieres que aparezca el botón en un post vas a la pestaña html de ese post y lo pegas donde tú prefieras.
También lo puedes pegar en un Widget para que aparezca en la sidebar y en definitiva en cualquier parte del blog.
Saludos,
Hola tengo una cvonsulta porque generé el código y lo pegue en el codogi de dreanweaver para mandar un mail, y no me lo toma. lo pego despues del body y al final pego el segundo códogo dentro de una tabla donde quiero que se vea, por qué puede ser que no lo toma?? gracias
Hola que tal?, muy buen tutorial!!
Aunque con mi boton “I like” pasa algo curioso, le puse el contador y lo coloque en una pagina que hice, pero por default el contador siempre aparece en cero, solo cuando me logueo se ve un “I like”, el mio!, por que pasará esto??
Abrí otra cuenta de fb y volví hacer clic en “I like”, y pasa lo mismo, el contador aparece en cero y cuando me logueo aparece un uno. cuando ya debería tener un dos.
Ojala puedan echarme la mano, gracias!
[…] Cómo Hacer Botones “Me Gusta” de Facebook Personalizados: http://davidcantone.com/botones-facebook-personalizados/ […]
gràcias David, me han servido de mucho tus explicaciones, però a ver si me puedes ajudar.
Me gustaria poner el botón de “me gusta” en otro idioma, he visto en otras paginas que es en “locate”, però en que parte del codigo tengo que podenlo, lo quiero en Catalàn y ya seria la bomba si cuando canvio de idioma el blog tambien me canviara el botón, no se si esto es possible.
El blog lo cree el blogsport.
Para ponerlo en Espanol:
Reemplaza en el codigo, en_US por… es_ES
Buen blog!! Si cambio el botón podrá ser visto desde cualquier navegador? A veces Chrome es un poco diferente. Gracias!
Hola Que tal, sucede que estoy colocando el boton me gusta para productos justo en la pantalla de descripcion del mismo, en ella tengo varias imagenes(productos recomendados) y cuando le doy a me gusta aparece en mi perfil cualquiera de las imagenes que hay en la pagina que no necesariamente es la imagen del producto principal (que es la que quiero) Alguien sabe como editar la publicación y que agarre el url de la imagen??
Hola David:
no he podido colocar el boton like personalizado en mi blog. ¿tendre que configurar Java? Saludos!
Buen post!
Sabes cómo pasar el botón a español en HTML5?
Bueno esto viene en la parte de desarrolladores pero los botones realmente no son custom son un default theme de facebook creo que el verdadero nombre de este post deberia de ser como agregar un boton like a tu website
Hola, y felicitaciones por tu tuto. Me ayudó un montón.
Pero tengo un problema-duda.
En la configuracion del gadget, aunque no lo tengo marcada la opcion de los bordes, me salen en el boton un borde superior y otro al lado izquierdo como “relive”.
Y el fondo del boton en blanco, discordiando con el fonto de mi contenido que es mas oscuro.
¿que puedo hacer?.
Gracias.
Muchas gracias me sirvio de mucho ya se lo puse a mi pagina 😀
Como puedo hacer para que el Like no diga la pagina (URL) sino que diga otra oración como por ejemplo “la película del agente 007”. Cual es el atributo que debería modificar? Gracias
esta personalizado a medias, falta poder cambiar el css.
Alguna muestra de como queda? quisiera un demo
Hola, intento encontrar la manera de poner una imagen en el ícono que aparece en fb cuando le das like a una pág y te da la opción de postear en tu perfil información del sitio al que haz dado like y cuando aparece en el perfil es un recuadro con la información y una imagen, esta imagen es a la que me refiero. Espero puedan ayudarme!!! help!
Hola, David me puedes ayudar a crear botones de compartir en twitter y facebook de forma como youtube botones personalizados. por que asi mi pagina cargara mas rapido no asiendo petciones a facebook y twitter. gracias
gracias por compartir, se lo puse ami sitio.
Hola David, querría saber si este procedimiento sirve para pegar el boton de like en mails, o en documentos word.
O es solamente para páginas web y blogs?
gracias
Hola, Quisiera saber si puedes ayudarme con mi boton de me gusta, lo que sucede es que el boton solo es visible cuando estoy con la cuenta de facebook iniciada, pero si me desconecto de facebook el boton de me gusta desaparece de mi web, como puedo hacer que sea visible permanentemente??
De ante mano gracias
Buenos días;
He estado buscando el código para poder modificarlo con el qye te da facebook, pero no encuentro el directorio en mi servidor.
Es para ponerlo en una tienda Online Prestashop (web, no blog)
Edité mi botón existente del inglés al español con la tecla F12, pero no me guarda el cambio realizado al actualizar con F5.
¿Alguien me puede orientar??
-¿Dónde encuentro el archivo para modificar el código?
-¿Puede editarse con la tecla F12 y conservar el cambio?
Gracias
Quiero tener visible el botón