For our dear users, you should see much faster page load times and an overall better experience as we also squashed many lingering bugs as part of the transition. Please let us know if you run into anything that’s not working as expected!

Inspired by one of our favorite shows, the Office, FriendFit will soon let you log Dwight Schrute’s favorite funtivities! Choose from an eclectic selection of Eastern Pennsylvania workouts including:

Grab your seed packet and shovel. Grow some delicious beets!

Watch a table-making demonstration, then grab your tools.

It’s in the name!

From purple to black belts, all are welcome.

At least one of the participants will log this activity.

Shunning, Paintball, Bat Trapping, Manure Distribution, Forming Alliances, Birthday Decorating, Sitting at Mega-Desk, Notarizing, and Beet Wine-making

Look for these soon when you log post a new workouts. Have another activity to suggest? Leave a comment!

The Design

First, we had to answer “Where should the checkbox go?” and “How should it look?”. Here’s what we came up with, simple and concise. Writing the HTML took less than a minute.

Now it was time to answer “What happens when the checkbox is clicked?”. We assumed most users would be connecting to their Twitter accounts for the first time, so we focused on this interaction. Here’s a breakdown of how it works:

• Ask the user for permission to connect with their Twitter account.
• If they accept, leave the checkbox checked.
• If they don’t give permission, uncheck the box and show some sort of error message
• Alternatively, if they had already connected their Twitter account, just leave the checkbox checked.

OAuth and Twitter API

Next, we needed to learn how to authorize a user’s Twitter account. Twitter uses a protocol called OAuth that lets users give publishing permissions to other websites. When you authorize FriendFit, we receive a special token that lets us tweet on your behalf. We need to store this token (a string of letters and numbers) in order to use it later.

This was our first time using OAuth and the Twitter API, and thankfully we found a great PHP library, TwitterOauth, to handle both. Using this library, we created a new pop up page to handle the entire connection process. This page first sends the user to Twitter, then saves the authorization token after the user accepts. To make things even friendlier, we give users the option to add their twitter username to their profile after they’ve connected. In order to store this new data, we needed to add a few new fields to our database.

User Session & Login

Now that we’ve saved the user’s twitter token, we needed to change in the site’s login code. On login to FriendFit, we know needed to check if the user had connected to their Twitter account. To avoid asking the user to verify Twitter again, we added some Javascript to let the page know that the user has already verified their Twitter account.

URL shortening

Now that we have permission to tweet on a user’s behalf, we needed to figure out what were going to tweet. At a minimum, we wanted to share the type of activity, mileage, total time, calories burned, and a link to the new post. Because of Twitter’s 140-character limit per tweet, we now needed a way to create short links to individual posts. You may be already familiar with URL shortening services such as Bit.ly, but we felt that having the FriendFit brand in the URL was important. So we added a simple redirection page to handle these new links, making the appropriate change to apache’s .htaccess file. The new links look like this http://friendfit.com/a/lhj, and the Apache redirection rule is as follows:

Actually Tweeting

At this point, we have both the permission to tweet and the tweet content. What’s left is actually publishing the new tweet! This required a few changes to our “FitBlog_saveNewPost()” function, both to accept a flag indicating the user’s desire to tweet, as well as actually sending it to Twitter. Since we use AJAX to save new posts, this required changes on both the server-side and client-side code. After much testing, everything worked seamlessly.

Conclusion

So now you know that often a checkbox is so much more than just a checkbox. Here’s a diagram I’ve seen a few times that neatly summarizes this point (sorry, I can’t seem to find the original source!). We, as programmers, must always look for ways to simplify the user experience and hide complexity from our users. This is the point where interfaces start to feel like “magic”.

So, what was your biggest implementation challenge for a so-called “small change”? Please share in the comments below.

New and existing users can use FriendFit from the Facebook app, on the FriendFit.com site, or both! All of your data, including logged activities and routes will show up in both places. Privacy controls are applied consistently to both. Try the new FriendFit Facebook app now and leave us some feedback so we can improve.

Other updates

We also took an opportunity to freshen up the FriendFit site in a few places. Fitness blog navigation is now a bit cleaner and compact, especially when the monthly or weekly summaryis displayed (see below). There’s still room for improvement, but we feel that this is a step towards simplicity.

Also, user profiles now show a more useful activity summary. This lets you quickly see what sports and fitness activities someone enjoys, and also gives you more info about each sport. Now you can see the total number of posts, total mileage, and total time for each kind of activity.

With the modern means of transportation, communication, and work we find ourselves less and less active compared to our ancestors. They would walk, ride a horse, work all day on the farm or in a factory performing manual labor. Today’s cars, TVs, iPhones, computers, even Facebook all work together to nudge us towards an unhealthy level of inactivity.

People that sit for more than 23 hours a week, which is just about anyone with a desk job, have higher chances of getting heart disease. Besides scheduling in some time at the gym, here are three ways you can add exercise to your regular day:

1. Park farther away. When you park your car at work, the mall, and at the grocery store, park far away from the entrance. You’ll not only get some shopping done, but you’ll get some extra walking distance. It was observed that factory workers who parked their cars far from the entrance of the building worked better and felt healthier.
2. Lift weights during the commercials. Leave some weights next to your couch or easy chair. While you watch your favorite shows, use the commercial break to do some curls or leg lifts.
3. Take the stairs. Instead of using the elevator to go up one floor, use the stairs. For every ten steps up, you burn approx. 10 calories. Going down 10 steps sheds 5 calories. Let’s say each day you burn an extra 30 calories taking the stairs. In one week you’ll burn 210 calories, and 10,680 in one year. That means you can burn 3 pounds of fat (~3,500 Calories) each year by just taking the stairs. Not only will you feel better and contribute to your weight loss, but next time you feel like eating a donut you might think twice about how many steps it will take to burn it off.

Weekly & Monthly Fitness Blog Stats

Many of you have asked for monthly and weekly stats, and we listened! You can now view fitness blogs in one of three views: Weekly, Monthly, and All (which just shows the last 10 posts). View a summary showing the total number of posts, mileage, time, and calories burned for that week or month. You can use the arrows to move backwards and forwards in time. Just click the selected view in the menu below the green Fitness Blog tab. View your fitness blog now!

Track Effort & Motivation

We also worked to simplify the “Log a new activity” page and decided that it was finally time for the couch potato to retire. In its place, we now have color-coded dots to quickly keep track of how you felt during your activity. On the fitness blog post, you can see a single dot in the color chosen.

Sorted Route Lists

Our last update gave you the ability to rename routes, and now you can sort your route list by one of 3 options: date created, name, and distance. Just visit your route list and see for yourself.

That’s all for now! We’ll post some iPhone app screenshots soon.

New Fitness Activities!

We’ve added 13 new fitness activities (and one new category), including:

• Land Activities: Horseback Riding, Camping, Frisbee
• Water Activities: Kayaking, Canoeing
• Gym & Studio: Boxing, Gym Workout (for recording trips to the gym)
• Racket Sports: Ping Pong (aka Table Tennis), Squash, Racquetball
• Team Sports: Kickball, Field Hockey, Rugby, Ultimate Frisbee

Automatic Facebook posting

After encountering some issues with our last release, we’ve now added automatic posting to Facebook when you post a new activity. You can choose which posts go to Facebook by checking or un-checking the “Share on Facebook” checkbox on the new activity page.

As always, please contact us if you run into any issues.

Facebook working much better

As many of you may have noticed, we’ve had some Facebook account issues. This mostly happened because of Facebook’s new data tools and some bugs still needed to be worked out.

Calorie calculator

We saw many calorie calculators on the web when building our calorie tracking, and decided to build our own tool! Check out FriendFit’s calorie calculator to quickly estimate energy burned in your fitness activities.

Other Updates

• Embedded routes can now have miles or kilometers chosen by default
• New Twitter landing page explaining how we share fitness activities

Burned calories

A lot of you (especially personal trainers) have asked for calorie tracking and now it’s here! For each activity you do, we compute how many calories (or kJ) you burn. We calculate the calories based on the activity type, your speed (for running, biking, walking, etc), and your current weight.

To start tracking calories, save your weight information in the “Calories/kJ burned” section next time you log an activity. Once your weight is saved, we’ll use it for future actvitiy posts. Also, your weight is kept private and other users will only see the number of calories (or kJ) burned. If you need to change your weight, simply click “update”, enter the new weight, and click “save”.

If you use any social networks like Facebook or Twitter to post your fitness activities, calorie or kJ information is now shown in your post.

Heart-rate data

If you use a GPS device with a heart rate monitor, we now compute and show the average heart rate in your fitness blog post.

Here’s a sample of what your fitness blog data now looks like.

Other updates

• Route lists have been redesigned so you can see a quick preview, print, embed, or rename the route. Just click the arrow to open the extra route information.
• Once again it’s possible to rename your routes after saving them. We know this is going to make some of our users very happy!
• Fitness blog posts that use a route now let you see a route preview, route print and embed, just like the route list

We have a lot more planned for the website including planning group activities. You’ll see more fun and exciting updates in the near future. As always, please send us a message if you run into any issues or to let us know what you think of the new improvements. That’s all for now!

Twitter auto-posting

In addition to new leaderboards, we’re now much more Twitter-friendly. When logging a new activity, you can now automatically tweet it, too! Just click “Log an Activity” and click the checkbox next to the Twitter logo. When you click the box, a new window will open to take you through the authentication process. On the Twitter site, you must click “Allow” to let us post to your account. You’ll also find twitter information in your user profile.

We also added a checkbox so you can choose which activities you want to post to Facebook.

We hope you like these improvements and they make your FriendFit experience more fun, useful and easy. Enjoy the new features and as always, we’d love to hear from you. Send us a message if you run into any issues or want to share your ideas.