Cuando se utilizan los plugins sociales de Facebook, uno puede elegir entre agregarlos como IFRAMEs o como scripts. Ellos recomiendan usar esto último ya que, con un cargador genérico, luego podemos agregar diferentes plugins con sólo una línea de código, usando el lenguaje propio de la red llamado XFBML.
Asi que ponemos esto después de <body> y nos olvidamos del asunto:
Asi que ponemos esto después de <body> y nos olvidamos del asunto:
<div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({appId: 'PROFILE_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_ES/all.js';
document.getElementById('fb-root').appendChild(e);
}());
//]]>
</script>Allí, cambiamos PROFILE_ID por el número de identificación de nuestra cuenta en Facebook y ya podemos agregar los plugins con sencillez:
El botón Me Gusta:
<fb:like></fb:like>
Like-Box:
<fb:like-box profile_id="APP_ID"></fb:like-box>
Comment Box:
<fb:comments xid="APP_ID"></fb:comments>
Activity Feeds:
<fb:activity site="URL_elegida"></fb:activity>
Recommendations:
<fb:recommendations site="URL_elegida"></fb:recommendations>
Login:
<fb:login-button show-faces="true"></fb:login-button>
Live Stream:
<fb:live-stream event_app_id="APP_ID"></fb:live-stream>
Sin embargo, si optamos por este método, suele surgir un problema sobre el que han consultado y que afecta a Internet Explorer. Es fácil de detectar, lo que ocurre es que, simplemente, no funciona y no se ve nada de nada.
En principio, esto es fácil de solucionar porque en los foros de los desarrolladores de Facebook ya se ha publicado la respuesta. Lo que debemos hacer es modificar una etiqueta de nuestra plantilla; un etiqueta que normalmente, jamás tocamos así que debemos hacerlo con prudencia: la etiqueta HTML.
En una plantilla común, esta etiqueta dice esto:
El botón Me Gusta:
<fb:like></fb:like>
Like-Box:
<fb:like-box profile_id="APP_ID"></fb:like-box>
Comment Box:
<fb:comments xid="APP_ID"></fb:comments>
Activity Feeds:
<fb:activity site="URL_elegida"></fb:activity>
Recommendations:
<fb:recommendations site="URL_elegida"></fb:recommendations>
Login:
<fb:login-button show-faces="true"></fb:login-button>
Live Stream:
<fb:live-stream event_app_id="APP_ID"></fb:live-stream>
Sin embargo, si optamos por este método, suele surgir un problema sobre el que han consultado y que afecta a Internet Explorer. Es fácil de detectar, lo que ocurre es que, simplemente, no funciona y no se ve nada de nada.
En principio, esto es fácil de solucionar porque en los foros de los desarrolladores de Facebook ya se ha publicado la respuesta. Lo que debemos hacer es modificar una etiqueta de nuestra plantilla; un etiqueta que normalmente, jamás tocamos así que debemos hacerlo con prudencia: la etiqueta HTML.
En una plantilla común, esta etiqueta dice esto:
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
en una de las nuevas plantillas dice esto otro:
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
En cualquiera de los dos casos, lo que debemos hacer es agregar lo siguiente:
xmlns:fb='http://www.facebook.com/2008/fbml' xmlns:og='http://opengraph.org/schema/
de tal forma que quedará así:
xmlns:fb='http://www.facebook.com/2008/fbml' xmlns:og='http://opengraph.org/schema/
de tal forma que quedará así:
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml' xmlns:og='http://opengraph.org/schema/'>o así:
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml' xmlns:og='http://opengraph.org/schema/'>
15 comentarios:
La información que proporcionas es un error carácterístico cuando nos damos al reto de probar estos 'plugins sociales' con el JavaScript que proporciona Facebook.
Tienes razón, en todos los navegadores siempre se renderiza apropiadamente pero como raro, IE siempre nos sale con las suyas y cuando las páginas se han termiando de cargar.... sorpresa... todo se ha ido... :O
Aparte de esta, vi otra solución tambien en los foros y sugerían agregar un script justo antes de </body> con un evento onload que forzaba a que todo el contenido de la página adquiriera la propiedad display:block .. y violà... Todo se veía de nuevo...
Sin embargo, tambien se advertía que este problemilla podría traer problemas en la indexación que realizan los principales buscadores porque se creaban paulatinamente permalinks a entradas con un sin fin de redirecciones y códigos extraños creados por el problema.
A la larga, despues de que me acompañaron durante mucho tiempo en mi blog, los decidí quitar y mas bien decidí añadir lo que me gustara (como los Me Gusta y el Like Box) mediante iframes... porque incluso teniendo los 'schemas' que sugieres aquí, el cuento con IExplore no me gustó de a mucho...
En todo caso tampoco le echo todo el valde de agua fría a IE, si ves con detalle, casi todo lo que añadimos vía Facebook tiene muchos errores y de tanto en tanto funciona a su antojo.
Hoy no intepreto nada :((
Jmiur, siempre me habia preguntado si se podia cambiar esa etiqueta o no, la mia es ligeramente diferente.
Amigo, para q sirve esa etiqueta y si la cambio, mejora algo o afecta en algo? Para mi eso es un misterio
@rielCastellanos:
Las plantillas de Blogger están escritas en "lenguaje XML" y en la etiqueta HTML se agregan una serie de atributos que son los que permiten describirla y que se interpreten correctamente las instrucciones.
No es recomendable modificarla a menos que se sepa que se hace y tampoco recomendaría experimentar con eso. No obtendrás ningún beneficio.
Hola JMiur, espero te encuentres bien. Me gustaría hacerte una pregunta o mejor dicho que me aclares algunas cosas, te cuento:
Al acceder al panel de nuestro blog, en la pestaña de "Diseño", al pinchar en el "Editar" del widget "Entradas del Blog", se abre una ventana con las opciones que pueden añadirse a nuestras entradas, aquí aparece una llamada "Reacciones", ¿Es posible con un poco de CCS cambiar la forma en la que se muestra esta opción?, si es así, me gustaría que lo explicarás si no es mucha molestia. GRACIAS, espero ancioso tu respuesta.
El elemento Reacciones es un IFRAME así que no tiene opciones para poder ser modificado. Todo lo que sé sobre ese gadget es lo que está en esta entrada.
Hola!!.. pues ...la verdad no entiendo naaa!!!...jaja.. es decir..esto de los codigos y las etiquetas me marean demasiado!..no enitendo mucho el lenguaje de programacion y aunq aqui lo explicas de manera "sencilla"..no logro captar toda la informacion. Crees q puedas ayudarme?..quisiera añadir los puggins de facebook en mi blog pero.. no encuentro el bendito "body"!!!!!!!!!!!!...de veras..no lo encuentro..
hay un "body" pero con mas palabras aparte y la verdad no se si resultaria aplicar el codigo q das ahi...:(..please!! help me!!!!!!!!!!! jeje..saluditos!
La etiqueta a buscar es <body ..... sin importar si tiene o no tiene algo extra detrás (eso sólo ocurre en las plantillas nuevas.
Lo que no sé es qué quieres hacer.
Hola!!..gracias x sacarme de la duda!... pues..ok mira..en la plantilla de mi blog (en blogger existe esta etiqueta(no se si esta bien dicho). (voy a reemplazar los simbolos de mayor y menor por corchetes ok?) ... = [body expr:class='"loading" + data:blog.mobileClass'] [div class='body-fauxcolumns'] ..lo q quiero saber es: ¿donde coloco el codigo que tu muestras más arriba???..exactamente despues del "body" o al cerrar el corchete? ..te agradeceria bastante..lo q quiero hacer es colocar el comment box de facebook..:)
GRacias de antemano!♥
Es una plantilla nueva de Blogger seguramente así que la etiqueta BODY es esta parte:
<body expr:class='"loading" + data:blog.mobileClass'>
....... y el codigo del script va acá, en la siguiente linea .......
....... luego continuará el resto de la plantilla .......
<div class='body-fauxcolumns'>
.........
Quiero poner el facepile como un widget en el sidebar derecho de mi blog que es http://portafoliodeprofes.blogspot.com ayuda por favor!!!
Agrega un elemento HTML en la sidebar y coloca allí el código que te da Facebook.
me llamo ania y tengo una web, quiero colocar el boton de me gusta de facebook pero no me gustan los frames,quiero que se abra en otra ventana, solo que aprezca un enlace, como lo hago?
No hay opciones disponibles más alla de las ofrecidas por Facebook mismo.
Aaah..le doy la razón a Felipe!!;... me pregunto si realmente vale la pena tenerlo, cuando podemos usar uno personalizado, usando el enlace de Blogger en sus botones de compartir...tendré que consultarlo con la almohada...y es que lo difícil nos engancha ¿no? lo quiero!, lo quiero...!
...he estado leyendo horas y horas sobre esto JMiur, y probado a lo bestia, y si funciona y al rato hay problemas..., cosa que no ocurre con el botón de Twitter, nunca "se queja", y se puede implementar de una manera tan rápida y sin complicaciones...
Creo que les falta mejorar el asunto, para que cumpla bien el propósito..., creo que terminaré viendo esos botones en mi cara...,siguiente tema por favor...
¿cómo la vez?
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...