Build a popular posts widget with Flybase

· Code flybase ·

On the home page of this site, there's a populate posts widget, I use the same widget on my main personal blog and also on the Flybase Blog.

It works great, it uses javascript to store page views inside a Flybase database and then outputs them in a handy little table which is also easy to edit.

I thought I'd share how this is set up so you can add it yourself.

Getting started

First, you'll need a Flybase account so head on over and signup if you haven't already.

The Brains

Create a file called popular.js, and update it with your flybase credentials. That's it.

One thing this file does is check the current URL and only display the popular posts if on the home page /:

$document.ready(function () {
    var url = document.location.pathname;
    var title = document.title;
    if ( url === "/" ){
        var page = getParameterByName("page");
        if( page === "" || page === "1" ){
            var popular = new mostPopular().getPages( $("#popularpart") );
    }else {
        //  not home page so let's record the url count.
        var popular = new mostPopular().updatePage(url, title);

You can adjust that url check easily enough if you wanted it displayed on a sidebar for example like I did with the Flybase blog.

Or if you just wanted to use for tracking page views, you can disable the getPages section entirely.

The Beauty

Next, let's add our CSS, create a file called popular.css

The Bones

Finally, here is our sample.html file:

Inside your own HTML file, you really just need these four important lines:

<link rel="stylesheet" type="text/css" href="popular.css">  
<div id="popularpart"></div>  
<script src=""></script>  
<script type="text/javascript" src="popular.js"></script>  

Where ever you place the <div id="popularpart"></div> is where the popular posts will show up.

The End

One thing I've been doing after saving a couple records, is using the manage schema section in Flybase to make the URL field unique, this is optional but handy and it's what indexes are there for.

That's it, you've got a plug and play popular posts widget to take and play with and expand on however you want.

This widget doesn't care about what platform your site is on, be it static site, Ghost, WordPress, does not matter one tiny little bit.

About the Author: Roger Stringer

It's all about finding that Work-Life Balance.

I spend most of my time solving problems for people, and otherwise occupying myself with being a dad, cooking, coding, speaking, learning, writing, reading, and the overall pursuit of life. I live in Penticton, BC.

Learn More
Roger Stringer
  • LinkedIn
  • Reddit
  • Google+
  • Pinterest
  • Pocket
Comments powered by Disqus