Enabling users to share content to social media sites

Last week we made a small change to our online calendar, adding social media sharing features. This means it is easier for readers of our online calendar to tell their friends and contacts about events. In our calendar, if you click the “share this” button, it slides out this drawer:

There are a number of pre-made DHTML widgets out there that are easy to use, but don’t provide quite the user experience we would like to have. Furthermore, they don’t share the content as cleanly and aren’t event specific. So we made our own functionality. It isn’t rocket surgery, but some notes on what we did may prove useful for others.

Sharing to calendars
Because this is an online calendar, sharing events to other calendars are very important. We already have an iCal feed for our calendar, and it is already set up to share specific events rather than all events, we just hadn’t been using that feature. The new sharing widget does so, simply by passing the proper event ID to our iCal page. A user can download this .ics file and it should work in Outlook, Sunbird, or iCal.

We also added sharing to google calendar. Google has an event publisher guide that documents how to share events to gCal. Compared to most other sharing solutions, gCal is more complicated. The main thing we had trouble with was formatting the date properly. Google prefers the date in what it calls “UTC format”, but I cannot find documentation anywhere showing what google uses is actually UTC format. What UTC format actually appears to be is the ISO 8601 time formatted without any punctuation. This is very similar to what the iCal format uses internally. Thankfully, since we were already calculating this for the iCal format, Nate was able to easily pass me this info for each event. With that, it is simply a matter of putting together the various components of the URL:

gcalURL = 'http://www.google.com/calendar/event?action=TEMPLATE&text='+encodeURIComponent(share_eventTitle);
gcalURL += '&dates='+startDate+"/"+endDate;
gcalURL += "&sprop=website:"+encodeURIComponent(location.href)+"&sprop=name:Walker%20Art%20Center";
gcalURL += "&details="+encodeURIComponent(share_eventDesc);
gcalURL += "&trp=true"
if (theLocation){
	gcalURL += "&location="+encodeURIComponent(theLocation);
}
window.open(gcalURL);
return false;

Sharing to social media sites
MySpace and Facebook both have specifications for how to share events to each of them, documented here and here, respectively. For Facebook, it is important to modify your page to include the meta tags it requests. When you share to Facebook, it doesn’t pass a description or image via the URL. Rather, Facebook scrapes the referred page to ascertain the description and images. Using the Meta tags gives much better results than whatever Facebook’s scraper comes up with. Most of the time, if you rely on their scraper, it will come up with some chrome images from your site rather than actual content images.

MySpace doesn’t scrape the page like facebook, so it’s important to construct a friendly description, with an image, if you can. We put a linked image along with the first few sentences of text for the description we pass to MySpace. Here is the format MySpace uses:

http://www.myspace.com/index.cfm?fuseaction=postto&u=YOURURL&t=YOURTITLE&c=YOURDESCRIPTION&l=3


We also “share” to twitter. There isn’t really sharing per se, on twitter, but you can pre-assemble a tweet for someone. Simply pass someone to http://twitter.com/home/?status=YOURTWEET. We assmble the event title, a reply to our twitter account, and a twitter-friendly shortened URL. Like this: “2008 British Television Advertising Awards @walkerartcenter – http://bit.ly/3c60xK”.

To get the friendly URL, we’re using bit.ly, one of the many URL shortening services available. However, bit.ly has a handy, well documented, API that does JSONP, allowing us to get around cross-site scripting issues.

Sharing to bookmarking sites
Sharing to Bookmarking sites like delicious (formerly del.icio.us, we miss the old URL) is quite simple. These are the formats for Delicious, Google Bookmarks and Yahoo Bookmarks, respectively:

http://delicious.com/save?jump=yes&url=YOURURL&title=YOURTITLE
http://www.google.com/bookmarks/mark?op=edit&bkmk=YOURURL&title=YOURTITLE
http://bookmarks.yahoo.com/toolbar/savebm?u=YOURURL&t=YOURTITLE&opener=bm&ei=UTF-8

Yahoo Bookmarks like to be opened in a pop-up window, but it isn’t strictly necessary. Always remember to urlencode text that is being passed into the URL, since there are many reserved characters in the URL. Javascript provides the encodeURIComponent function to do this.