Counterpunch: Returning to Serve+Destroy

Nov2011

With the tennis season finally coming to an end, I finally had the opportunity to redesign Serve+Destroy. The new theme includes a tennis insignia in tandem with a green colour scheme. The site is a statistics manager that allows users to post their scores and see how they rank. Stats can be displayed in several different ways; e.g. by Wins, Points or Win Percentage.

In order to make it easier for users to share their scores, I added the ability to post a match result to Facebook. By clicking the Facebook Heart icon, anyone can post a link to their profile that includes the players, the score, the conference and the location of the match. This feature uses the Facebook API Feed Dialog. You can use PHP to place variables within the Javascript, so that each post shared to Facebook is unique. For example, the code for Serve+Destroy is the following:

<a 
   style="text-decoration:none;border:none"
   href="http://www.facebook.com/dialog/feed?app_id=189340417803807&
   link=serveanddestroy.com/standings.php?conf=<?php print $confid; ?>&
   picture=http://serveanddestroy.com/images/tennis-insig.jpg&
   name=Serve%20%2B%20Destroy&
   caption=<?php print $confname; ?>%20Conference%20%2D%20Tennis%20Standings%20Updated&
   description=<?php print $scores['winningteam']; ?>%20defeated%20<?php print $scores['losingteam']; ?>
      %20<?php print $scores['rf']; ?>%2D<?php print $scores['ra']; ?>
      %20%28<?php print $scores['wincomments']; ?>%29%20at%20<?php print $scores['field']; ?>&
   message=Ace!&
   redirect_uri=http://serveanddestroy.com/standings.php?conf=<?php print $confid; ?>">
LINK</a>

The result looks like this:

Here’s an example of a conference page:

Deploying the FB API Feed Dialog is great for adding a social media component, making it easier for people to share items on your website.