Using PandoAPI.js Installed Cookie Check

scott — Mon, 30 Jul 2007 13:00:57 -0400

In addition to providing package info service, the PandoAPI.js javascript library also provides a Pando "install" check service. We (Pando) set a cookie named "installed" in the pando.com domain whenever we determine a user has Pando installed. Because it runs from a pando.com domain, PandoAPI can inspect this cookie. If a user has this cookie set, you can be reasonably sure they have Pando installed. If they do not, they still may have Pando installed but have removed the cookie.

To use this service on your own site, you pass callback function to the PandoAPI.hasPando() method. The callback function takes a single argument. This function is then called by the PandoAPI method, with the argument set to true or false depending on the status of the installed cookie. This allows you to modify the content of your pages with javascript depending on the cookie status. In this example we'll use this method to prepend pando:subscribe? to pando channel subscription links for users who have this cookie set, to provide a one-click subscription experience for Pando users.

First, we'll need to make sure we include the Pando javascript API in our <head> section:

<script type="text/javascript" src="http://cache.pando.com/soapservices/PandoAPI.js"></script>

Then, the below script does the following:

Uses the PandoAPI.hasPando() method to store a boolean variable with the result from the hasPando method
Defines a list of links indexed by their DOM id
After the window loads, rewrites links with appropriate pando:subscribe? URLs if the Pando installed cookie is detected

You can follow along with the comments:

<script type="text/javascript"> // Assume Pando is not installed pandoInstalled = false; // Pass a simple callback function that sets pandoInstalled to true if cookie is present PandoAPI.hasPando(function(i){ if(i == true) pandoInstalled = true; }); // Define list of channel feeds and pages var subscribeLinks = { 'pandomonium': { 'channelPage': 'http://channels.pando.com/channel/pandomonium', 'channelFeed': 'http://feedburner.pando.com/pando/pandomonium' }, 'projectpedal': { 'channelPage': 'http://channels.pando.com/channel/projectpedal', 'channelFeed': 'http://feedburner.pando.com/pando/projectpedal' }, 'rocketboomhd': { 'channelPage': 'http://channels.pando.com/channel/rocketboomhd', 'channelFeed': 'http://feedburner.pando.com/pando/rocketboomhd' } }; // Do not try to use pandoInstalled until the page is loaded; // the callback function may not have run yet and we want to // make sure our links are ready to modify window.onload = function(){ // If Pando is installed, rewrite the links if(pandoInstalled == true) { // For each link for(channelId in subscribeLinks) { // Find the link to modify link = document.getElementById(channelId); // Change the href attribute to a pando:subscribe? link with the feed URL link.href = 'pando:subscribe?' + subscribeLinks[channelId]['channelFeed']; } } } </script>

Then, in the body of your page, define your links with the appropriate id and with URLs that will work if javascript is not enabled:

<ul> <li><a href="http://channels.pando.com/channel/pandomonium" id="pandomonium">Pandomonium</a></li> <li><a href="http://channels.pando.com/channel/projectpedal" id="projectpedal">Project Pedal</a></li> <li><a href="http://channels.pando.com/channel/rocketboomhd" id="rocketboomhd">Rocketboom</a></li> </ul>

A version of this script lives on a stand-alone page here. Feel free to view the source and borrow what you need and ask any questions below. (This page also includes a server-side cookie inspection so you can tell when viewing the page whether you have the Pando "installed" cookie set, for testing purposes).

Pando Developer Tools - Using PandoAPI.js Installed Cookie Check - Comments

Using PandoAPI.js Installed Cookie Check