Google Script Programming tricks Useful by geetamamuni

Easy Ways to Display Gmail Unread Counter in Your Site

Just 2 days before we discussed how to display your Gmail Inbox counter in your site. So we already know how to fetch the counts and display them as textual or image form. This article is just a continuation of the previous article. Today we  will dig more into this, try to explore how these counts are fetched and will also see some more fancy ways to display those counters.

These counters will be very useful in some cases especially when you are trying to convey others about how many emails you are getting daily and how frequently you read your emails.


Lets see how this works


The heart of entire thing lies in Google Script. Without it, it wont be possible to easily fetch these counts. Here is a complete diagram to clear all your doubts.


Gmail Inbox counter

Everything is clear from above diagram, no need to explain anything. You can see the script in this spreadsheet. If you don’t know how to use it then just have a look on our previous article.

JavaScript code to fetch the data


Copy following lines of code in a notepad and save as .html

<script type='text/javascript'>
 function getReply(data) {
  var allMessages = data.feed.entry[0].gsx$allmessages.$t;
  var unreadMessages = data.feed.entry[0].gsx$unreadmessages.$t;
  var lastMsgReceived = data.feed.entry[0].gsx$lastmsgreceived.$t;
  
  document.getElementById("imageCounter").innerHTML="<image src=' https://chart.googleapis.com/chart?chst=d_bubble_texts_big&chld=bb|008888|FFFF88|Total: "+allMessages+"|Unread:"+unreadMessages+"|Last email|"+lastMsgReceived+"'/>"; 
 }
</script> 

<table style="margin-left:auto;margin-right:auto;">
 <tr>
  <td>
   <div id="imageCounter"></div>
  </td>
 </tr>
</table>
<script type="text/javascript" src="https://spreadsheets.google.com/feeds/list/0AlecLd2XqOqEdGRudnFnNDVKU3FRSFFmUXo0Y0Q1VkE/od6/public/values?alt=json-in-script&callback=getReply"></script>

Some more ways to display the counter


After you fetch your counts, there can be many ways to display them on your webpage. If you want to display them as an image, then Google Image Charts will make your work even easier.Just replace the text with red in above script with following text to get corresponding image counter.





document.getElementById(“imageCounter”).innerHTML=”<image src=’ https://chart.googleapis.com/chart?chst=d_fnote_title&chld=arrow_d|1|004400|h|Total: “+allMessages+”|Unread:”+unreadMessages+”|Last email|”+lastMsgReceived+”‘/>”;
document.getElementById(“imageCounter“).innerHTML=”<image src=’ https://chart.googleapis.com/chart?chst=d_fnote_title&chld=balloon|1|004400|h|Total: “+allMessages+”|Unread:”+unreadMessages+”|Last email|”+lastMsgReceived+”‘/>”;
document.getElementById(“imageCounter“).innerHTML=”<image src=’ https://chart.googleapis.com/chart?chst=d_fnote_title&chld=sticky_y|1|004400|h|Total: “+allMessages+”|Unread:”+unreadMessages+”|Last email|”+lastMsgReceived+”‘/>”;
document.getElementById(“imageCounter“).innerHTML=”<image src=’ https://chart.googleapis.com/chart?chst=d_fnote_title&chld=taped_y|1|004400|h|Total: “+allMessages+”|Unread:”+unreadMessages+”|Last email|”+lastMsgReceived+”‘/>”;
document.getElementById(“imageCounter“).innerHTML=”<image src=’ https://chart.googleapis.com/chart?chst=d_text_outline&chld=72F27A|18|h|000000|_|Total: “+allMessages+”|Unread:”+unreadMessages+”|Last email|”+lastMsgReceived+”‘/>”;
document.getElementById(“imageCounter“).innerHTML=”<image src=’ https://chart.googleapis.com/chart?chst=d_bubble_texts_big&chld=bb|008888|FFFF88|Total: “+allMessages+”|Unread:”+unreadMessages+”|Last email|”+lastMsgReceived+”‘/>”;


If you still want to dig more into Google Image charts then visit this dynamic icon page published by Google. For any queries drop a comment. 🙂


1 thought on “Easy Ways to Display Gmail Unread Counter in Your Site”

Leave a Reply

Your email address will not be published. Required fields are marked *