Botón me gusta de facebook

Un cordial saludo, eh implementado el botón me gusta de facebook en mi web siguiendo algunas recomendaciones de este sitio:

http://developers.facebook.com/docs/reference/plugins/like

Y bueno funciona bien pero, este botón también permite compartir y es en este punto donde tengo un gran problema y es que quiero poder poner la imagen que yo quiera y no la que facebook escoja, ¿cómo lo hago?

Me gustaría primero saber como aplicarlo en una página sencilla html, para así poder replicarlo en una página dinámica php.

A continuación dejo una página de juegos en los que el botón like de facebook funciona a las mil maravillas y deja compartir las imágenes personalizadas de cada juego:

http://www.miniclip.com/games/bow-master/es/

Mil gracias por su colaboración.

Echale un vistazo a este ejemplo, te dice que parámetros debes personalizar.

http://developer.practicalecommerce.com/articles/1857-Two-Easy-Ways-to-Add-the-Facebook-Like-Button-to-Product-Detail-Pages

Muchas gracias por la información, he tratado por todas partes y la verdad no he podido lograr que al compartir con el botón me gusta de facebook el busque la miniatura que yo quiero, si me pueden ayudar se los agradezco

En este ejemplo apliqué todo lo que vi en la página que me recomendaste y no consigo hacer nada, incluso el botón de like no comparte, será que me falta algo o qué hice mal?, estas son las url de las páginas en las que estoy haciendo las pruebas:


Este ejemplo está como dije anteriormente tal cual como el ejemplo que me enviaste:
http://www.piensaenmi.com.co/pruebas/megusta.html


En este otro ejemplo eh venido trabajando, funciona perfectamente, está en español, comparte maravillosamente, pero siempre pone una imagen de un botón de mi página web, a mi me gustaría poner la imagen que yo quiero:

http://www.piensaenmi.com.co/pruebas/megusta1.html

la verdad no sé en que estoy fallando, no sé que me hace falta, me gustaría que me ayudaran por favor, mil gracias.

Hola amigo, veras tengo experiencia trabajando con aplicaciones de facebook, incluso e desarrollado un framework en php/ajax para desarrollar diferentes apliaciones de facebook, por lo que tengo algo claro en lo que a aplicaciones de facebook se refiere.

La situacion es que no me queda muy claro cual es tu problema.

Por una parte parece que quieres un boton con diseño propio, pero por otra parte mensionas algo sobre las imagenes en miniatura, que probablemente te refieres a las fotitos de las personas que han presionado en "Me Gusta".

Ingrese a la pagina de juegos que pusiste y no veo ningun boton de facebook de "Me gusta" personalizado, hay uno que dice "Follow Us" pero ese no es un boton de "Me gusta", es un link comun y corriente que te envia al profile de "Miniclip". El otro boton de me gusta (el verdadero), es el social plugin de facebook y no tiene ningun tipo de personalizacion.

Pero bueno, intentare abarcar todo eso en mi respuesta.

Las malas noticias son que:

1.- No puedes cambiar el diseño del Social Plug in (Me Gusta), salvo por los prediseños que ellos te otorgan ademas del idioma.

2.- No puedes seleccionar cuales fotitos deben aparecer cuando alguien da en (Me Gusta).

Si te olvidas del Social Plug in de Facebook, Las buenas noticias son que:

1.- Puedes crear tu propio botón con el diseño que tu quieras.

2.- Puedes hacer que el boton haga lo que quieras despues de que alguien de en "Me Gusta".

Y para esto deberás entrar al sitio http://www.facebook.com/developers, debes dar aceptar la aplicacion de "Desarrolladores", posteriormente deberás leer la informacion referente al GRAPH API de Facebook, y entonces puedes crear el boton con lo que tu quieres hacer.

El problema con esto, es que el botón que tu puedes crear tiene una gran limitante, y esto es que ese boton solo te sirve para los "Feeds" que hay dentro de los muros de un "Usuario", "Pagina dentro Facebook" o "Evento".

