44

Ultimas entradas (Google Ajax)

Otra forma más de mostrar en el blog nuestras últimas entradas que nos ofrecen desde Google AJAX Feed API donde podéis ver un ejemplo en funcionamiento.
Siguiendo los pasos que allí nos indican, no es demasiado difícil conseguir la construcción de un widget que muestre las últimas entradas del blog de una forma muy original.
Yo os proporciono el código del mio, después solo tendréis que tratar de personalizarlo para adaptarlo a vuestro blog.

Ejemplo entradas Ajax

[1] Antes de comenzar tendremos que obtener nuestra API Key de Google.
Accedemos a la página de  Google Ajax Feed API donde obtendremos nuestra Key, para ello solo tenemos que marcar la casilla de "I have read and agree with the terms and conditions" e introducir la url de nuestro blog para después pinchar en el botón "Generate API Key":

Api Key

[2] Añadiremos ahora el código siguiente antes de </head> sin olvidarnos de sustituir en el código "TU_API_KEY" por la nueva Key que acabamos de obtener para nuestro blog:
<!-- API KEY Ultimas entradas-->
<script src='http://www.google.com/jsapi/?key=TU_API_KEY' type='text/javascript'/>
<script src='http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js' type='text/javascript'/>

<style type='text/css'>
@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");

#feedControl {
margin-top : 20px;
margin-left: auto;
margin-right: auto;
width : 95%;
font-size: 16px;
}
.gfg-title {
font-size: 18px;
padding-left: 10px;
color : #fffcc;
background-color: #6998CA;
}
.gfg-title a {
color : #fff;
}

.gfg-root {
border: 1px solid #6998CA;
font-family: "Georgia", sans-serif;

}
.gfg-listentry-highlight {
background-image : url("http://2.bp.blogspot.com/_8PJ-pgoBhWQ/SN1icxHvPXI/AAAAAAAAET4/_V1bKeYDeTk/s320-R/0036_bullet02.png");
background-repeat: no-repeat;
background-position : center left;
}
.gfg-listentry-odd {
background-color : #d7e5f0;
}
</style>
<script type='text/javascript'>
function load() {
var homeUrl = "<data:blog.homepageUrl/>";
var feed = homeUrl + "feeds/posts/default";
new GFdynamicFeedControl(feed, "feedControl");
 var options = {
    numResults : 10,
    displayTime : 5000
  }
  new GFdynamicFeedControl(feed, "feedControl", options);
}
google.load("feeds", "1");
google.setOnLoadCallback(load);
</script>

[3] Guardamos cambios y en el panel de "Diseño" pinchamos en añadir un nuevo Gadget de Html y pegamos dentro estas líneas de código:
<div id="feedControl">
<span style="color: #0066cc;">Cargando ultimas entradas...<img src="http://i201.photobucket.com/albums/aa306/picumoros/mozilla_blu.gif"/></span></div>

Personalización:
El widget funciona también colocado en las entradas, solo hay que añadir el último código dentro del editor en la entrada donde vayamos a mostrarlo.

El tamaño del widget lo he puesto en porcentaje (width: 95%;) de tal manera que ocupara ese espacio, el 95%, del contenedor donde sea colocado (widget o entrada), aunque también podemos usar pixeles.

La cantidad de entradas que se mostrarán puede cambiarse en donde dice "numResults:10;" cambiando "10" por el número de entradas a mostrar.

En displayTime : 5000 controlaremos la velocidad de desplazamiento de la flecha que marca los títulos, a mayor número más lentitud y viceversa, en el código está en 5000, pero en el ejemplo en funcionamiento el valor es de 2000.

En mi diseño he usado una pequeña flecha azul que va marcando cada título, podéis usar vuestro propio icono cambiando la url del mio por la url del nuevo (la parte destacada en negrita):

.gfg-listentry-highlight {
background-image : url("http://2.bp.blogspot.com/_8PJ-pgoBhWQ/SN1icxHvPXI/AAAAAAAAET4/_V1bKeYDeTk/s320-R/0036_bullet02.png");
background-repeat: no-repeat;
background-position : center left;
}

En Bullet Madness podéis encontrar unos iconitos muy adecuados para sustituir a mi flechita azul.

En el paso [3] también podéis usar una "imagen de carga" distinta a la mía, solo tenéis que cambiar la url de mi ejemplo por la de vuestra imagen.

