A while ago I did my Chronological post order hack, which simply reverses the order of the posts on the screen using javascript. That can be used to read the whole blog from start to end, like this.
Adam has in his Too Clever By Half blog a different solution that uses 3rd party services to manipulate and reverse the feed to be displayed in chronological order, but there are drawbacks in using (free) third party services.
A while ago the Blogger dynamic views were announced. Dynamic views use javascript and AJAX to read from blog feed, and display the entries.
All these things made me think, if the whole reversing thing could be done in Blogger, reading the feed and manipulating it by javascript, without third party services. And it could, I yesterday figured it out, see a demo here. I'll show you how you can do it. It is actually quite easy (once the code is ready), no template editing, for example.
Create a new page
Create a new page in your blog. Name it as you like. Edit the post as HTML (important!), and paste this code into it:
There are some configurable values in the script, which should be self explanatory. If you want, for small blogs you can display all entries on the same page (tested with ~200 entries). The maximum number of entries that this script can display is 500, because of limitations in Blogger feeds. The actual amount may be lower, and it depends how many entries are left in your blog's RSS feed and some Google caches (includeHistoricalEntries). You cannot know, before you try. Formatting of the posts' header and footer is very basic, you can make it better if you want, add social buttons, etc.
Save and test. You can see it in action here: Chronological post order from feed demo.
Not everything can be displayed, for example dynamic content that is generated by javascript. This is a limitation of (Blogger) feeds. That is why some code examples (pastebin.com snippets) don't show in the demo. If you need to display javascript content, too, then you'll better use the other chronological post order hack.
Reference: Google Feed API.
Update March 22th: Google loader no longer need API key. Article and code snippets simplified. Thanks to Adam who tipped me about this in comments. :)
Post Comments (Atom)
Click on a single comment to hide/show its text
40 comments:
MS, I have been watching these ingenious reverse-order hacks with great interest. I find myself a little confused, and I think it could be helpful for you to characterize them in terms of uses and drawbacks.
For instance, is this reverse-order hack better or worse than your previous one? If the answer is "It depends," on what does it depend?
Do you feel that these hacks are "ready for prime time" or are they still basically a kind of beta version that you are fixing based on user experience? (I notice that there seem to be some ongoing issues in the comments to your other hack).
Finally, do you think these hacks are likely to survive changes in Blogger or to browser technology?
At some point uncertainty becomes an obstacle to use. Should I do this, which method should I use, will it survive into the future--those sort of questions.
Oh yes, and that 500-post limit thing, which seems to be new and undocumented. Is there any way around that, do you know?
@Adam Hi, thank you for your message. I'll try to clarify the features and differences between these two hacks so it could be easier to choose.
The previous one lets Blogger generate the html for the posts, using Blogger template, so post appearance is exactly the same as in blog normally. All inline javascript (if any) in posts is run, all styles are exactly the same, etc. First Blogger template engine lays out the posts in html, then my script reverses the order. Blogger fetches the posts and generates the html, so there are no limits in post count or post contents.
This chronological hack from feed uses blog feed, pulls all entries + anything in google caches (they don't tell specifics about this includeHistoricalEntries API, so I don't know if the caches can go past 500 posts), then lays out the posts by composing the post html in javascript. Not using Blogger templates. And if your post has inline javascript, it won't be run.
I would say that the other hack is more "ready for production". I don't think Google/Blogger will change the "old" (layout) templates, which the script works with, so DOM should keep intact, and DOM handling in javascript is done in just basic javascript, no tweaks or anything that might break on browser update. Of course there is slight possibility that they change something so radically, that the script breaks, but that would be very difficult, with people having their customized templates, without breaking many other things at the same time. For future templates the script might not work, but for current, it should not break.
In the other hack's comments there should be no ongoing issues, I'm not aware of any, and I currently have no plans to develop it further (as I don't know what could be done more/better), unless any bugs should be found.
The feed hack, this one, has many good points, though. The best point is the easy installation - just put code on a blog page, no template changes. And, if you know javascript, you are able to change how the posts are output. Feeds are Blogger core technology, so they will be there in the future, and template changes (Blogger updates) cannot break this script. Downsides are the 500 post limit (assumed without better knowledge), and that the current output is not quite the same as in blog posts on main page, for example the footer lacks features. One could copy code from my sticky posts hack, there I implemented the footer further, with social buttons and all.
Feed hack uses documented blog feed and API for that, in just plain javascript, I think here either is nothing that should break on updates. These feeds are core technology. Probably I won't develop this further either, because I mainly use the other hack, but anyone can copy the idea/script and make it better, if current output is not what is wanted.
If javascript in whole is not going to change radically in future browsers and break most of the scripts "out there", which I don't think.
One good thing is that these two hacks don't have to be exclusive, like in this blog you can view chronological post order both ways. And neither of the hacks need third party services, everything that is needed is done in Blogger and user's browser.
@MS-potilas--Thanks, that does clear a few things up. Do you mean that your other reverse-order hack does not use the blog's feed? That's pretty important, since as you note Blogger seems to have capped the feeds at 500 posts.
But some of your comments in the post about that hack include a lot of instructions about the feed. So, I am confused about that. Do you think your first hack would work with blogs of more than 500 posts?
By the way, the "ongoing issues" I refer to come from the comments thread to your post about the other hack. There seems to be an issue with dates as rendered by some browsers, and maybe some other issues experienced by "Ratprincess." (Or maybe not--it's hard to say since no blog url is provided.)
Maybe those issues are not important or you have resolved them.
Your assumptions about javascript and the DOM being solid makes intuitive sense to me. On the other hand David Merriman's hack, on which you say yours is based, did not work for very long before browser changes prompted it to fail.
Third-party services are indeed a two edge sword. On the other hand they are for the most part immune to the kinds of things that did in Merriman's hack, core technology or no.
Personally I remain of two minds, though there has been a lot of aggravation and instability on the 3rd-party front this year.
Thanks again! And none of this is intended as criticism, except perhaps in the most constructive way.
@Adam
Other hack does not use feeds. Someone just asked about some peculiarity about blogger feeds, a bit offtopic, so I answered that.
I checked Ratprincess other blog, for which she gave the link, and the script worked on that blog (after giving correct url parameters). So I assume it works on the other, too, but the problem was with constructing the link right, which is essential, otherwise the script won't run and reverse the posts on the screen - without url parameter they just sit there non-reversed as Blogger normally outputs them.
David Merriman's hack did not work in the first place for Internet Explorers, because of ill DOM handling. Second this is that it worked/works only for those templates that were available at that time - not in newer templates anymore. The first break should not happen with my script, because DOM is handled cross browser friendly, with just plain javascript. If it breaks, then many apps on internet will break. The second might happen: Blogger creates new kind of templates, and script won't work on them. But it still works on current layout templates.
One other good thing, about both these hacks, is that they don't try to alter the basic structure of your blog (like if you changed the date of all posts). They are just kind of "lenses" which you put on, and then you see the underlying data in reversed order. If something breaks, at least everything works like it did before applying the hack(s). And maybe, just maybe, Blogger will have this chronological order built in, so we can ditch these hacks for good :)
Thank you for your feedback, I really appreciate it. I'm sure these conversations are useful to people who try to decide whether to use or which hack to use.
MSP,
Google now says this (at the link you provide):
"The Google Loader no longer requires keys.... you may simply remove the key parameter from your requests."
If this is right, I think this hack just got a little simpler! If not, you need to change the link.
@Adam Thanks Adam :) thanks for spotting that and you're absolutely right, the hack gets simpler. I'll update the article.
This worked perfectly on a blog I'm helping a friend with ... UNTIL I tried loading older posts and back dating them to 2010... Now it hangs up with "Loading, please wait..." displayed. The blog is a story that chronicals a trip around Australia and she wants it in order from first day to last... Is there a limitation to how far back teh script will search?
@Stol Jockey
Hi, there are no such limits, the script just reverses per page the posts that Blogger serves. Sounds like Blogger was having problems fetching the old posts, should be temporary.
@MS-potilas
Thanks for getting back to me.. Sadly I’ve waited patiently all day and the blog still just churns .. No Idea what could have happened. It worked yesterday exactly as advertised. Today i tried to add a few older posts and now it's just not working. I tried deleting everything and starting over from scratch and it still just churns. I've tried on multiple operating systems and several browsers... I can't figure out what I've (inadvertently) screwed up.
Here is the url
http://girlwithastickbt.blogspot.com
@Stol Jockey
Hi, I checked the blog, and at least now/here the page loads ok, and posts are in chronological order, http://girlwithastickbt.blogspot.fi/p/biggus-trippus.html.
I posted a question in the Google forum and began a question with the very helpful Adam. We've dealt with my original question and then I asked about chronological order (or reverse order). Based on his advice of 4 different methods, I selected your "500" and have actually got one of my trips established in reverse order. There is one problem, though and that is that each of my daily posts shows up, of course, as just the title and first sentence or two and then there is no "read more" type link to click on like I see on other blogs. Adam wasn't sure why this would be and suggested that I leave a comment here to ask you for any suggestions you might have.
The page I'm referring to is at marylynnestraveljournal.blogspot.com and is the page tab titled ITALY-2009.
I look forward to hearing from you!
@Mary Lynne Hi, the page seemed to work now, posts were fully shown, I tried it on Chrome and Firefox. Maybe you got it fixed already? Or are you using some other browser where the bug can be seen?
Thanks to Adam for helping you with reversing the posts. :)
@MS-potilas Mary Lynne originally had her Blogger feed set to "short." The "read more" link was present in her feed but not on in the web page generated by your script. I suggested she could change her feed to "full," which she has apparently done.
So Mary Lynn maybe has no complaint, but did you mean to leave off the "read more" link for truncated feeds?
@Adam and Mary Lynne
Ok, now I understand, thanks. In the feed in the content/summary field there isn't a more link, the script displays the field as is and if there were it would show. It would be quite complicated to make the script detect if summary/short feeds are used.
But if someone would want to use short feed in blog or summary feed url in script, the hack could be hacked :)
Like this: find line:
var entry = result.feed.entries[i];
After that line insert this line:
entry.content = entry.content + "<br><a href=\"" + entry.link + "\">Read more »</a>";
Also other text can be used instead of Read more ».
@MS-potilas
You're right, MS - it IS working now but rather than saying "read more" with a link, it's just showing the entire post. Which is fine although I may try the language you've provided in your reply and see what happens with that. I think with as many posts as I have with many pictures and, I admit, much verbiage, people might prefer the truncated intro and then link if the title sounds like something they're interested in. Plus, there would then be more titles included on each "page".
Thanks so much to both you and Adam for all the help I've received!
Mary Lynne
@MS-potilas
Just wanted to let you know I have now used the "read more" language you gave me and after several false starts, have my 2009 and 2010 trips set up in chronological order on their two pages, with "read more" links on each post.
Thanks so much!!
@Meiser
Hi,
the number of comments in an entry is not available in the results returned by Google feed API, see reference. So using this Google feed API method to get the posts it is unfortunately not possible to get the comment count.
About the order of the entries and the deleted entry showing, it is probably because of browser cache. Given time, browser will reload a new version of the feed, and the errors will go away. You can also try to change this line:
var feed = new google.feeds.Feed(feedURI);
to this:
var feed = new google.feeds.Feed(feedURI+"&_hash="+Math.random());
That change adds a random hash into the feed url, so browser will always reload the feed instead of using cache.
@Meiser
Yes, you are right, the feed could be read (only from own blog, not other blog addresses) using json-in-script format, then you get all the fields in the feed. But then the code should be pretty much redesigned. I'll see if I have time to try and do that, anyways it won't be until next week. :)
@Meiser
I threw this together quite fast, but it seems to work :) code here: http://pastebin.com/rknLZ7rx.
(and you were right again, it works also from other blogs)
@Meiser
Hi,
to re-reverse the post order, change line
for (var i = result.feed.entry.length-1-base; j < numPerPage && i >= 0; i--) {
to
for (var i = base; j < numPerPage && i < result.feed.entry.length; i++) {
To integrate it all into one page would require quite a lot coding. I suggest you have one page for chronological order and other for reversed chronological order, with links from one page to the other. And of course the blog's main page will have the normal reversed chronological order, displayed by Blogger.
@Meiser
For the first question, that is just a feature of pastebin - when you open the link, the codes are the same, but the latter can be edited and posted as a new paste.
About the second question: can you specify if it was the code you added that made the scripts not display? I could not fully read the code, some characters need to be escaped when code is posted in comments. I use http://www.htmlescape.net/htmlescape_tool.html. If you can post it again with code escaped, or give me a link to a demo where the code is in use, I can investigate it further.
@Meiser
Hi, nice additions in your code :)
External .js is good, but you can still use javascript in pages and posts, if you use post editor options, and change to "Use <br> tags. Then it won't break the code, and you have to use
<br> in html where you want a line break.
I think the problem is that in "json feed" there is <style> block before the text of post "Page d'accueil du blog". The "google feed" api might not have it for some reason, I guess it strips (some?) tags out of the feed.
Code gets the message text, including style block, then cuts the string from the beginning, resulting that <style> block opens, but never closes, so the footer of the post is not shown either.
I suggest if the "read more" is on, you first strip all the html tags out of the string. Then you can cut it using substring, and there will be no trouble with tags. You can see a nice example of stripping the html here: http://www.threelas.com/2012/02/basic-blogger-json-feed-api.html. Hope this helps :)
@Meiser
Hi, after investigating the samples, my best guess is that google feed strips out (at least) <style> and <script> blocks from the html. To make the json feed act similar/the same, style and script blocks should be stripped before the text is truncated, for example like this (variable name must be changed):
returnText=returnText.replace(/<script.*>[\w\W]{1,}(.*?)[\w\W]{1,}<\/script>/gi, "");
returnText=returnText.replace(/<style.*>[\w\W]{1,}(.*?)[\w\W]{1,}<\/style>/gi, "");
(from http://stackoverflow.com/a/8803657)
But I must warn you, even if your examples work after this addition, with both methods there is the possibility that html breaks. Substring method just breaks the text, between tags, inside a tag, inside a character entity (like &) where ever the index might point, depending on the post content. Cutting text with html tags, preserving the tags and valid html is not an easy task. There are some javascript (and jQuery) libraries for this.
So no easy answer, stripping <style> and <script> will do a lot, but there is still possibility of some error, in both versions (both google feed and json feed).
@Meiser
Hi, great that you got everything working. That line you asked about seems to be redundent nowadays. Back when I made the first hack with Blogger feeds, there was 1x1 pixel image added to every article's html in the feed, probably for collecting statistics (tracking pixel). Many templates have CSS borders for image, and so the image was clearly shown even with size 1x1. That regex replacement just removed all those 1x1 images.
I just checked and no 1x1 images anymore, in json or google feeds for Blogger (but for example Wordpress blog feeds still have 1x1 stats imgs, although the format is different so that line won't help).
Thank you for trying out these various methods. The issue I seem to be having is new posts do not show up. The code seems to properly order already existing posts, but anything new does not appear. I do not believe it is a feed problem as the new posts do appear when loading the feed in a reader. Any ideas?
@Anthony Alvernaz
Hi, I think it is partly feed, partly browser cache problem - browser caches the feed for some time, so javascript code gets the old version.
Try the modification described in this comment.
@Meiser
Hi, and thanks for the further development of the script. I noticed that the form does not work in Chrome (Ubuntu version, I did not try in Windows). It does not change page, just reloads the same page.
@Meiser Hi, everything else works on Chrome, but not the submit button with style "display:none" when you press Enter. It just reloads the page (full reload, like pressing F5).
I found something here in stackoverflow. You could try using "visibility:hidden" or detecting Enter keypress from keypress handler.
Here's another solution, positioning the submit button off screen.
Keywords I used for finding those two were "chrome hidden submit button".
@Meiser Hi, it works, but first time I press Enter, the page reloads. After that only the posts reload.
I think you could try adding "return false;" to the handler to prevent the page reload, in the .js file like this:
type=\"submit\" onclick=\"getValue();return false;\"
new code in italic. And same change for getValue2, too.
One other change in .js, now I can enter 0 to page number field, which makes all posts disappear. The lower limit should be 1 for page numbers.
I suggest you install Chrome to make the testing easier. :)
thankyou enormously! love the herb!
Hey! Im wondering about why all the hassle with the ASC url and adding it.
I tried modifying the if "asc" present with if (true) or removing the line but both solutions dont seem to work with dynamic views.. I found one that works with simple view, but dosent list any post past this date, and its a problem for me.. Is there a version of your code where its automatic? Modifying the "sidebar" dynamic view per say to reverse all posts? my blog is done in my case, I use it to lead in a story, and reading the last post first sucks.. so the easiest way would be to change to word press and post them in order, but I like the integration of the blog media, Id love to be able to include a reduced version of your template mod that does it with everyposts, instead of the ASC thing?
@noeffix
Hi, unfortunately these chronological post order scripts do not work in Blogger's dynamic views. So the options are to change to a non-dynamic template and use one of these two chronological order scripts, or to change to Wordpress. This script (Blogger posts from feed in chronological order), which is placed in a blog page, does not need that link constructing with ASC etc., the other script does need it.
Third option would be to change the date of every post so that the timestamps go in reverse order.
Amazing :d :)
I just tried copying and pasting your code into a blog post and what can I say? It just works !!!
Thanks very much
Joel
Hi !
Great job, it's working perfectly.
I've got a little question though. I'm trying to have a pages where post are ordered chronologically BUT from one label only.
As I have to copy the adress of the page into my menu, I have to give him the adress that appears in the preview (which works), but then I lose the search fonction (a href="search/label/example").
And for what I've seen on the page created through this method, I can only have a page with all the posts that I created. Is there a way to have only the page with my label ?
Thanks a lot !
@Nicolas J-Rey
Hi,
try changing this line:
var feedURI = "/feeds/posts/default";
to
var feedURI = "/feeds/posts/default/-/yourlabel";
Change "yourlabel" to the label you want to use, and then you should have only posts from that label.
@MS-potilas
Thanks a lot, it works perfectly !!
This script is amazing. Thank you! However, after I tried to change the "posts per page" it completely melted on me. It never leaves the "Loading, please wait." message. I came back here and recopied the original code, and it's still not working. Any ideas? Potential related note: I deleted posts from my blog, but they were still appearing on the page with this script. Could that have something to do with it? Thanks in advance!
It started working again... maybe my computer's just haunted >.>
12panel Now Offers 12 Panel Drug Test in Bulk at Low Prices. we offer a variety of tests that detect many types of drugs. We offer 12 Panel Urine Drug Tests, Drug Test Strips, Drug Test Cups, Drug Test Cartridges, Dip Cards, Oral Swabs Tests, and more. We also provide drug tests in bulk quantity or for single-use home tests at low prices.
See the hack to make the 'Post a Comment' link bigger.
Post a Comment