24 febrero 2010

No se ve el Gadget de Seguidores: Solucion Definitiva

 

Desde hace ya mucho tiempo mi gadget de seguidores venia sin funcionar, y este problemas es muy usual, y se que a muchas personas les ocurre esto, trayendo como consecuencia que los usuarios que desean seguir al blog que esta visitando, se le haga imposible hacerlo, por no tener la posibilidad de ver este gadget introducido en el blog...

Ayer, buscando solucionar este problema, entre a la pagina de Google Friend Connect a ver si podia hallar una solucion alli, y efectivamente asi fue, la halle... No es nada complicado, solo debes seguir un pequeño procedimiento y yo lo explicare con mucha atencion y esperando que quedes satisfecho con el tutorial

Entonces, que debemos hacer...

Entra a la pagina oficial de Google Friend Connect, inicias la sesion con tu cuenta google, si ya has iniciado antes no te preocupes, reconocera tu cuenta al instante.

En la pagina, habra una barra lateral o sidebar al lado izquierdo de la pantalla. alli te saldran todos tu blog, creados con la cuenta google que estas utilizando en ese momento.

Obviamente, selecciona el blog que tiene el problema con el gadget e inmediatamente abrira la siguiente pagina en donde debes seguir el proximo paso.


Como ya dije, abrira la siguiente pagina, en la que te mostrara varios botones como el siguiente, y haras click en el boton que dice "Examinar la galeria de Gadgets"


Luego de esto, aparecera la galeria de gadgets, haras click en Todos los Gadgets para que nos muestre el gadget que necesitamos.

No es obligado que usemos el gadget que necesitamos, pero si quieres que el gadget luzca como la primera imagen de este post tendras que seguir los pasos...

De otro modo, tienes el derecho de elejir el gadget que quieras, hay mucha variedad de gadget muy bonitos que podrian combinar con tu blog.



Ahora, siguiendo con los pasos, bajaras la barra de desplazamiento de tu navegador, como lo muestra en la imagen, hasta llegar al Footer de la pagina.

Tal y como lo muestra la imagen, seleccionaras el ultimo de la lista, haciendo click en "Obtener este gadget".

Luego, vendra el diseño, abrira la siguiente pagina, en la que debes modificar el tamaño y los colores del gadget acorde al diseño de tu blog, yo preferiria que lo dejaras tal y como esta, sin hacerle mas ninguna modificacion pero si es de tu gusto hacercelas, pues adelante.


Te mostraran tres pasos, el primero es la modificacion del tamaño, el segundo es los colores, y el tercero es un boton que dice "Generar codigo" y al cual haras click sobre el para obtener el codigo que pegaras en un nuevo elemento.


1. Ahora, dirigete hasta el escritorio de Blogger
2. Haz click en Diseño
3. Añade un nuevo gadget HTML/Javascript en la seccion que quieres que aparezca
4. Pega el codigo que te dieron pero no lo guardes todavia

El codigo obtenido sera algo como este


<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-XXXXXXXXXXXXXXXX" 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['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderOpenSocialGadget(
{ id: 'div-XXXXXXXXXXXXXXXX',
url:'http://www.sponks.com/gadgets/screensaver.xml',
site: '12061821005373243120',
'prefs':{"waitTime":"2","screenWidth":"282","useEffects":"1","rows":"3"}
},
skin);
</script>

5. Ahora, elimina la dirección que esta en rojo en el código, y haz clic en guardar
6. Verifica que todo salio bien

Enlaces para compartir en tu blog o pagina web.




Widget por Friki Bloggeo