Si quieres que la gente pueda seleccionar que le gusta el contenido dentro de tu propia pagina, por fuerza tienes que usar el Social Plug in de Facebook y por ende, tendrás que vivir con el hecho de no poder modificarlo y/o personalizarlo tal y como tu lo deseas.

Espero haber sido claro al respecto.

Saludps

Un cordial saludo y gracias por tu respuesta, pero creo que no me hice entender bien, el like button de social plugin de facebook me funciona a las mil maravillas, el me muestra las caras de las personas a las cuales les gusta mi sitio pero... este botón a la hora de darle me gusta tiene la opción de escribir un comentario para compartir en los muros de quienes copian algo, y automáticamente facebook escoge alguna imagen para compartir junto con el comentario, facebook escoge cualquiera o da la opción de escoger varias imágenes que estén en la página, en mi caso escoge siempre un botón que tengo como imagen y no he podido hacer que escoja algo diferente, ya he intentado de todo y nada, lo que yo quiero es poder poner la imagen que yo quiera al compartir, en el caso de la página de juegos el no muestra las caras pero si te fijas debajo de cada juego hay un like button en este caso:

http://www.miniclip.com/games/age-of-speed-2/es/

justo al lado de la descripción que dice "Controla los circuitos del futuro mientras dominas las vueltas, enormes saltos, y rizas el rizo en espirales y zig zags", si tu le das clic en ese botón el aparte de poner en tu muro que te gusta, te permite la opción de compartir un mensaje, si tu te fijas en tu muro después de compartir, aparece exactamente la imagen de ese juego, y así con cualquier juego que tu veas en esta página, lo último que intenté fue poner los metatags de facebook y sigue apareciendo la misma imagen del botón que no quiero que aparezca.

<link rel="image_src" href="laimagenquequiero.jpg" />
<meta property="og:title" content="El Titulo que quiero" />
<meta property="fb:app_id" content="El id de mi facebook" />
<meta property="og:site_name" content="El nombre de mi sitio"/>
<meta property="og:url" content="La URL de la página"/>
<meta property="og:image"De nuevo laimagenquequiero.jpg" />
<meta property="og:description" content="Y una descripción" />

Pero sin embargo aún nada, no funciona, sigue apareciendo el mismo botón y no hay nada que haga que cambie esa imagen al compartir, e incluso cambié los botones de ubicación y lo sigue tomando como imagen para compartir.

Mil gracias por tu colaboración.

Ok, me queda claro

Tu problema es muy sencillo

Si mis calculos son correctos tu problema es que haz pasado por alto usar el protocolo Open Graph de facebook.

WHAT


Bueno, lo unico que pasa es que el tag HTML de tu archivo .html lo tienes como:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
..................ETC.......................

Bueno esto esta mal, con (xmlns="http://www.w3.org/1999/xhtml") no puedes usar tags como (<meta property="og:tag name" content="tag value"/>)

Tienes que tener las librerias adecuadas para poder utilizar ese tipo de propiedades.

Para solucionar tu problema lo unico que tienes que hacer es cambiar el codigo que pegue arriba, por:

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>

Asi estas llamando las librerias adecuadas para que tus tags html puedan funcionar correctamente, tanto los fb(facebook) como los og(open graph) deben funcionar correctamente

Saludos

One escribió:

Por cierto este tutorial esta mal!!!!!


Tachita para el que lo hizo



FYI

Hola gracias por tu tiempo, ese tutorial ya lo había mirado e incluso hay un ejemplo que no funciona, mira en este link implementé lo que tu me dijiste, puedes copiar el código de la miniatura del código fuente, la imagen no me da, este es uno de nuestros productos, pero sin embargo cuando tu le das compartir el pone la imagen del botón de contacto de nuestra página y no la miniatura, en serio que he tratado por todas partes y nada:

http://www.piensaenmi.com.co/pruebas/megustaPrueba.html

Gracias de nuevo.

Tienes dos veces la etiqueta head no se si eso te este haciendo una falla checalo

Mira amigo

Hice este codigo rapidamenet y me funciona perfectamente, no puedo hacer pruebas con tu aplicacion ya que en tu APP_ID debes tener configurado el SITE con tu dominio, por lo que no puedo hacer pruebas desde mi dominio, no funcionaria.

Pero puedes checar aquí y verás que esta funcionando correctamente.

Click Aquí

CODE:

Código HTML :

<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:og="http://opengraphprotocol.org/schema/" 
      xmlns:fb="http://www.facebook.com/2008/fbml"> 
  <head> 
    <title>The Hello World Returns (2050)</title> 
    <link rel="image_src" href="http://www.piensaenmi.com.co/images/detalles/combCorazonDeRosas/combCorazonDeRosas_fb.jpg"/>
    <meta property="fb:app_id" content="-----TU APP ID----"/> 
    <meta property="og:title" content="The Hello World Returns (2050)"/> 
    <meta property="og:type" content="movie"/> 
    <meta property="og:url" content="-----TU  URL---"/> 
    <meta property="og:site_name" content="HWR"/> 
    <meta property="og:image" content="http://www.piensaenmi.com.co/images/detalles/combCorazonDeRosas/combCorazonDeRosas_fb.jpg"/> 
    <meta property="og:description" content="Esta es una descripción."/> 
</head>
<body>
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: '-----TU APP ID----', status: true, cookie: true,xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol + '//connect.facebook.net/es_MX/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>
<fb:like href="-----TU URL----" show_faces="true"  layout="button_count"  width="100"></fb:like>
</body>
</html>

PD. No olvides poner tu og:type (pon: food), Facebook te pide obligatoriamente las 6 propiedades y tu solo estas poniendo 5.

Saludos

No hermano, me ceñí a todo lo que tu me dijiste y nada facebook se enamoró de mi botón de contacto, nada que cambia la imagen, mira por favor si me quedó faltando algo:

http://www.piensaenmi.com.co/pruebas/megustaPrueba2.html

Gracias.

Pues veo que tienes este meta mal nuevamente

<meta property="og:piensa_en_mí" content="HWR"/>

Otra cosa si, es que facebook deja como en un tipo de cache tu APP una vez que este la verifica.

Te recomiendo corregir ese error e intentar con otro producto, con otro URL y con otro titulo.

A mi lo que me pasa es que cuando facebook verifica mi app en cierta URL aunque cambie valores me sigue apareciendo lo mismo, lo que hago es que cambio el nombre al archivo.

Veo que eso ya lo hiciste, solo intenta cambiar los valores, como un nuevo producto, tambien verifica que el SITE que tienes configurado en tu app en facebook.com/developers corresponda a donde estas ejecutando tu archivo.

Saludos

Ayer me hacía una pregunta con esa etiqueta:

lo primero que me pregunte es que es "HWR"

Y lo segundo es que no supe que poner en <meta property="og:?????????" content="HWR"/>

Pensé que era el nombré de la página, pero como que no, espero que me puedas orientar con esta meta de facebook y porfin dar por terminado y aprendido este tema.

<meta property="og:site_name" content="Piensa en mi"/>

A las propiedades tu no les debes de mover, solo al contenido

Saludos

No hermano, le cambié de producto, le cambié de foto, le arreglé lo que me dijiste y nada, te cuento que cuando esto funcione hago fiesta y tocará invitarte a Colombia jajaja, facebook sigue enamorado de mi botón de contacto.

http://www.piensaenmi.com.co/pruebas/megustaPrueba2.html

Hola

Si mira, ya casi esta todo bien programado, estube haciendo pruebas.y estube generando algunos errores a proposito para ver que te puede estar sucediendo y ahi te van mis resultados

1.- Cada vez que ejecutas el boton, Facebook guarda el URL que pusiste en tu config en cache con la información que metiste.

2.- Si yo ejecuto el boton desde otro URL distinto y no configuro correctamente el SITE dentro de facebook.com/developers en la configuración de mi applicación, Facebook manda llamar la información que primero guardo en cache. Para que se actualize la información debo tener actualizada la configuración de mi app en facebook.com/developers

3.- Si no ejecutas el botón en el url Configurado tanto en facebook como en el codigo, Facebook envia la información que tiene guardada en cache.