En cuanto a los cambios de color, texto, tamaño de fuente, etc... lo haremos sin demasiado problema en la parte CSS del código, es decir, lo que está entre <style type='text/css> y </style>.

No os preocupéis si tarda un poco en empezar a funcionar...

¡Manos a la obra!

Entradas Relacionadas:

44 comentarios:


Anónimo

Curiosamente asi lo tengo en mi blog x)

Esebloguero

Hola! sólo te quería invitar a mi blog, hay algo para ti! chiau!

MINDistortion

rosa quisiera que me digas donde esta

el truco para poner como tu blog esto

Estás en: Inicio > Widget > Buscador que busca en la web y en tu blog

esto si me serviria mucho espero respuesta gracias por adelantado xD

Angela Arias Molina

Hola, Rosa. Primero que todo, déjame decirte que amo tu blog. Soy una fiel lectora, aunque esta sea mi primera vez que comento XD
He utilizado tus trucos para mejorar mi blog, y espero pronto darlo a conocer con un nuevo look gracias a tus consejos.
Con respecto a este truco, sólo tengo una duda:
Si, por ejemplo, consigo el API Key de uno de mis blogs, pero coloco el html y el widget en otro blog, de todas maneras podré ver las últimas entradas en el blog en el que lo coloqué?
Te pongo un ejemplo: Todos mis blogs están unidos por enlaces, pero quiero que cada vez que actualice uno, en los otros se puedan ver esas actualizaciones. Me pareció que este truco era muy útil para eso.
Lo intenté implementar en un blog de prueba, pero el widget tarda mucho cargando y no sé si es por mi conexión (lo cual dudo, pues veo tu ejemplo a la perfección) o si porque hay alguna incompatibilidad si coloqué el html y el API de otro blog en uno diferente. No sé si me doy a entender :s
Aquí te dejo el url de mi blog de prueba. El widget de este truco está en el sidebar, y la idea es que ese widget muestre las últimas entradas de mi blog personal (que no es de prueba...me doy a entender??) Reconocerás otros de tus trucos en este blog de prueba. Mil gracias por todo, Rosa ;)

http://angela-angelito.blogspot.com/

Carlos Ventura

Hola Rosa.No se que cosa hise mal por que el wiget no me muestras nada solo sale esto.

(de noreply@blogger.com (Carlos Ventura)
-
hace 12 horas)

Anónimo

Carlos Ventura , pues yo no veo nada incorrecto...a no ser que no hayas copiado completa la key...prueba a obtener otra...

Anónimo

Angela , te explicas perfectamente, y no, estando tal como está aquí expuesto el código no puedes hacer eso, pues el script "lee" de los feeds del blog donde está colocado.
Pero no te preocupes, he encontrado precisamente esta tarde un widget igual que este pero con algunos cambios en su código que hace que pueda mostrase los datos de un blog en otro distinto e incluso mostrar una lista de blogs. Estoy preparando la entrada, si tienes un poco de paciencia, en cuanto esté lista la subo al blog.
¡Gracias!

Anónimo

MINdistortion, mira en esta entrada:

http://elescaparatederosa.blogspot.com/2007/05/breadcrums-siguiendo-el-rastro-del.html

Angela Arias Molina

MIL GRACIAS, ROSA!!! Lo esperaré con muchas ansias. No sé dónde estaría ahora si no fuera por ti y por tu blog :D

Unknown

hay hay hayyy Rosi tenemos API a probarlo!!!...espero que estés muy bien...mis besos y abrazos

Unknown

Rosi funciona inmediatamente, lo he dejado con tus flechas, tus colores...muchas gracias!!!, he sacado lo de las últimas entradas, besitos!!!

..NaNy..

Hola todas las entradas son fantasticas y que seria de mi blog sin la ayuda de estos blog tan fantasticos como el tuyo gracias,graciasssssss

Unknown

Hola Rosa espero que este bien, me gusto este ultimo widget de la ultimas entradas, pero no quiero utilizar la sidebar, porque la tengo muy cargada. dime como puedo colocar este elemento en una entrada, pero que permanezca siempre en la primera pagina, es decir no se mueva.


gracias Rosa

Anónimo

