Cómo poner el botón de "Me gusta" en tu blog, paso a paso (versión iframe)
Terminé no agregando el código del botón, ya que pensé que en la página de facebook se puede conseguir fácilmente, pero, parece que hay problemas y a veces no arroja el código. A mi también me pasó y lo solucioné cambiando de navegador. Pensé que era temporal, pero el problema sigue.
No me queda claro si realmente es necesario registrarse como desarrollador para obtener el código, ya que con un navegador a veces funciona, y aveces no, sin estar registrado como tal. Si tú lo sabes, por favor dímelo, es bueno saberlo.
Sea como sea, hoy te voy a decir cómo ponerlo en tu blog. Es muy fácil, ya lo verás; voy a poner aquí el código, y voy a usar la versión de iframe.
Estos son los tres estilos o diseños disponibles para el botón "Me gusta":
Cómo poner el botón
Lo puedes poner para que aparezca en cada entrada, o en una columna de tu blog, (por ejemplo). Si lo usas en cada entrada, se compartirá el enlace de la entrada en facebook, con la imagen miniatura, y una descripción corta del artículo, y del otro modo se enviará el enlace de tu blog.
Opción 1: Poner el botón en la columna lateral de tu blog para que se comparta el blog
Paso 1: Copia el código del botón que quieres mostrar, todos los valores que se pueden cambiar, están marcados con rojo, para que se identifiquen, y ya están listos para usarse, solo cambia donde dice: compartidisimo, por el nombre de la URL de tu blog.
Estilo: standard (con foto del perfil de los amigos)
<iframe src="http://www.facebook.com/plugins/like.php?locale=es_ES&href=http%3A%2F%2Fcompartidisimo.blogspot.com&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&font=verdana&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
Estilo: button_count
<iframe src="http://www.facebook.com/plugins/like.php?locale=es_ES&href=http%3A%2F%2Fcompartidisimo.blogspot.com&send=false&layout=button_count &width=110&show_faces=false&action=like&colorscheme=light&font=verdana&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowtransparency="true"></iframe>
Estilo: box_count
<iframe src="http://www.facebook.com/plugins/like.php?locale=es_ES&href=http%3A%2F%2Fcompartidisimo.blogspot.com&send=false&layout=box_count &width=85&show_faces=false&action=like&colorscheme=light&font=verdana&height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:85px; height:65px;" allowtransparency="true"></iframe>
Nota: Lo puse en español, y el texto del botón siempre se verá como: "Me gusta" , pero si cambias es_ES por en_EN, se detectará el idioma automáticamente para cada usuario que lo vea, según su idioma, no en Internet Explorer. Todos los códigos están listos para mostrar el botón de color claro. El código es el mismo que facilita facebook en su página...
Paso 2: Ve a diseño ► Elementos de la página, y pega el código editado, en la columna lateral que quieras, eligiendo la opción HTML/Javascript.
Paso 3: Guarda los cambios y listo.
Opción 2. Poner el botón en cada entrada
Paso 1: Copia el código del botón. Usaré el estilo standard, si quieres otro estilo, edita la parte marcado con rojo, según el estilo del botón que quieras, también usaremos código condicional para que se muestre al ingresar a la página de cada entrada.
Estilo standard:
<b:if cond='data:blog.pageType == "item"'><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url+ "&layout=standard&show_faces=true&width=450&height=80&action=like&font=verdana&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:80px'/></b:if>
Paso 2: Ve a Editar HTML, haz click dentro del recuadro del código, y busca con la ayuda de Crtl F, esta linea:
<p class='post-footer-line post-footer-line-3'>
o a veces viene así...
<div class='post-footer-line post-footer-line-3'>
Paso 3: Inmediatamente después, pega el código del botón.
Paso 4: Verifica en vista previa y si todo luce bien, guarda los cambios.
Atributos (cosas que puedo cambiar)
- href: La URL que vas a compartir.
- send: Especifica si se agregará o no el botón de Enviar, junto con el de Me gusta. Valores:
- false para no.
- true para si.
- standard, que muestra el botón con texto al lado derecho y las fotos del perfil de los amigos debajo, el mínimo de ancho requerido es de 225 pixeles, y por defecto el ancho es de 450 pixeles. La altura cuando seleccionas que si (true) se van a mostrar las fotos del perfil de los amigos, es de 80 pixeles y sin fotos 35 pixeles.
- button_count, muestra las veces en que se pincho "Me gusta" al lado derecho del botón, el mínimo de ancho es de 90 pixeles, y por defecto es de 90 pixeles de ancho. La altura es de 20 pixeles.
- box_count, muestra el número de veces que se hizo "Me gusta" arriba del botón, el ancho mínimo es de 55 pixeles, y por defecto es de 55 pixeles de ancho por 65 pixeles de alto, si lo usan en español, necesita ser más ancho, como 80 pixeles de ancho.
- false para no.
- true para si.
action: el texto que se mostrará en el botón, puede ser:
- like que en español dirá: "Me gusta"
- recommend, que en español dirá: "Recomendar"
- arial
- lucida grande
- segoe ui
- tahoma
- trebuchet ms
- verdana
- light (el claro)
- dark (el obscuro)
Nota: Si tienes algún problema con el código del botón que facilito, te recomiendo ir directamente a la página de facebook a obtener el código ya que puede haber actualizaciones y no funcionar:Página de facebook para obtener el botón.Entradas Relacionadas:
También puede ver esta página de Vagabundia, donde habla de esto.
Etiquetas:Facebook