OCULTAR MENU LATERAL >>

Añadir "Post Relacionados" al final de cada post

Mientras pensaba en maneras de atrapar lectores para mi blog, me he dado cuenta de que conmigo funciona bastante bien eso de añadir al final de cada post una lista con otros artículos relacionados. Asi que he añadido esa funcionalidad y aquí os digo como lo he hecho.

Antes de nada, decir que lo he conseguido mediante javascript. Supongo que habrán otras muchas maneras pero a mi ésta me pareció la más eficiente y cómoda de mantener.

Bueno vamos a ello. Nos dirigimos a Personalizar, y luego a Diseño-->Edición de HTML. Damos a Expandir plantillas de artilugios y buscamos la siguiente línea de código:
<data:post.body/>
Y justo antes de dicha línea pegamos el siguiente código:

<!-- INICIO CODIGO AÑADIDO PARA AÑADIR POST RELACIONADOS -->
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div class='similiar'>   
         <div class='widget-content'><br/>
         <h3>ALGUNOS ARTÍCULOS RELACIONADOS</h3>
         <div id='data2007'/><br/>
            <script type='text/javascript'>
               /* Variables globales del script */ 
               var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
               var maxNumberOfLabels = 3;                                               // Numero maximo de categorias (etiquetas) a mostrar relacionadas con el post
               var maxNumberOfPostsPerLabel = 10;                                       // Numero maximo de artículos a mostrar para cada categoria (etiqueta)
               var labelArray = new Array();                                            // Array de categorias (etiquetas) mostradas

               /* Funcion que crea la lista de post para una categoria en concreto */
               function listPost(json)                                             
               {
                  var ul = document.createElement(&#39;ul&#39;);
                  var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ? 
                     json.feed.entry.length : maxNumberOfPostsPerLabel;                 
                  for (var i = 0; i &lt; maxPosts; i++)                                 
                  {
                     var entry = json.feed.entry[i];
                     var alturl;
                     for (var k = 0; k &lt; entry.link.length; k++)
                     {
                        if (entry.link[k].rel == &#39;alternate&#39;)
                        {
                           alturl = entry.link[k].href;
                           break;
                        }
                     }
                     var li = document.createElement(&#39;li&#39;);
                     var a = document.createElement(&#39;a&#39;);
                     a.href = alturl;
                     if(a.href!=location.href)
                     {
                        var txt = document.createTextNode(entry.title.$t); 
                        a.appendChild(txt);
                        li.appendChild(a);
                        ul.appendChild(li); 
                     }
                  }
                  for (var l = 0; l &lt; json.feed.link.length; l++)
                  {
                     if (json.feed.link[l].rel == &#39;alternate&#39;)
                     {
                        var raw = json.feed.link[l].href;
                        var label = raw.substr(homeUrl3.length+13);
                        var k;
                        for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
                        var txt = document.createTextNode(label);
                        var h = document.createElement(&#39;b&#39;);
                        h.appendChild(txt);
                        var div1 = document.createElement(&#39;div&#39;);
                        div1.appendChild(h);
                        div1.appendChild(ul);
                        document.getElementById(&#39;data2007&#39;).appendChild(div1);
                     }
                  }
               }
               /* funcion que crea una nueva categoria */
               function searchLabel(query, label)
               {
                  var script = document.createElement(&#39;script&#39;);
                  script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39; + label + &#39;?alt=json-in-script&amp;callback=listPost&#39;);
                  script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
                  document.documentElement.firstChild.appendChild(script);
               }
               /* Codigo principal del script */
               <b:loop values='data:posts' var='post'>                                   // Se recorren todos los post de la pagina actual (sólo debería aparecer el post a tratar), y en cada uno de ellos...
                  <b:loop values='data:post.labels' var='label'>                         // ...se recorren todas sus etiquetas, y para cada una de ellas...
                     textLabel = &quot;<data:label.name/>&quot;;                         // ...Se toma el nombre de la etiqueta;
                     var isTest = 0;                                                     // Vale 0 si la etiqueta que estamos comprobando no está en el array de Categorias relacionadas con el post (se verá a continuación) o 1 si está
                     for (var i = 0; i &lt; labelArray.length; i++)                      // se recorren todas las categorias incluidas ya en el array de Categorias relacionadas con el post.
                        if (labelArray[i] == textLabel) isTest = 1;                      // Si la etiqueta que estamos comprobando está incluída isPost debe valer 1
                     if (isTest==0)                                                      // Si la etiqueta que hemos comprobado no está en el array...
                     {
                        labelArray.push(textLabel);                                      // ...se añade y,...
                        if (labelArray.length &lt;= maxNumberOfLabels)                   // ...si aun no hemos llegado al maximo de categorias a mostrar...
                        {
                           searchLabel(homeUrl3, textLabel);                             // ...Se crea una nueva categoria
                        }
                     }
                  </b:loop>
               </b:loop>
            </script>
         </div>
      </div>
   </b:if>
<!-- FIN CODIGO AÑADIDO PARA AÑADIR POST RELACIONADOS -->
Después sólo queda modificar algunos parámetros al gusto. Por ejemplo el título de la sección (ALGUNOS ARTÍCULOS RELACIONADOS), el número de categorias a mostrar, el numero de artículos por categoría,... Para eso basta con echar un ojo a los comentarios del código e ir probando.


Salu2,
elSant0

ALGUNOS ARTICULOS RELACIONADOS

0 comentarios:

Publicar un comentario

Escribe aquí tus valoraciones, dudas, sugerencias,... Son sólo unos instantes y ayuda a mejorar el blog.