Pages

Wednesday, January 11, 2012

36

Add post titles to Older and Newer Post links

Update June 27th 2012: new version here, I suggest you consider using it instead of this.

When you open a Blogger blog post, there are links to Newer Post, Home, and Older Post at the bottom of the page. Unfortunately the Newer and Older post links only contain text "Newer Post" and "Older Post", not the actual post titles. Wordpress, from where I migrated to Blogger, can display the post titles. But not Blogger.

Already done, but...

I started thinking, if I could make a hack to display those post titles also in Blogspot blogs. Some googling revealed that this had already been done. I think ETBlue was the first author of that hack, here's Blogger forum post about that. Later it was repackaged and republished by Bloggersentral and WEB.SILOG.. The hack is quite clever, it uses jQuery to load the previous and next posts and uses jQuery selectors to get the titles. Good for me, I thought, saves the me trouble of making a hack.

...it skews the stats! 1 --> 3

After having the mod installed for a couple of hours I noticed, that I had many three-hit visits in my blog. Then I realised, that loading two extra posts by jQuery results in two extra stats hits for an opened post! That may not worry everyone, but I did not like that at all. So to the drawing board, after all.

My first version

So blog posts cannot be read from browser without causing stat hits. I uninstalled the ETBlue/WEB.SILOG./Bloggersentral hack and started devicing my own. My first quick & dirty solution was to parse the url, and create a "pseudo title" from that, so for example:

Url http://yabtb.blogspot.com/2011/11/return-of-better-recent-comments-gadget.html becomes "Return of better recent comments..." and http://yabtb.blogspot.com/2011/11/welcome-to-yabtb.html becomes "Welcome to yabtb". If url is so long, that it might be cut, it is cut once more (to make sure it is not full title) and ellipsis is added. See function urlToPseudoTitle in the hack source, if you need something like this.

This was quite nice solution and works especially on English blogs. And it is much faster than jQuerying two extra pages. I was satisfied for a couple of hours.

But then I noticed a glitch in my Finnish blog. In Finnish language there are letters ä and ö (a with dots, o with dots), which are converted to "a" and "o" in the post url. So if I have title "Monet kipulääkkeet lääkekannabista koukuttavampia", and its url is http://mspotilas.blogspot.com/2012/01/monet-kipulaakkeet-laakekannabista.html, the pseudo title becomes "Monet kipulaakkeet...". Pseudo title is still readable without the dotted letters, but is a bit funny. Once again, back to the drawing board...

The solution

Script cannot read blog posts without stats hits, but it can read blog feeds. Actually I did already something like this in my recent comments gadget: load the post feed and collect post url - post title pairs, to be later used to convert urls to post titles.

It is possible to read up to 500 entries at a time from the Blogger feeds. Most blogs aren't that big, so the limit of 500 entries will be most of the time sufficient. But one could easily add another line to the script to fetch entries from 501 to 1000. And as a fallback, if script did not get post title from feed, for reason or another, it creates a pseudo title from the post url (see previous chapter). Reading the feed entries might take some milliseconds, so the script is executed (0,5 seconds) after page is fully loaded, so it won't slow down page load.

Demo (this blog)

Installing the hack

This hack is quite easy to install, although it requires template editing. I use jQuery in this hack, mainly for simplicity (much easier to execute something at window load, select elements, etc.). So you need jQuery. Check your template, and if it does not have jQuery, insert this before </head:>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
The previous/next links need some styling, so that post titles fit better. For example something like this in Simple template; add these to the styles section of your template (or use Template Designer|Advanced|Add CSS):
.blog-pager-newer-link {background-color:transparent !important;padding: 0 !important;}
.blog-pager-older-link {background-color:transparent !important;padding: 0 !important;}
#blog-pager-newer-link {padding:5px;font-size:90%;width:200px;text-align:left;}
#blog-pager-older-link {padding:5px;font-size:90%;width:200px;text-align:right;}
If you don't have Simple template, test and change styles if needed. Then find </body> and insert this code (just) before it:


Save the template, and the hack is installed!

Fine tuning Home link position

