Need some development help

Hello! I’m looking for someone to either (a) help me get my head around using JS and handlebars to build a “most read posts” widget pulling data from the Clicky API, or (b) build it for me.

The Clicky API uses a simple GET to a URL with certain parameters, and returns in XML, HTML, or CSV. I want to parse the returned data into HTML for use in a widget.

I could write this in a minute in some older languages, but I haven’t done much Javascript, and have no experience with handlebars. (Well, very little.)

For someone with experience, this looks like a fairly simple programming task. So, let me know if you can coach me through it, or point me to some good examples – OR, if you can write it for a fee. Thanks!

This is an interesting idea, but I don’t think it’s as easy as it might seem.

First, doing this server side with Node and HBS would require modifying and maintaining Ghost core, which isn’t worth it imo.

Second, the next option would be to do this client side. There, you could call the Clicky API, parse the response, and update the DOM in the client. You could also call the Ghost content API for additional post data.

You could just append the elements to the DOM or use a custom HTML element. Again, either way this isn’t trivial because I think you’d need to add error handling and some basic state (loading, error, success) to make the widget robust.

3 Likes

Sorry Bruce, this is a little bit off-topic but you mentioned using Clicky.

I used to use Clicky years ago and what I miss about it is the browser extension that shows you at a glance the number of visitors currently on your website/s. This was useful for being alerted to the fact that your site was currently on the front page of Hacker News or something.

I’m not sure why other web analytics services do not have a similar browser extension. I wish they did. I currently use Plausible and have just begun trialing Fathom as well.

But more on-topic, I believe Ghostboard.io shows “most read posts”. I’m not sure if that is useful to you or not.

1 Like

As @TheRoyalFig mentioned you have two options which have their pros and cons:

  1. With backend processing, you need to go into core and add Handlebars helpers,etc. as Handlebars does not allow injecting code into templates. And a Ghost update can erase your updates, so you need to keep track of them and insert with every Ghost update.
  2. With frontend processing, it is possible to get the data you want, but there is a security concern, as you will need to use your sitekey(like a password) to grab data from Clicky. This option requires you to pass this sitekey to the client browser(as browser will make the GET request to Clicky), which means a malicious user can view and use your sitekey to grab any data exposed by this api. Clicky Analytics API documentation shows there is no update endpoint (as of now), so they can not manipulate your data, but they can view any of the endpoints. So this one basically depends on how much of a concern this is to you.

A third and a very elaborate option could be creating a backend service yourself (using Node.js & Express,etc.) and accessing Clicky API on the backend (so your password is kept on server-side) and expose whatever limited data you want to front end Javascript code. But this also means you need JS code for both frontend and backend

I was unaware of GhostBoard, so have signed up for a trial. I did write them about being able to pull a most-read list into a widget, but haven’t heard back.

Yes, I was thinking a client-side script. You’re right – error-handling would need to be in there, and possibly using state (although I was just going to assume Success :wink:).

I’ll probably close this thread, as I don’t think it’s going to happen. Thanks for your reply, though!

One other approach, which would be far less fancy would be to manually tag the most popular posts with a private tag like #popular. Then you could use the get helper to fetch those posts to populate the widget.

Suggestion for implementation - state maintained with an API exposed on Cloudflare worker with durable object, jQuery used to fetch from work to manipulate DOM and for updating state when page is loaded. More than happy to coach you through it.

Sounds interesting. I’m always up for learning more coding skills. However, I don’t have a Cloudflare account. (Site is hosted by another party, and I don’t have FTP access.) I assume I would need that account?

If the post view were a little more user-friendly, so I could see at a glance which posts had that tag and which ones needed it, I would probably take this approach, even though it’s more manual than I would like. But, having to open each story that needed the tag added or removed is more effort than I think this is worth.

1 Like

Re Cloudflare, yes you would need an account and there would be some small monthly cost.

Another strategy - update an JSON object with results from google analytic results and query this object in theme to update DOM accordingly. There appears to be a GAPI here Overview  |  Analytics Reporting API v4  |  Google Developers that could be used with Ghost admin API to update a Ghost page that could be exposed to Ghost theme. If you took this approach then to start the JSON object could be updated manually.

Happy to keep brainstorming. From a Ghost theme / javascript point of view the JQuery part of this would be straightforward. Maintaining state / API / batching would be language agnostic.