23 de marzo de 2012

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:
id google friend connect
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




3 comentarios:

  1. Gracias, ya sabia como hacerlo pero nunca me sali bien :)

    ResponderEliminar
  2. Que bueno que te alla salido bien :) Cualquier duda a las ordenes linda :D Besotees Gigantes <3

    ResponderEliminar
  3. a mi no me funciona...no se si habré tocado algo..pero no me va y lo he intentado un monton de veces T-T

    ResponderEliminar

¡ATENCIÓN: LEE LO SIGUIENTE ANTES DE COMENTAR!

*Si vas a comentar, puedes usar tu cuenta de Google, OpenID, Nombre/Web, y Anónimo
*No Insultar
*No hagas SPAM, Números telefónicos ni Emails
No dejes enlaces a otros blogs, números telefónicos ni correos electrónicos.

¡Gracias!
Att: Staff Club Bloggeras

Categorías

- AgusSweet' -Karii ♥ -SuzettStronger♥' 'Bloggeras' "Personaliza tu Twitter" adelanto Adele aniversario avisos awards BA Bases Bella Thorne bg Biblioteca Blends Blogger Bloggera Del Mes Britney Spears By *.* Memii By Angie By AriiCa'' By Bale By Cata By Deanase By Fatiima By Nievely By Paaz By ProdigyApple By Sweet Perfect By Vale By Venusita By: Ana Laura-JBMFC By: Ayee♥ By: Emii By: Venusita By:Ali♥ By:Leslye Diaz Cyrus Cami Carteles celulares Chicas Color Complementos Concurso coral Crea renders Cursores Demi Lovato Descargas Diana Gu' diseño Ecodesigners Entrega de Pedidos escritoras Especial Famosos Facebook Famosos Flash fonts Foro Fotos GIF gratis Header header psd Header PSD Ariana Grande header psd Demi Lovato hellow iconos Imágenes Imagenes PNG IsOnee Jessie J Katy Perry Laura layout blogger Magazine Manchas Maquillaje Marceliita ♥ Max Rodriguez Me Presento AriiCa'' Me Presento Deanase Me Presento Fatiima Me Presento Paulaah Mega Regalo Mickey Miika♥ Miley Cyrus Minnie Musica navidad NickTVUP Noticias Nueva Coweb Olivia Holt Pack Pandita Para tu blog Para tu Pc Pequeñas Mentirosas Personalizando tu blog PhotoPack photoscape photoshop PhotoshopHQ Piensa verde Pngs Por Cris*-*-* Portadas Post Premades premios Presentacion Programas proximamente Proyecto Verde PSC PSD Psd GomezLove Recursos Regalazos Regalos Reglas Retos rush-designs.fangalaxy.org saarah´ SaaRaH´ Me presento Regalazos samii Keller Screenshots shara marie Sicóloga Rossana Sidebar skins Sofía Dreamer sorpresas Styles Team telenovelas Textos PNG Texturas Themes Tips Tips. Moda Top Tutoriales TV twitter v-blog Vacaciones Video Tutorial videoblog Videos Vídeos votaciones voten por IsOnee para Bloggera del Mes. wallpapers walls Wordpress

LinkWithin

Related Posts Plugin for WordPress, Blogger...