Enlace para post aleatorio en entradas

Esto me lo preguntó hace ya unos días nEjO y el asunto se quedó traspapelado entre mis marcadores, así que ese es el motivo por el que no lo he publicado antes: sorry.

Se trata de hacer lo mismo que podeis ver actualmente al final de cada anotación de este blog, dónde se os invita a ver otro post cualquiera mediante un enlace que lleva a un post al azar. Realmente la cosa es sensilla, sensilla, sobre todo si ya tenemos el script para posts aleatorios instalado en cualquier otro sitio. Pero como nos gusta explicar las cosas, desarrollaremos un poco el porqué hay que hacerlo como se hace.

Pero vamos por el principio por si no teneis instalado este script. Lo primero es ir a Diseño ► Elementos de Página y allí buscar el lugar dónde queremos añadir el enlace que nos llevará a una entrada al azar. Pinchamos en Añadir un gadget y escogemos uno tipo HTML/JavaScript. En la ventana emergente pegamos lo siguiente:

<div id="myLuckyPost"></div>
<script type='text/javascript'>
function showLucky(root){
var feed = root.feed;
var entries = feed.entry || [];
var entry = feed.entry[0];
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == "alternate") {
window.location = entry.link[j].href;
}
}
}
function fetchLuck(luck){
script = document.createElement('script');
script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
}
function readLucky(root){
var feed = root.feed;
var total = parseInt(feed.openSearch$totalResults.$t,10);
var luckyNumber = Math.floor(Math.random()*total);
luckyNumber++;
fetchLuck(luckyNumber);
}
function feelingLucky(){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=readLucky';
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>

<a href="#random" onclick="feelingLucky()" title="Entrada al azar">Entrada al azar</a>

No tenemos Vista Previa, así que Guardamos y comprobamos que todo va bien. Ya tenemos nuestro enlace operativo (en un menú, debajo de la cabecera, en la barra lateral...).

La mayor parte del código (en realidad todo menos lo marcado en otro color) es el script que mediante cuatro pequeñas rutinas (funciones), lee nuestro feed, escoge de manera aleatoria una de nuestras entradas y nos lleva a ella. La última línea (repito, en otro color), lo único que hace es crear un enlace que al pincharlo (onclick) llama a la función principal y ejecuta todo lo anterior.

Entonces, para colocar el enlace en otro sitio distinto, sólo tendríamos que cortar esa última línea y ponerla en otro lado. El resto del código se puede quedar en el gadget dónde lo hayamos metido sin ningún problema. Podeis comprobar que si cortamos la llamada (última línea)  y no la ponemos en ningún sitio, simplemente no se verá nada. El script seguirá en su sitio y dispuesto para ser utilizado, pero al no existir nada que le ordene comenzar, permanecerá inactivo. Es decir, se leerá, pero no se ejecutará.

Bueno y ahora que tenemos el script por un sitio y la llamada por otro (copiada en vuestro portapapeles, supongo; si no es así, la copiais de nuevo del trozo de antes) sólo tenemos que colocarla en la entrada.

Y esto es sólo una manera de hablar, porque realmente no la pondremos en la entrada. Blogger guarda lo que nosotros redactamos en cada anotación, en una variable que encontrareis en vuestra plantilla como <data:post.body/> y dicha variable no es manipulable por nosotros a posteriori desde otro sitio distinto del propio editor. Así que lo que haremos será poner nuestro código en la plantilla, justo después de esa variable, para tenga una continuidad y parezca que es parte de la entrada.

Así que ya estais editando HTML con Plantillas de artilugios expandidas y buscando (CTRL+F siempre ayuda a ello) la variable mencionada. Justo después pegamos lo que antes habíamos cortado.

<p>Vemos <a href='#ramdom' onclick='feelingLucky();' title='Entrada al azar'>otro post cualquiera</a> por si le encontraras alguna utilidad?</p>

¡Voila!

Podemos cambiar el texto que forma el enlace y el que está fuera de este por el que queramos. Sería la parte marcada en verde. Cada cual que lo haga a su estilo ▼

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter