Ya vimos la forma de promocionar nuestro sitio web en Facebook agregando un panel para fans, de forma que los usuarios de nuestro sitio estén en contacto con nuestra página a través de Facebook.
Ahora le toca el turno al ya famoso botón de Me gusta, el cual nos permite difundir el contenido de nuestro sitio ya que los visitantes pueden marcar en el botón y compartir lo que han leído en Facebook. La lógica de este botoncito es que aparezca en cada una de las entradas de nuestro blog o en cada página de nuestro sitio web.
Si utilizas WordPress, basta con agregar el siguiente código en el archivo single.php de nuestro theme:
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=standard&show-faces=true&width=500&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:500px; height:60px"></iframe>
Como puede verse se trata de un pequeño iframe donde se muestra el botón. Lo más razonable es que el código se incluya al final del post y antes de los comentarios. Pueden verlo implementado aquí mismo al final del este artículo.
Si en cambio utilizas Blogger, en Vagabundia lo explican detalladamente y allí también podemos ver algunas opciones de personalización para el botón. También podemos ir a este enlace donde podemos jugar con las opciones y generar el código correspondiente.
El código es siempre el mismo a diferencia del link hacia la página, que es lo más importante:
<iframe src="http://www.facebook.com/plugins/like.php?href=[ACA VA EL LINK]&layout=standard&show-faces=true&width=500&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:500px; height:60px"></iframe>
De esta forma lo podemos incorporar en cualquier sitio web incluyendo el link correspondiente en el código.
26 Comentarios
Muy interesante. Gracias. Saludos
Te hago una pregunta, se puede añadir el botón me gusta a un newsletter que irá por mail por ejemplo?
@Natalia: que yo sepa no es posible, dado que se necesita de una dirección web para que funcione el botón. Si existe una forma, la desconozco.
Pese a que bloger incluye algo parecido en sus caracteristicas, lo añado. En la web resulta en principio ser un recurso de promoción web más que aceptable. Gracias por la sugerencia.
@Abel: es cierto, aunque en WordPress depende del theme que estemos usando. Es solo una opción ya que hay otras formas de agregar algo similar.
Hola! Muy bueno el tutorial. Ahora te pregunto: se puede agregar a un sitio hecho con frontpage? en caso de que se pueda, hay que colocar la url de cada pagina? osea si lo coloco en articulos internos tengo que colocar la url del articulo?
muchas Gracias!
@Maiano: es posible, el código es el mismo para donde quieras colocarlo. Tendrías que hacerlo en cada una de las páginas del sitio. En WordPress eso no es necesario porque existen variables que nos facilitan esa parte. Cualquier inconveniente me avisas.
hola como estas.
Mira, silo los pasos al pie de la letra y utiliso el codigo para hacer un widget nuevo pero cuando veo mi pagina, solo aparece el ling pero no la imagen de facebook. que puedo hacer?
Gracias Nico, es asi como me temia, osea colocar url por url, me voy a volver loco! pero bueno quiero hacerlo.
Muchas Gracias por la ayuda.
Excelente el blog!
Sos un genio :)
Hola, una pregunta, cuando pongo me gusta, pone el titulo de la pagina no es asi? osea: le gusta “Documento sin titulo”
SAabes de alguna forma de cambiar el titulo por pho?
Yo tengo una página en BLIGOO y eso si qee es recomplicado…No sé como hacerlo!
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!!
Quizas no se note de un día para otro un incremento de visitas, ni este llegue a ser tan significativo como el tráfico desde Google. Aunque lo más importante es “estar” de alguna manera en las redes sociales, ya que por ejemplo, muchos usuarios comentan los posts en Facebook y no en el blog. Gran parte de la interacción se ha volcado a Facebook, Twitter, etc, y es donde podemos dar a conocer el sitio.
Muy buenas!!
He podido colocar el código en mi blog y ya tengo el botón de Me Gusta funcionando y bien situado. El código que estoy utilizando es el siguiente:
El problema es que, cuando le doy al botón, en el tablón de Facebook se me publica el título de la entrada en cuestión, pero en vez de salir abajo de éste el texto que pertenezca a tal, me sale ésto:
summary_noimg = 550; summary_img = 450; img_thumb_height = 125; img_thumb_width = 125; //=1) { imgtag = ”; summ = summary_img; } var summary = imgtag + ” + removeHtmlTag(div.innerHTML,summ) + ‘
Sabrías qué es lo que he hecho mal y qué habría que cambiar para que en vez de salir eso en Facebook salga el texto de la entrada en cuestión donde está el botón de Me Gusta?
Gracias de antemano, enhorabuena por tu blog, y un saludo!! ;)
Yippee: te refieres a que te aparece ese texto al compartir el post en Facebook? Si sigues con el problema, enviame el link donde te pasa esto, y lo reviso.
Sí, eso mismo. Es decir, yo tengo el botón de Me Gusta situado en mi blog, para que salga en cada entrada, y cuando se pincha sobre él, en el tablón de Facebook sale el título de la entrada que es, pero luego bajo él, en vez de salirme el texto en cuestión me sale eso:
summary_noimg = 550; summary_img = 450; img_thumb_height = 125; img_thumb_width = 125; //=1) { imgtag = ”; summ = summary_img; } var summary = imgtag + ” + removeHtmlTag(div.innerHTML,summ) + ‘
Si pinchas en mi nick te redirecciona al blog por si lo quieres mirar tú para que veas exáctamente a lo que me refiero cuando le das al botón Me Gusta.
Mil gracias por el interés! ;) A ver si finalmente se puede arreglar el fallo :P
PD: Aquí abajo te pego el código del botón, que me he dado cuenta que en el anterior comentario no lo había pegado:
Estaba viendo el problema, y es porque si revisas el código de tu blog, luego del código del Me gusta, tienes un script Javascript, que incluye ese texto que dices. Ese script se encarga de crear el texto de la entrada, y es algo que no se puede cambiar ya que así es como funciona la plantilla que utilizas.
Para que en Facebook se vea bien el artículo, te recomiendo que leas este artículo donde se explica como optimizar los posts para Facebook:
http://vagabundia.blogspot.com/2011/07/optimizar-las-etiquetas-meta-para.html
Cierto, me he dado cuenta del Javascript que hay debajo. Le he estado echando un vistazo al link que me has puesto y a ver si consigo enterarme/conseguir algo xD.
Muchas gracias por la ayuda y un saludo! ;)
Me acabo de dar cuenta que no sólo se publican las entradas mal en el Facebook al pinchar sobre el botón Me Gusta, sino que también sale el mismo código Javascript en el tablón de Facebook cuando simplemente copio y pego el enlace allí. ¿Hay alguna manera, simplemente, de hacer que salga un texto concreto y predefinido siempre en todas las publicaciones del blog en el muro de Facebook?
Si. Si te has fijado en el artículo que te mencioné, verás que aparece este código:
El meta og:description se utiliza para poner un contenido descriptivo del sitio, para que aparezca en Facebook al compartir un post. De esa manera no aparecerá el texto del script.
Sí, lo he estado viendo, lo que pasa que no sé muy bien dónde colocar el código exactamente dentro de la plantilla. :S
El código lo tienes que agregar entre las etiquetas HEAD y /HEAD, casi al principio de la plantilla.
Pf, qué va. He probado ya todo lo del enlace que me has pasado, paso a paso y de todas las maneras que se me ocurren pero me sigue pasando lo mismo. Debo suponer que es mi plantilla en concreto que no permitirá hacerlo. En fin, muchas gracias de todas formas y un saludo!
Es posible que sea la plantilla. Para sacarte la dudas, lo puedes probar en un blog de pruebas. Ahora, muchas plantillas generan el contenido desde código javascript, y eso complica las cosas.
Saludos
hola tengo un problema, al clikear en el boton me gusta de mi pagina debería aparecer en mi perfil de facebook o en el perfil de la persona que le de clic pero no aparece nada =S espero puedan ayudarme gracias :)
1 referencia