24 febrero 2010

No se ve el Gadget de Seguidores: Solucion Definitiva

  12 comentarios

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


12 comentarios :

  1. pues no me sirvio compañero ..... sigo buscando una solucion

    ResponderEliminar
  2. oye amigo.. gracias por visitarme... lo que pasa es que este truco es dificil de fallar, no se por que a ti no te sirvio, sigue los pasos muy bien. intenta esto... copia el ultimo codigo que doy en este post. elimina la direccion en rojo, y si logras localizar las XXXXXXXXXXXXXXXXXXX en el codigo, entra a tu cuenta blogger, luego haz click en diseño del blog que deseas agregarle el gadget, arriba en la barra de direcciones veras la direccion de tu blog algo que dice asi. "BlogID=XXXXXXXXXXXXXXX" .. las XXXXXXX no estan, solo esta un numero de 16 digitos, esas X en el codigo las sustituiras por ese numero, creas el nuevo gadget HTML/javascript lo pegas y lo guardas, ves si quedo bien, si no te encuentro otra solucion amigo

    ResponderEliminar
  3. Pues a mi tampoco me funciona y estoy haciendo todo tal cual....
    :(

    ResponderEliminar
  4. Hola PXlaura... Ps no se cual sea el problema pero a mi tambien me pasaba y lo hice y ahora se ve... intentare ver cual es el problema... por ahora, no uses la pagina de google para colocarlo. copia el siguiente codigo.

    <!-- 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:'',
    site: '12061821005373243120',
    'prefs':{"waitTime":"2","screenWidth":"282","useEffects":"1","rows":"3"}
    },
    skin);
    </script>

    Sigue los pasos que le deje al comentario 1. el que esta justo antes del tuyp. Si no lo logras, encontraremos otra solucion.

    ResponderEliminar
  5. mira el codigo tiene dos partes donde debes colocar la id de tu blog, arriba y en la parte de abajo, asi que esta atenta

    ResponderEliminar
  6. Gracias por tu pronta respuesta y ayuda pero sigue sin verse... no funciona...
    En mis otros blogs no he tenido problemas pero en este que es el principal, si...
    No sera conflicto con algun codigo en la plantilla? esta muy tuneada...
    :(

    ResponderEliminar
  7. Quizas... a veces el protoype y scriptaculous proporcionado por google no deja que se muestre... verifica si tienes este codigo en tu pagina web buscando esto:

    <script src='http://www.google.com/jsapi'/>

    <script>

    google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);

    google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);

    </script>

    So lo tienes, sustituye ese codigo con este, y añade el nuevo gadget de seguidores, pero no este de aqui, si no el que blogger proporciona, si sigue sin aparecer es otro problema con tu plantilla o algo. Aqui te va el codigo:

    <script src='http://www.google.com/jsapi'/>

    <script>

    google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);



    window.JSON = {

    parse: function (st) { return st.evalJSON(); },

    stringify: function(obj) { return Object.toJSON(obj); }

    };



    google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);

    </script>

    ResponderEliminar
  8. Gracias Anthony... pero no tengo scriptaculous ni ese script... voy a revistar los scripts que tengo y quitarlos de a uno a ver si alguno hace cortocicuito.
    Muchas gracias y si se te ocurre alguna otra cosa, quedo online.
    ;)

    ResponderEliminar
  9. okey.. haz eso.. quizas eso es lo que lo hace desaparecer chao

    ResponderEliminar
  10. la verdad anthony q viendo este post, solo me queda por felicitarte por tu colaboracion y predisposicion, trataste de dar solucion por todos los medios, y es de valorar... te felicito

    ResponderEliminar
  11. Gracias amigo.. me gusta ayudar.. gusto en conocerte Ridany... voy a mirar tu blog...

    ResponderEliminar
  12. si claro sos bienvenido anthony y el gusto es mio... saludos

    ResponderEliminar