Home link is not centered on blog's front page, last page, newest post and oldest post. Add this CSS to center the link properly:
.home-link {left:0px;position:absolute;margin-left:250px;text-align:center;width:60px;white-space:nowrap;}
#blog-pager {min-height:2em;}
Values work with 560px wide text area (250x2+60=560), change accordingly if needed. If "Home" text is very wide in your language, you may also have to change the values (test and see if it works).


Hope you like this hack! It is installed for example in this blog.

Update June 8th 2012: Blogspot uses local domains (like "blogspot.fi") in next/prev links but not in feed. I added two lines to deal with this: lines 34 and 41 are new.
Update June 27th 2012: new version here.
[Hide comments] - [Show comments]
Click on a single comment to hide/show its text

36 comments:

Paul Crowe said... [reply]

Hi,

Great tutorial and as you say the first time i have seen this without errors.

I have shared this on Spice Up Your Blog with due credit to this post - http://www.spiceupyourblog.com/2012/02/post-titles-older-newer-links-blogger.html

I dont see a contact button here but would love to get in touch.Maybe you could contact me via the link on my site.

Paul Crowe.

Nirmal Shah said... [reply]

Wonderful tip there, found on SpiceYourBlog yet I've bookmarked your's for further more great hacks :)

MS-potilas said... [reply]

@Paul Crowe Great you liked it, and thanks for linking. I'll drop you a note so you'll get my email address.

Nirmal Kumar said... [reply]

Thanks for the hack. Came across your blog through stylifyyourblog.

Yusup Chandra said... [reply]

Thanks for sharing this tutorial. I have implemented in my blog as well. I'll check out your work in future.

Sam Routledge said... [reply]

Fantastic hack. I got the code from SpiceYourBlog, but I checked out this link to see if I *needed* the Json-based function, since the other one seemed to work fine on my blog.

You do know that the JSON-based one doesn't truncate the post title, correct? I wasn't sure if that was intentional.

I changed it a tiny bit so that the title text would display smaller and in a different color than the "Older Link >>" text, and it's perfect! thank you so much!

MS-potilas said... [reply]

@Sam Routledge
Hi Sam,

Yes, the json gets the whole title, and I let the title flow on multiple lines. On some blogs it might be better to truncate it. Very good that you made customization to the hack, so that it suits your blog and liking. :)

Duy Pham said... [reply]

500 and more is too heavy, I just younger than 3 with 2 times to get feed :D

Fahad said... [reply]

Hi,
An awesome hack for blogger blogs, I personally loved it.
I've shared it at My Blogger tips
http://www.mybloggertips.com/2012/03/add-post-titles-to-older-and-newer-post.html

I've given you all the credits.
Cheer!

Fahad.

Sandy said... [reply]

What if my template does have jquery already though? What do I do then?

MS-potilas said... [reply]

@Sandy Hi, then just don't apply the first part of the hack, where one would copy the one line of code which loads jquery. Although it won't break your blog if you load it twice, but it is just extra in that case.

Mark Alonzo said... [reply]

thanks for this hack but it doesnt work for my blog. I recheck everything and i follow all your steps clearly but nothing happen. what wrong?

MS-potilas said... [reply]

@Mark Alonzo Hi, be sure you put the main code before </body> (not before </head> as in some hacks). And this hack won't work with dynamic templates.

Taufik Nurrohman said... [reply]

@Duy Pham Yeah, this is an ugly Blogger feed problem. Can we get the start-index of the current post from the URL? So we can apply start-index querystring to JUMP!

MS-potilas said... [reply]

@Taufik Nurrohman
I checked this too, but the index is not available. I also thinked about the published-min and -max parameters, but could not get anything working from there, either.

One, but a pretty complex way would be to make a google appengine app, which would get the titles and store them in memcache for faster access.

That app could use the feed, like this hack, or it could get the titles just using the urls of next and previous post. Because results would be cached, this would not cause any significant increase in stats.

MS-potilas said... [reply]

@Duy Pham Thanks. What an ingenious way of first using published-min with max-results=0 to get the index of the current post, then getting the maximum of three posts. When I tried published-min I tried to do everything in one step, and no luck. Your solution is very good!

Twinkler said... [reply]

Hello, Sir. I have tried this code but nothing happens. I don't know why...

MS-potilas said... [reply]

@Twinkler
Hi, try the newer version:
Add Post titles to Older and Newer Post links – reloaded

and there's also version with thumbnail images and summaries:
Add post titles, thumbnails, and summaries to Older and Newer Post links.

Hope you get it working :)

Twinkler said... [reply]

No... Nothing again. And there is a mess in another gadget when I run the code.

MS-potilas said... [reply]

@Twinkler Hi,

I tried the hacks on you blog's source code. They started working after I loaded jQuery script. You must add that to your template first (see the instructions).

Twinkler said... [reply]

Unfortunately, I can't do it.

What I did:

1. Copy the jQuery script and paste it before /head.
2. Copy the code and paste it before /body.

Nothing happens. Only that mess with the Google news gadget...

MS-potilas said... [reply]

@Twinkler
I saved a page from your Computers' tricks and tips blog and installed the hack in the html file, along with jquery loading, and the script run ok, and I did not see it messing the gadget. I don't know why it won't work on live blog, so I'm out of ideas, sorry.

Twinkler said... [reply]

Thank you for your efforts. When you say "load the jquery" you mean that you just copy and paste that line in the template?

The Rested Life Ministries said... [reply]

Hi,

Thanks for the great tutorial.

I've implemented this version into my site, but I'm facing a little problem.

The code works perfectly in the first 100 plus posts. But it seems that after that, it will kick into PseudoTitle mode. You can see what I mean if you look at the older posts.

I know that the limit is 500 posts, but the site only has a total of 350 posts, so I was wondering if I could trouble you to give me some advice on how I can make it show the title properly all throughout the site, even after it surpasses 500 posts.

Here's the url

https://www.therestedlifeministries.org

Thanks a ton.

/Eugene

PS: the newer versions don't work for me because I have the site running through a secure CDN.

MS-potilas said... [reply]

@The Rested Life Ministries
Hi, I think this version: http://yabtb.blogspot.fi/2012/06/titles-to-older-newer-links-reloaded.html should work in spite of your CDN. It uses the correct titles for all posts.

The Rested Life Ministries said... [reply]

Hi, thanks for pointing me in that direction.

I did try that out, but my site's situation is a little unique. You see, the CDN is secure, but the host server is not. So the newer scripts will attempt to retrieve data from the http and not the https version of the site, and that will give me Mixed Content Errors.

Nonetheless, I managed to find a way around it and posted a little description here.

https://education.therestedlifeministries.org/2015/12/adding-post-titles-to-your-post-navigation.html

Do drop by and take a look at my work around and give me your thoughts on the solution if you have any. I really am unschooled and self-taught and would certainly welcome any and all guidance.

Much obliged and many thanks.
/Eugene

MS-potilas said... [reply]

@The Rested Life Ministries
Hi Eugene,
I think your solution is good. It requires a bit manual work but that saves a lot of code. I have also noticed that not always 500 posts are pulled even requested. That is a good observation that feeds loaded from blogger.com may work better than from "your own" domain.

The Rested Life Ministries said... [reply]

Thanks for the comments, and for dropping by. Isn't it strange that using the blogger code seems to work better? I always thought it was just a simple 301 redirect. Oh well... Thanks again for all the help. Really appreciate your solutions.

/Eugene

The Rested Life Ministries said... [reply]

@MS-potilas

Hi,

Could I ask a follow up question?

You know when blogger came up with their global domains thing, you inserted this piece of code to ensure that your solution would still work.

href = href.replace(/\.blogspot\.[^/]+\//, ".blogspot.com/");

I was wondering, what solution would you suggest if I want to swap my http to https? Would this work?

href = href.replace(/\http\:[//]+\//, "https://");

/Eugene

MS-potilas said... [reply]

@The Rested Life Ministries
Hi,
that would work, but I suggest you use this simpler one:

href = href.replace(/\http\:\/\//, "https://");

Post a Comment

Related Posts Plugin for WordPress, Blogger...
See the hack
for this dynamic
views icon: