EDIT: This is no longer the way I get fitbit steps in my website,
Please see this new post on how I currently get data on my wesbite
http://p337.info/blog/?p=88
Below is the old post that serves historical purposes only.
Ive had a Fitbit Flex for roughly 3 months now, and enjoying every step and achievement that comes along with the band, and the motivation provided by the web dashboard.
However last month I had decided to give my website a complete redesign, and with my new wristband, I felt that I had the ability to display some personalized dynamic content in the form of my daily step total would be awsome, as I had done a similar things when displaying my “Last online” status with the Steam Web API and PHP. Boy was I in for a surprise.
The process for the Fitbit API was immensely more complicated than that of the Steam Web API, Using an authentication process called OAuth, Essentially the process you see when you “Login with Facebook” on several websites, meaning that your PHP application needs to send the users attention onto Fitbit to authenticate the access to their data.
Not to mention, this required me to install “Oauth” PERL script onto my Website, Which I could not do due to the limitations set by my free web hosting setup. This had me trawling through countless 3rd party OAuth PHP Libraries over the last 3 weeks, Which I understood barely any of.
Eventually I found an Oauth setup utilising Google Spreadsheets and Google Scripts, which allowed me to work around my free web-hosting limitations; technical steps being outlined below
If you’re following everything I’ve said up until now, you’re most likely familiar with API’s and more specifically Want to actually use it. Please note: You will also need an understanding/access to a PHP capable server for the implementation of this.
What to actually do
Step 1: Go and get a API key from their website,
(recommending you get a “Browser” and “Read only” API key – See more at wikihow)
Ste
p 2: Login to your Google Drive Account, (as we will be using a Google Script to retrieve Fitbit data for us) and create a new spreadsheet.
Step 3: Once you’re in your new spreadsheet, we will need to open up the Gogole Script Editor (This will open up in a new browser tab)
Note: Once in the script editor; a “Blank project” will be fine to create if you haven’t ventured into script editor before)
Step 4: I used the script from the following GitHub repository (or additionally copy fitbit.js from here) and paste it in a new Blank Google script (remove any code in the blank project you just created), and paste Fitbit.js into the code area.
Step 5: Select and Run “renderFitbitConfigurationDialog” from the drop down menu on the top toolbar, and press the button with the Play symbol.
Some pop-up windows for google will open; Click accept or next on all of the authentication steps to allow the script access to your newly made Google spreadsheet
Swap browser tabs back into your Spreadsheet; you should see a configure window shown below,
After entering your Consumer and Consumer Secret key like the above screenshot,
Make sure everything else is as you desire, and select “Save Configuration”
Go back into script editor and run the “Authorize” Function
Then proceed to run the “refreshTimeSeries” function to populate your data
Swap back to your spreadsheet, and we should see the below setup.
Cell B3 is the value were interested in as it displays our daily total (and gets replaced each day)
Step 6: We need to make sure that our spreadsheet stays active and our steps get updated regularly, so head back into the Google Script Editor, and click “Current Project’s triggers” button
My triggers look like this
(This will update my spreadsheet from the Fitbit site every 30 minutes)
Step 7: Getting a cell to display on our website
Heres the part where we need to get our value out of the spreadsheet,
Whilst on our spreadsheet = Under “File> Publish to web”, we can extract a cell in a webpage.
Copy your URL seen above, we will need it for our PHP manipulation.
(Open the URL in a new browser window if you want to check it is the right cell)
Step 8: Create a new php function or page, and use some basic sub-stringing to get your “B3 Cell” in a form you can use!
function printFitbitSteps() {
$content = file_get_contents(“PUBLIC URL FOR GOOGLE SPREADSHEET CELL B3”);
$content = substr($content, strpos($content, “<td class=’s0′>”)+16);
$steps = substr($content, 0, strpos($content, “</tr></table></div>”));
echo $steps;
}
The above code reads the HTML given to us in the URL as a variable, and splices it with sub-stringing so that only our step total is left over!
You should now be done,
This assuming you can utilize PHP on your website, and have a knowledge of how it works, but the basic steps are in those lines of code above. Its probably considered dirty coding, but it works for me.
Here is the footer from my website, focusing on the “Steps today” value.
Hopefully this can help someone out!!
References:
http://quantifiedself.com/2013/02/how-to-download-fitbit-data-using-google-spreadsheets/
https://github.com/loghound/Fitbit-for-Google-App-Script
Special Thanks to Manuel Lemos who put in heaps of effort to try and teach me his Oauth PHP Library (I just wasnt smart enough)
