Granola Share

Granola Share is a way for you to brag just a little bit about the positive environmental impact you are making. It is also a call to action for others to follow your example, install Granola, and start saving the planet. Granola Share is an API for accessing your total savings information from all of your registered machines. This information can then be embedded in your website, telling the world how much energy you've saved.

How can I use Granola Share?

Enabling Granola Share

The first step is enabling Granola Share on your account management page. When you enable Granola Share, a unique ID will be generated. You will use this ID to access your savings information.

The Granola Share API

The Granola Share API is very simple. To get your data, you perform a GET request on a URL with your opt-in ID: 

http://api.grano.la/rest/v2/services/savingscalculator/[YOUR_GRANOLA_SHARE_ID]/text

The data is returned in JSONP (i.e. is well-formatted JavaScript) format, expecting the existence of a JavaScript callback function with name "gshare_callback". Here is an example of the response: 

gshare_callback({
        "group":{
          "total_kwh_saved":"6.320872890763",
          "number_machines":"5",
          "average_percent_saved":"0.42523799538612"
        },
        "status":0
      });

It is up to you to provide the appropriate gshare_callback function and handle the data.

API Example

Perhaps the simplest way to incorporate Granola Share into your website is using a <script> tag to load the Granola Share response and jQuery to rewrite DOM elements with the returned data. Here is an example of doing just that:

MiserWare is doing its part to save the world. Shouldn't you?

Granola by MiserWare


...and, of course, the code: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>Badge example</title>
</head>
<body>
<!-- This example uses jquery (http://jquery.com/) to handle its dynamic request -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script >
  <div id="badge" style="background: #f3d8e6; width: 160px; padding: 8px; text-align: center;">
    <p id="fallback_str">MiserWare is doing its part to save the world. Shouldn't you?</p>
    <p style="display: none" id="data_str">MiserWare is doing its part to save the world, having saved 
      <span id="kwh"></span>kWh of energy across 
      <span id="nr_systems"></span> systems (
      <span id="saving_pct"></span>% average CPU energy saved)!
    </p>
    <p>
      <a href="http://grano.la"><img src="https://grano.la/img/logo.png" alt="Granola by MiserWare" />
      </a>
    </p>
  </div>
<script type="text/JavaScript">
function gshare_callback(data){
  // Fill in the data string
  $("#kwh").text(Math.round(data.group.total_kwh_saved*100.0)/100.0);
  $("#nr_systems").text(data.group.number_machines);
  $("#saving_pct").text(Math.round(data.group.average_percent_saved*1000.0)/10.0);
  // Then replace the fallback string with the filled data string
  $("#fallback_str").css("display", "none");
  $("#data_str").css("display", "block");
}
</script>
<!-- The server response will be a call to the gshare_callback function with the response data as an argument -->
<script src="https://api.grano.la/rest/v2/services/savingscalculator/94088/text" type="text/javascript"></script>
</body>
</html>