How to display the lists of all posts on a Blogger blog?

Question

I have a blogger blog, but I'm a little lost with their API. I would like to know if it's possible to create a page which list all the posts of my blog.

I found some answers on the Internet, but most of them doesn't work anymore :(

Another question I have : it is possible to work with the db without using javascript? I may be wrong, but I think most of the widgets uses AJAX (it call some JSON to get all the info and displays them in JS).

Thanks !

Solution 1

To list all blogposts, you don't need to access Blogger API. Using blog's feed and a snippet of Javascript can do that for you.

Working Example can be seen here: http://codepen.io/yaqoob/pen/GqJDy/

Here is the Javascript Code:

<script type="text/javascript">
var postTitle=new Array();var postUrl=new Array();var postMp3=new Array();var postDate=new Array();var postYear=new Array();var postMonth=new Array();var postYearMonth=new Array();var postYearMonth2=new Array();var postTanggal=new Array();var postLabels=new Array();var postBaru=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;var month2=["January","February","March","April","May","June","July","August","September","October","November","December"];function loadtoc(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var m=a.feed.entry[h];var e=m.title.$t;var l=m.published.$t.substring(0,10);var p=m.published.$t.substring(5,7);var g=m.published.$t.substring(8,10);var n=month2[parseInt(p,10)-1]+" "+m.published.$t.substring(0,4);var c="/"+m.published.$t.substring(0,4)+"_"+p+"_01_archive.html";var j;for(var f=0;f<m.link.length;f++){if(m.link[f].rel=="alternate"){j=m.link[f].href;break}}var o="";for(var f=0;f<m.link.length;f++){if(m.link[f].rel=="enclosure"){o=m.link[f].href;break}}postTitle.push(e);postDate.push(l);postUrl.push(j);postYearMonth.push(n);postYearMonth2.push(c);postTanggal.push(g)}}}b();displayToc2();document.write('<br/><a href="http://feeds2.feedburner.com/YourFeed" style="font-size: 11px; text-decoration:none; color: #616469;">Subscribe to Our RSS Feed and Get all the updates On the Fly</a></br/>')}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postYearMonth[b];document.write("<p/>");document.write('<p><a href="'+postYearMonth2[b]+'">'+temp1+"</a></p><ul>");firsti=a;do{document.write("<li>");document.write("["+postTanggal[a]+'] <a href="'+postUrl[a]+'">'+postTitle[a]+"</a>");document.write("</li>");a=a+1}while(postYearMonth[a]==temp1);b=a;document.write("</ul>");if(b>postTitle.length){break}}};
</script>

And Here's the Javascript Callback.

<script src="http://domain.blogspot.com/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc"></script>

Replace blog's link your own.

Solution 2

Hi here i Find best solution

Make HTMl JAVA/SCript widget

and simple post the code, it works great

<div><ul id="postList12"></ul></div>

<script type="text/javascript">

var startIndex = 1;
var maxResults = 100;

function sendQuery12()
{
   var scpt = document.createElement("script");
   scpt.src = "/feeds/posts/summary?alt=json&callback=processPostList12&start-index=" + startIndex + "&max-results=" + maxResults;

   document.body.appendChild(scpt);
}

function processPostList12(root)
{
   var elmt = document.getElementById("postList12");
   if (!elmt)
      return;

   var feed = root.feed;

   if (feed.entry.length > 0)
   {
      for (var i = 0; i < feed.entry.length; i++)
      {
         var entry = feed.entry[i];

         var title = entry.title.$t;

         for (var j = 0; j < entry.link.length; j++)
         {
            if (entry.link[j].rel == "alternate")
            {
               var url = entry.link[j].href;

               if (url && url.length > 0 && title && title.length > 0)
               {
                  var liE = document.createElement("li");

                  var a1E = document.createElement("a");
                  a1E.href = url;
                  a1E.textContent = title;

                  liE.appendChild(a1E);

                  elmt.appendChild(liE);
               }

               break;
            }
         }
      }

      if (feed.entry.length >= maxResults)
      {
         startIndex += maxResults;
         sendQuery12();
      }
   }
}

sendQuery12();

Comments

[Admin]

Thanks, this is exactly what I needed. But here again, this we get datas from the client side. Can't we do it directly from the server ? Anyway, I will use your script :)

[yaqoob]

@kdamazic We are bound by the limitation of blogger. There isn't any Server side access, the only access we have is the XML Templates of the Blogger API. Nothing else, so the JavaScript is the only option.

[Han]

This will fetch the whole post contents which is not necessary. Access /feeds/posts/summary as pointed out by another answer.