Solidaridad , para mantener una entrada siempre en primer lugar lo que hay que hacer es ponerle siempre una fecha posterior a la última que publiques, esto es un "rollo" la verdad, porque hay que estar continuamente cambiándole la fecha, o sea, cada vez que se publica una nueva hay que modificar la fecha de esta para que se mantenga en primer lugar.

Lo mejor sería que lo colocases en un widget sobre las entradas, o sea, lo pones en la sidebar y luego lo arrastras sobre el widget de entradas, se mantendrá siempre arriba de la última entrada publicada.

Anónimo

Rosa, hay otra manera de hacerlo, si me permites aqui lo cito:

Para que un elemento solo se vea en la página principal:

<b:if cond='data:blog.pageType == &quot;index&quot;'>

AQUI PONES EL ELEMENTO, PUEDE SER UN WIDGET, O LO QUE TU QUIERAS

</b:if>

Y solo con eso, el elemento se mostrara única y exclusivamente en la página principal.

Disculpa que haya estado interviniendo estos días, solo que quiero aportar con algo espero no te moleste rosa, pero si es así hazmelo saber y me limitare solo a comentar como siempre.

que estés bien y saludos a solidaridad

Protegon, 30 Set 2008
El escaparate de Rosa

Anónimo

Pero el elemento no debe ser una entrada obviamente, mejor haces un widget nuevo que sea solo visible en la página principal.

Salu2

Protegon, Set 2008
El Escaparate de Rosa

Anónimo

Protegon, eso ya lo tengo explicado en otra entrada...creo que Solidaridad no ha hecho mención a que solo se vea en la página principal...sino a que se viera siempre en primer lugar...

Anónimo

Solidaridad, no obstante una vez creado el widget y colocado en su lugar, si solo quieres que sea visible en la página principal o en la que sea, mira aquí:

http://elescaparatederosa.blogspot.com/2008/01/mostrar-un-widget-en-una-pgina.html

Anónimo

Pero ella dijo que permanezca siempre en la primera página por eso talvez entendí mal.

Anónimo

Protegon, no se trata de que me moleste o no, se trata de que llevo tiempo con el blog y prácticamente conozco a todas mis visitas (amigos) de hace tiempo...es por eso que se como ha de ser la forma de explicar las cosas según quien esté preguntando ¿entiendes?
No es lo mismo explicar algo a quien sabes que controla más o menos el tema (como tu) que a otra persona a la que llevas tiempo ayudando y que sabes bien que la explicación ha de ser muy detallada...
Me gusta dar a mis amigos una atención lo más personalizada posible, de hecho, si a veces hay comentarios sin respuesta aquí, no quiere decir que no lo haya tenido en cuenta, a menudo respondo por email, en su blog e incluso a través del msn en casos excepcionales...

Anónimo

la verdad esque me lo he leiod todo, y me gustaria poner para mi blog, pero no me funciona, lo introduzco y me hace una cosa rara, el codigo html se me fastidia como si lo hubiese echo mal y me parece una gran idea.
alguien me peude ayudar?
un saludo y gracias

Anónimo

zapatos mujer, si pudieras explicarme como lo has tratado de hacer exactamente...es que tu plantilla es una Mínima, no debería haber problema...

Anónimo

rosa no me funciona el truco he intentado desde hace como media hora y me muestra error de código ¿que estoy haciendo mal?

Anónimo

Anónimo, pues ni idea...no explicas que es lo que sucede, tampoco hay enlace al blog donde lo has puesto para mirarlo...en fin, no puedo ayudarte así.

Anónimo

Hola Rosa

Quiero decirte que adoro tu blog porque es muy facil de entender para los que no sabemos de HTML.

mi blog es carameloychocolate.blogspot.com. En este agregue lu truco y me quedo perfecto, pero cuando lo quise hacer en el de mi novio no me quedó, ¿lo podrías revisar y ver en que fallé?
el blog es: libertaddeexpresion08.blogspot.com

Mil gracias

Anónimo

Hola Rosa soy el de queenspain y no me sale esto de las ultimas entrada, no se que hago mal lo hago todo como dices (soy muy obediente) pero nada, me pone: feed cuold not be loaded. ¿Alguna idea?. Gracias por todo.

Anónimo

Fernando, en tu panel Configuración - Feed del sitio, mira a ver si tienes la opción "completo" sino no podrá funcionar bien.

Anónimo

Rosa si que esta en completo pero sigue sin salir, una pena pues me gustaba bastante. No te quiero robar mas tiempo que ya me has ayudado bastante seguire probando y si sale bien y si no mala suerte. Un saludo y espero estes bien.

Anónimo

Es fácil gente, pero recuerden conseguirse la API es muy importante, ya yo les dije a varias personas que visitaran este truco, y es cierto que puede hacerse un poco dificil, pero ya luego pueden hacerlo.

Es cuestión de probar. Mis amigos mandan agradecimientos.

Anónimo

Por fin me salio, devia tener algo con los feeds pues estube trasteando y al final voila, lo tengo. Lo que no puedo es cambiar de color el titulo donde pone QueenSpain, no se si se puede lo he intentado pero nada, lo demas si que he podido configurarlo a mi gusto. Mi preguntas es si se puede poner un scroll para poner 25 entradas por ejemplo y con la barra poder desplazarse, he probado con un post tuyo pero no sale nada, no se si se puede. Gracias por todo.

Anónimo

Fernando , me alegro.
Miraré lo del scroll, aunque el código es el que Google proporciona, así que...no se.
Lo miraré.

Anónimo

Mil gracias por tu interes, como siempre eres un hacha.

Anónimo

Fernando, ya está.
He pensado que lo mejor sería ponerle la barra de desplazamiento solo a las entradas, o sea, la entrada de arriba que va cambiando estará siempre ahí, visible.
Tienes que añadir en el código, debajo de cualquiera de las llaves de cierre (esta: }) este trozo de código:
.gfg-list {
height:100px;
position : relative;
overflow : auto;
text-align : left;
margin-bottom : 5px;
}

En height es donde tienes que poner la altura que ocuparán los títulos de las entradas, la barra saldrá de forma automática, siempre que la altura que pongas ahí, sea menor que el espacio que ocupan los títulos (ve probando).

Anónimo

Bueno, bueno, bueno, si te tuviera delante te besaba, a quedado genial justo justo como queria, eres la mejor de las mejores. Gracias infinitas.

Anónimo

Hola Rosa.
Me quedé impresionado por este blog y hace rato que estoy abrevando del mismo.
Te comento que no tengo suerte con un listado de "Últimas entradas". Busco y busco y no hay caso. Necesito algo sumamente sencillo, un listado de títulos pero ilimitado. Quiero que todos los títulos estén allí.
He logrado, en parte, poner el scrollbar al widget que ya tengo. La idea es esa: un scrollbar con todos los título publicados.
Espero que me puedas dar una mano. Gracias. Emilio.

RSB

Esto se podria usar en una web independiente o tiene que ir en el blog?

Anónimo

RSB, este tiene que ir en el blog, pues usa la api personal del blog donde va colocado.
Mira en esta otra entrada:
http://elescaparatederosa.blogspot.com/2008/09/lista-de-blogs-ajax-gadget.html

Anónimo

Emilio Goicoechea, a decir verdad tengo un sistema que hace exactamente eso, muestra TODOS los títulos de las entradas del blog y además incluye un scrollbar de forma automática...si me das algo de tiempo preparo la entrada.
Prometo no tardar! :-)

Ale

Y se actualiza "en vivo"? Supongamos que lo uso para el feed de Twitter, se actualizaran los twitteos sin necesidad de re-cargar la poágina? :) Gracias

Anónimo

Losing, no puedo decirte nada sobre eso...no lo he probado con nada "en vivo", aunque dudo que se actualice.

El errante

Rosa !! no hace mucho vi este blog y estoy enganchado.
Mi pregunta es .. ¿se podría hacer lo mismo pero con los últimos comentarios o con un feed de otros sitios?

Un abrass ! :)

Anónimo

Orion, con los últimos comentarios no lo he mirado, la verdad :$ con los feeds de otros sitios mira en esta entrada:
http://elescaparatederosa.blogspot.com/2008/09/lista-de-blogs-ajax-gadget.html

gaxgax

Una vez mas.....y con la sensación de quedar corto con la palabra....GRACIAS...¡¡¡, por compartir y ayudarme a aprender cada día un poco mas.

Saludos desde Chile....

Anónimo

gaxgax Es un placer haberte podido ser de ayuda :D

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S