The OctopressThemes Blog

news and articles from octopress themes

How to Add a Popular Posts Plugin on Octopress

A popular posts(or a top posts) section is literally present on every blog on the internet. It recommends quality posts to your readers. Take a look at Jason Cohen’s blog, Rob Walling’s blog and Nati Shalom’s blog. Sadly Octopress don’t have a popular posts asides section. Octopress Themes has created a popular posts plugin that does that.

Installation

Installation instructions are available on the Github page. The plugin is covered in tests, documented in tomdoc, and works. Feel free to try it.

How it works

The popularity of each post is calculated by its Google page rank. Page rank is an authoritative source of page popularity. How did we get the page rank information? There are many browser plugins that shows you the page rank. There is no official Google API to query for page rank. What they did is to make use of the unofficial api from Google toolbar to make queries. For the popularity posts plugin, we make use of the PageRankr gem to query for page rank information.

The popularity posts section is generated with the site. You don’t have to generate it separately. It is a static page. As your Octopress blog is a static site, we thought the best way is to generate a static page. Page rank is only updated every 3 months. Your popular posts won’t change from hour to hour. A static page is sufficient.

The plugin comes with a caching mechanism. As it make page rank queries, the returned result is stored in a file. When your Octopress blog is generated the next time, the plugin gets the page rank result directly from the cache. This makes site generation a lot faster. Caches are made to expire in 1 month.

Diving into the source code

How did we generate the page? Let us do a brief code walkthrough. Those interested in Jekyll plugin development will find this useful. Do refer to the source to understand the context.

As you already know, Octopress builds on Jekyll. Jekyll has 2 classes: Post and Site. They represent the blog post and the blog site respectively. First, we added a page_rank method to Post. The page_rank method returns the page rank of the post. It also performs caching.

Hooking it up

Next, we try to hook on to the site generation process. In the Site class, there is the read method. In the original Jekyll implementation, it reads the blog posts and stores them in references. We wrote a method that sorts your blog posts by page rank, and set it to a popular_posts reference. We then make use of the alias_method to hook it to the original read method so that it gets executed. Now information on popular posts is stored.

Next we need to generate the HTML. Jekyll makes use of the Liquid templating language to generate the HTML. In essence, Liquid takes a template, and replace Liquid markup with values that are passed to it. Similarly, we need to pass in the popular_posts value to our template. Again we make use of alias_method to hook it to the site_payload method in the original implementation. The site_payload method prepares the values for passing into the Liquid templates.

Octopress currently runs plugins defined in the plugins folder. To install, we need to copy the plugin to the plugins folder.

So that is how it works. To develop plugins, it helps to understand Jekyll code. Please contact me should there be problems with the plugin or if there are any questions related to this post.

Comments