Caja de Miembros blogger!

Con un poco más de calma me detuve a ver los códigos y tratar de entender por qué de esa forma sí funciona y el gadget de Seguidores que ofrece Blogger y el gadget de Miembros de Google Friend Connect (GFC) no.

Haciendo los comparativos me di cuenta que tanto el gadget de Blogger como el de miembros de GFC llaman a una función denominada renderMembersGadget que en palabras simples es lo que hace que los seguidores aparezcan en esa "cajita" y de ahí puedan usarse las aplicaciones de cada uno.

Sin embargo el otro código llama a una función distinta, renderOpenSocialGadget.

¿Qué significa esto?

Este último es -por decirlo de algún modo- la forma pura y básica de los Seguidores, que tiene como fin ser el "lienzo" para que los desarrolladores puedan crear más gadgets que involucre a los Seguidores con el código básico. En cambio renderMembersGadget es el producto final que tiene precisamente los códigos incompatibles con Scriptaculous.

¿Por qué en el código de la entrada anterior se tiene que eliminar una línea?

Porque como dije antes, es el código básico, y esa línea es el documento XML que contiene el trabajo del desarrollador, es decir, la interfaz del gadget así como sus funciones, es por eso que al eliminarlo regresa el gadget de Seguidores en su forma natural.

Dicho lo anterior entonces también podemos ahorrarnos unos pasos poner el gadget de Seguidores y hacer que funcione.

Para esto es necesario entrar a Google Friend Connect y obtener tu ID de GFC, cada blog tiene uno distinto.

Puedes conseguirlo entrando a Google Friend Connect y haciendo click en el menú lateral izquierdo sobre el nombre de tu blog verás que en la barra de direcciones aparece una URL y al final tu ID:

Ese es el ID del GFC de tu blog, ahora en un elemento HTML/Javascript pega este código:

<!-- Include the Google Friend Connect javascript library. -->
<script src="http://www.google.com/friendconnect/script/friendconnect.js" type="text/javascript"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-32226566577175641" style="width:300px;border:1px solid #cccccc;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
skin['NUMBER_ROWS'] = '4';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderOpenSocialGadget(
{ id: 'div-32226566577175641',
url:'',
site: '05983757033084872491',
},
skin);
</script>

Sustituye lo que está en rojo por la ID que copiaste anteriormente y listo.

Por supuesto que también se pueden hacer modificaciones de color y tamaño. En el caso del ancho se puede modificar donde dice width:300px;.
Otras modificaciones son estas:

skin['BORDER_COLOR'] = '#cccccc'; <-- Color del borde
skin['ENDCAP_BG_COLOR'] = '#e0ecff'; <-- Color de la cabecera del gadget skin['ENDCAP_TEXT_COLOR'] = '#333333'; <-- Color del texto de la cabecera del gadget skin['ENDCAP_LINK_COLOR'] = '#0000cc'; <-- Color del ícono para mostrar a todos los seguidores skin['CONTENT_BG_COLOR'] = '#ffffff'; <-- Color de fondo del gadget
skin['CONTENT_LINK_COLOR'] = '#0000cc'; <-- Color de los links
skin['CONTENT_TEXT_COLOR'] = '#333333'; <-- Color del texto
skin['CONTENT_HEADLINE_COLOR'] = '#333333'; <-- Color de la palabra "Seguidores" skin['NUMBER_ROWS'] = '4'; <-- Número de columnas a mostrar (alto del gadget)

Esas son las modificaciones de color y tamaño que se le pueden dar al gadget. Pero algunos ya habrán notado que no funciona del todo. Es decir, sí se ven los seguidores, se ve el número de ellos, funciona perfecto el botón para unirse. Pero cuando uno hace click en la foto de un seguidor se abre la ventana modal y se queda en blanco, no muestra los datos de usuario. Esto es porque esa función es propia del gadget de Blogger y como ya mencionamos, son justamente partes de las funciones que no son compatibles con Scriptaculous. Pero que no cunda el pánico, aun así podemos ver a todos los seguidores y los datos de cada uno.

¿Cómo? Haciendo click en el ícono de "ventana emergente" que se encuentra en el lado superior derecho del gadget

Tutorial por ciudadblogger