Thursday, 21 October 2010

Facebook, Twitter and other widgetry

One of the saving graces of any Uniservity administrator who wishes to make their platform more modern is widgets. These little code snippets can enable you to do any number of things in the area of bringing in external data in attractive ways and also create links to external services such as social networking sites. The code for the widgets is generally provided by the providers themselves, but you can also pick up a wealth of user-generated widgets from places such as Widgetbox. If you have ever embedded a YouTube video in Uniservity, then you already know how to embed widgets - you simoly copy the supplied code snippet, then paste it into the source editor of the Uniservity page where you want it to appear.
The integration of Twitter into the LiveRevise! microsite was fairly straightforward. The Twitter feed on the left of the front page (see interface tour in last post) was done using Twitter's Profile widget. The code provided by Twitter is copied to the clipboard when you click on the 'Finish & Grab Code' button, then in our case it was pasted into the custom navbar of the front page of the microsite. For the 'tweet' button which sits under the description on the front page, we grabbed the code from Twitter's Tweet Button page. This time, you set the options then manually copy the code from the little frame onto the clipboard and paste into the source editor of the Uniservity page where you want it to appear. Our Twitter feed is being used as an alternative to the News function of Uniservity for many reasons, not least because it allows us to update it from a range of devices and also pushes updates to the users, neither of which you can do with the Uniservity News function.
Facebook integration was a little more painful, but mainly because we had a very specific idea of what we wanted. The wiki for each subject area of the microsite is where students will be collaboratively constructing the understanding they are gaining whilst using the site and resources. This is the perfect place for them to shout about what they are doing to their friends on Facebook, so we decided we would like to add a Recommend button to the wikis so that students could give a shout out to their friends when they add something. The way to do this is to add a Like Button to the page in question. When the code was inserted on the wiki page, however, the page which was 'liked' or in our case 'recommended' (you can select either of these verbs in the button generator) was the LA platform, not the wiki in question or even the LiveRevise! microsite. In addition, the code grabs an image to represent the page you have 'recommended', which was also wrong. The only way to change these aspects of the resulting 'recommendation' is to use something called FBML or meta tags in the head section of the page the button is on. The problem being, Uniservity does not allow you to add in a head section to a wiki page, or any page for that matter. If you attempt to add something inside head tags, the source editor will strip it out as soon as you click on Apply. So a workaround was needed.
Our solution invloved using a webpage on a webserver that we have control over containing a redirect to the Uniservity wiki page and the necessary meta tags inside the head tags of the page. The code which constitutes one of these pages is below for you to use in a similar way if you so desire.

Again, aplologies for the poor formatting. All the meta tags which start with property="og: ... are the tags which tell Facebook where to link back to, what image to use to represent the link and what title to give the link in Facebook. The meta tag which begins equiv="refresh" creates an instant redirect when someone clicks on the link in Facebook. The image referred to is also stored in a directory on the webserver where this page resides, though there is no reason why you couldn't host it somewhere else, even in Uniservity if it is made truly public.
So in the end, we achieved what we set out to in a very convoluted way, but the result is transparent to the user. In the next post, I'll talk about the advantages and disadvantages of using custom navbars instead of the Uniservity standard ones and how to get around some of the disadvantages.

No comments:

Post a Comment