Por ejemplo tu estas ejecutando tu boton en el url :

http://www.piensaenmi.com.co/pruebas/megustaPrueba2.html

Pero tu no estas escribiendo ese URL en tu codigo, en tu codigo tu estas escribiendo el URL:

http://www.piensaenmi.com.co/pedido.php?id=33&gal=1

Te das cuenta? la información no corresponde y Facebook envia la información que tiene en cache. Si te fijas en el codigo de la ultima prueba que hiciste, la descripcion la tienes como:

Código HTML :

<meta property="og:description" content="Esta es una descripción."/>  

En teoria en el muro te deberia aparecer en la descripción: Esta es una descripción, pero no. Ati te aparece: Realiza aquí tus pedidos.

Que quiere decir esto, que facebook esta mandando llamar el cache por que no hay congruencia en la configuración y en lo que en realidad es.

Si quieres que ya te funcione, deberás entrar a facebook.com/developers, le das en configurar aplicación, y luego cambias el SITE

le pones en los 2 campos que te pide:

http://www.piensaenmi.com.co/pruebas/

con dominio

piensaenmi.com.co

despues cambias el nombre del archivo donde estas haciendo tu prueba por uno que nunca hayas puesto. Quiza puede ser:

http://www.piensaenmi.com.co/pruebas/megustaPrueba3.html

despues en el codigo de tu archivo deberas poner el URL correcto, ya no pongas:

Código HTML :

<meta property="og:url" content="http://www.piensaenmi.com.co/pedido.php?id=33&gal=1"/>  
<fb:like href="http://www.piensaenmi.com.co/pedido.php?id=1&gal=1" show_faces="true"  layout="button_count"  width="100"></fb:like>  

Pon el url del archivo en el cual estas haciendo las pruebas

Código HTML :

<meta property="og:url" content="http://www.piensaenmi.com.co/pruebas/megustaPrueba3.html"/>  
<fb:like href="http://www.piensaenmi.com.co/pruebas/megustaPrueba3.html" show_faces="true"  layout="button_count"  width="100"></fb:like>  

En cuanto Facebook encuentre congruencia en lo que estas haciendo, va a respetar los valores que estas poniendo.

Saludos!

Hola amigo como estás, bueno te cuento que me está sacando un error ensayé con fb:like y con el iframe y me funcionan a medias, hice todo lo que tu me aconsejaste o eso creo, incluso cambié los archivos de la carpeta de pruebas a la raíz y les cambié los nombres:

http://www.piensaenmi.com.co/megustaPrueba3.html

http://www.piensaenmi.com.co/megustaPrueba4.html

Qué podrá ser, porque creo que ahí están todas tus indicaciones, mil gracias hombre.

Si ese error de que, como que lo presionas y se regresa solo el botán me a pasado por que el app esta mal configurado en www.facebook.com/developers

verifica que el site que estas poniendo este correcto, el resto del codigo se ve bien, y si te fijas cuando le das en Like, cuando te pide escribir un comentario, antes que se quite por el error ese.

Ya no te aparece todo lo que salia antes :: Piensa en mi no se que... hehe

eso es bueno, ya solo necesitas checar bien que tu APP ID este correcta y que el SITE este bien configurado en la pagina de configuracion de facebook

saludos

Caballero ya ahora si me dio, habían muchas cosas que había obviado, pero que vos me ayudaste a ver, mil gracias por tu colaboración me ha sido de gran utilidad, ya ahora intentaré aplicarlo en mi sitio de la manera que siempre había querido y no con las limitantes que hasta ahora ha tenido, gracias de nuevo, este es el ejemplo funcionando a la perfección:

http://www.piensaenmi.com.co/megustaPrueba5.html

Excelente

Cualquier duda con facebook ya sabe

Saludos

Gracias hermano, ya sigo con php para integrarlo con las páginas dinámicas, y te cuento como me fué, pero de verdad que muy útil tu orientación.

Hola, yo otra vez, se me ocurre una inquietud, mi página tiene un like buttom para el sitio en general que he puesto en una plantilla y que aparece en todas las páginas, pero cuando las personas ven algún producto debajo del producto aparece otro like buttom solo para ese producto en especial, la pregunta es cómo manejo los meta property de facebook para cada uno por separado?

para que te hagas a una idea de como funciona el sitio mira esta página:

http://www.piensaenmi.com.co/pedido.php?id=41&gal=4.

Gracias.

Sabes que sinceramente no utilizo ningun social plugin de facebook, por lo que no lo e intentado de esa forma.

Yo en las aplicaciones que e hecho, si tengo eso que dices (mas de 1 like) pero no uso el social plugin de facebook, si no me comunico directamente con el API de facebook

Desde la perspectiva del social plugin, no estoy muy seguro si se pueda, por que no e visto alguna forma de instanciar los metas con el fb:like.

Por lo que según yo no se podría pero podrias checaro en la pagina de developers.facebook.com

Saludos

Ok, gracias por tu ayuda, investigaré haber como me va.

Avisanos si encuentras algo referente a eso saludos

Cuenten con eso.

Buenas yo de nuevo por estos lares, tengo una pequeña inquietud que quizás ayude a solucionar el problema de los dos like button en una página, bueno un like button es para la página y el otro para productos individuales, para cada producto individual hay que especificarle la página donde se encuentre, pero para la página solo hay que especificarle la ruta del sitio y ya, la pregunta es ¿cómo hago para ponerle el id de la aplicación al iframe del like button?

quiero qe en el facebook aparesca arlado de megusta un "no me gusta"

mira bro...yo estoy utilizando la pagina de un cantante (Don Omar) para hacer mi propia pagina utilizando la mayor parte del codigo fuente.. http://estebantf.webcindario.com/ ...bueno, el caso es que la pagina venia con un boton de "Compartir" y al hacer click se abria el sharer de facebook y salia la imagen de la pagina original, aun cuando yo habia sustituido las imagenes por unas de mi propio servidor ftp.. y al revisar y revisar y revisar los codigos encontre coincidencia en el codigo del index y uno de mis js....

Código HTML :

<div class="share">           
<ul>                  
<li class="btn_share"><a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Compartir</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>                
</li>                
<li class="like"><iframe src="http://www.facebook.com/plugins/like.php?href=http://EstebanTF.webcindario.com&amp;layout=button_count&amp;show_faces=false&amp;width=110&amp;action=like&amp;font&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe>
</li>

revisa mis codigos y veras que en uno de los js dice "like" y "btn_share" y te da la opcion de escoger la imagen deseada :B
....espero te ayude

Leí las intervenciones anteriores ... para acotar lo siguiente:

La creación de apps(aplicaciones) en la plataforma de desarrollo de facebook nos permite:

1.Crear y personalizar páginas facebook empresariales
2.Integrar tu página web con facebook
3.Crear y programar aplicaciones en modo canvas tipo cityville

Además tenemos el uso de plugins sociales que no es muy difícil su implementación y muchas apps...
PERO YENDO AL ASUNTO
PUBLICAR UNA IMAGEN EL MURO DESDE UNA PAGINA WEB ESTANDAR
REQUIERE:
- La creación de aplicación y su correspondiente configuración
- usar el diálogo FB.UI FEED si profundizas más veras que no permite publicar imágenes, video, flash, y musica en formato mp3:

FB.ui(
{
method: 'feed',
name: 'Facebook Dialogs',
link: 'http://apptivaweb.com/',
picture: 'http://fbrell.com/f8.jpg',
caption: 'titulo',
description: 'descripción de la imagen.'
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);


Este dialogo funciona. al hacer click en el link abre una ventana modal donde te muestra que se va a colocar y te permite colcoar un comentario previo permiso de uso de tus datos para punlicar en tu nombre, esto te lo pide la aplicación.....

un ejemplo hasta el 20 de abril 2012
http://aptivaweb.com

espero haya quedad más claro el panorama sobre como publicar una foto y controlar que foto. algunos tips anteriores estan depreciados por el hecho de que facebook se adapta a las nuevas tecnologías como en el html5 optimizando sus frameworks como js-sdk .... php-sdk