El uso de este script va a depender de lo que ustedes quieran hacer con él, ya que se puede configurar fácilmente para cosas como:
- Configurar para sliders dinámicos mediante una estructura personalizada.
- Insertar dentro de una página estática un sitemap.
- Mostrar entradas relacionadas al pie de una entrada.
- Crear un gadget de últimas entradas personalizado.
- Crear un índice de blog personalizado.
- Traer las entradas del blog al azar.
- Otros posibles usos que puedas darle.
Cómo añadir el plugin en Blogger:
Para poder incluir el script en tu blog, símplemente deberás pegar el siguiente código donde desees que se ubiquen los artículos:
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/69931585/Ayuda%20Bloggers%202013/Desarrollo/ayudabloggers-obtener-feed.js"></script>
<script type"text/javascript">
var cantidad_posts = 10; // Cantidad de posts que se mostrarán
var caracteres_resumen = 100; // Cantidad de carácteres del resúmen
var tamano_imagen = 100; // Tamaño imagen en píxeles
var url_imagen_no_disponible = "URL IMAGEN NO DISPONIBLE"; // URL de la URL si no existe una imagen
var id_contenedor = "ID_CSS"; // Identificador CSS del contenedor de todos los elementos
var html_personalizado = false; // Usar estructura personalizada, útil si necesitas configurar un slider en particular o algún sistema de terceros
<script src="http://www.ayuda-bloggers.info/feeds/posts/default?orderby=published&alt=json-in-script&callback=obtener_feeds&max-results=999999"></script>
En donde deberás reemplazar http://www.ayuda-bloggers.info por la URL de tu blog.
Si necesitas crear una estructura personalizada, omite el código anterior y añade el siguiente código antes de </head>:
<script>
// Obtener posts a partir de las feeds de Blogger
// Por Víctor Calderón Oyarce
// Para Ayuda Bloggers
// http://www.ayuda-bloggers.info
// CONFIGURACIONES INICIALES
var cantidad_posts = 10; // Cantidad de posts que se mostrarán
var caracteres_resumen = 100; // Cantidad de carácteres del resúmen
var tamano_imagen = 100; // Tamaño imagen en píxeles
var url_imagen_no_disponible = "URL IMAGEN NO DISPONIBLE"; // URL de la URL si no existe una imagen
var id_contenedor = "ID_CSS"; // Identificador CSS del contenedor de todos los elementos
var html_personalizado = false; // Usar estructura personalizada, útil si necesitas configurar un slider en particular o algún sistema de terceros
function obtener_feeds(json) {
var posts_obtenidos = json.feed.openSearch$totalResults.$t;
var crear_arreglo = new Array();
document.write('<div id="'+ id_contenedor+'">
');
for(var i= 0; i < cantidad_posts; ++i) {
// ELEMENTOS DE CADA POST
var titulo_post = json.feed.entry[i].title.$t; // Título entrada
var miniatura = json.feed.entry[i].media$thumbnail.url; // Thumbnail entrada
var url_post = json.feed.entry[i].link[1].href; // URL entrada
var url_post = url_post.replace('#comment-form', '');
var miniatura = miniatura.replace('s72-c', 's'+ tamano_imagen +'-c' ); // Miniatura
if (miniatura.length == 0) { // Si la entrada no contiene imagen...
miniatura = url_imagen_no_disponible;
}
if ("content" in json.feed.entry[i]) { // Si "content" se encuentra dentro del artículo (Para full feeds)
var resumen = json.feed.entry[i].content.$t
}
else if ("summary" in json.feed.entry[i]) { // Si "summary" se encuentra dentro del artículo (Para feeds resumidas)
var resumen = json.feed.entry[i].summary.$t
}
var strip = /<\S[^>]*>/g;
resumen = resumen.replace(strip, ""); // Eliminamos las etiquetas HTML de nuestros resúmenes
if(resumen.length > caracteres_resumen) { // Si el artículo es superior a la cantidad de carácteres límite, resumimos.
resumen = resumen.substring(0,caracteres_resumen)+ '...';
}
crear_arreglo[i] = i; // Almacenamos el índice del arreglo actual
if(html_personalizado == false) { // Si no hemos habilitado html_personalizado...
document.write('
<div class="ab-json-post">
');
document.write('
<div class="ab-post-title">
<a href="http://www.blogger.com/%27+%20url_post%20+%27">' + titulo_post + '</a></div>
');
document.write('<img alt="titulo_post" class="ab-thumbnail" src="' + miniatura + '" />');
document.write('
<div class="ab-post-summary">
'+resumen+'</div>
');
document.write('</div>
');
} else { // Escribe aquí tu propio código utilizando las variables y el ejemplo de arriba
document.write('Empieza a escribir tu código HTML, este es el post índice '+i +'');
}
}
document.write('
<div class="clearfix clear">
</div>
</div>
');
}
</script>
Y en donde desees incluir las entradas, deberás añadir lo siguiente:
<script src="http://www.ayuda-bloggers.info/feeds/posts/default?orderby=published&alt=json-in-script&callback=obtener_feeds&max-results=999999"></script>En donde deberás reemplazar http://www.ayuda-bloggers.info por la URL de tu blog.
Guarda los cambios y empieza a configurar mediante los siguientes pasos:
Configurar el plugin:
Dentro del script se pueden configurar los siguientes parámetros:
// CONFIGURACIONES INICIALESEstas variables permiten alterar un poco el comportamiento del script, si deseas hacer cambios a la estructura que éste devuelva, entonces deberás buscar el siguiente código:
var cantidad_posts = 10; // Cantidad de posts que se mostrarán
var caracteres_resumen = 100; // Cantidad de carácteres del resúmen
var tamano_imagen = 100; // Tamaño imagen en píxeles
var url_imagen_no_disponible = "URL IMAGEN NO DISPONIBLE"; // URL de la URL si no existe una imagen
var id_contenedor = "ID_CSS"; // Identificador CSS del contenedor de todos los elementos
var html_personalizado = false; // Usar estructura personalizada, útil si necesitas configurar un slider en particular o algún sistema de terceros
document.write('Empieza a escribir tu código HTML, este es el post índice '+i +'');
Y empezar a escribir el nuevo código guiándote con el código que se encuentra arriba de éste. Esto es muy útil si necesitas adaptar un slider para que muestre las últimas entradas de tu blog, por ejemplo.
Importante: Recuerda cambiar por true la variable html_personalizado o de lo contrario no funcionará.
Configurar mediante CSS:
El identificador que asignes en la variable id_contenedor, deberás utilizarlo para enlazar atributos. El resultado del script es el siguiente:
<div id="ID_CSS">
<div class="ab-json-post">
<div class="ab-post-title"><a href="URL-POST-1">Título entrada 1</a></div>
<img class="ab-thumbnail" src="URL-IMAGEN-MINIATURA" alt="Título entrada 1" />
<div class="ab-post-summary">Resúmen de la entrada</div>
</div>
<div class="ab-json-post">
<div class="ab-post-title"><a href="URL-POST-2">Título entrada 2</a></div>
<img class="ab-thumbnail" src="URL-IMAGEN-MINIATURA" alt="Título entrada 2" />
<div class="ab-post-summary">Resúmen de la entrada</div>
</div>
...
<div class="ab-json-post">
<div class="ab-post-title"><a href="URL-POST-N">Título entrada N</a></div>
<img class="ab-thumbnail" src="URL-IMAGEN-MINIATURA" alt="Título entrada N" />
<div class="ab-post-summary">Resúmen de la entrada</div>
</div>
<div class="clearfix clear"></div>
</div>
Estas son las reglas CSS que deberás modificar:
#ID_CSS { /* Reemplazar por el ID que hayas seleccionado */
}
.ab-json-post {
}
.ab-post-title {
}
.ab-post-thumbnail {
}
.ab-post-summary {
}
.clearfix {
clear:both;
}
Un ejemplo, utilizando el sistema para mostrar las entradas relacionadas en Blogger:
#posts-relacionados { /*Identificador asignado por mí*/
background:#EFEFEF;
border:1px solid #DDD;
padding:15px 15px 0;
color:#666;
}
#posts-relacionados:before {
content:"Otros artículos interesantes:";
font-size:large;
display:block;
margin-bottom:15px;
}
.ab-json-post {
width:31%;
float:left;
margin:0 0 15px 0;
height:235px;
}
.ab-json-post:nth-child(3n+2) {
margin:0 3.5% 15px;
}
.ab-post-title {
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
}
.ab-post-thumbnail {
max-width:100%;
}
Conjuntamente, para que se encuentren los artículos relacionados según coincidencias de etiquetas, utilizar el siguiente código:<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
<script src="https://dl.dropboxusercontent.com/u/69931585/Ayuda%20Bloggers%202013/Desarrollo/ayudabloggers-obtener-feed.js" type="text/javascript"></script>
<script>
var cantidad_posts = 6; // Cantidad de posts que se mostrarán
var caracteres_resumen = 50; // Cantidad de carácteres del resúmen
var tamano_imagen = 200; // Tamaño imagen en píxeles
var url_imagen_no_disponible = "URL IMAGEN NO DISPONIBLE"; // URL de la URL si no existe una imagen
var id_contenedor = "posts-relacionados";
var html_personalizado = false;
</script>
<script expr:src='"http://www.ayuda-bloggers.info/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=obtener_feeds&max-results=99999"' type='text/javascript'/>
</b:if>
</b:loop>
El resultado de esto:
Configuraciones opcionales:
Si deseas que el script se encargue de devolverte la entrada completa (Incluyendo las etiquetas de formateo HTML), deberás eliminar estas líneas:
var strip = /<\S[^>]*>/g;
resumen = resumen.replace(strip, ""); // Eliminamos las etiquetas HTML de nuestros resúmenes
if(resumen.length > caracteres_resumen) { // Si el artículo es superior a la cantidad de carácteres límite, resumimos.
resumen = resumen.substring(0,caracteres_resumen)+ '...';
}
Recuerda, que si deseas hacer cualquier cambio al script o si bien lo deseas utilizar como base para un script mejor, puedes tomarlo y modificarlo a tu antojo.
Ver el código fuente del script en GitHub Gist.
