Embeddable Javascript Widget
Capital FM in London are once again hosting a big summer concert at Wembley Stadium - The Summertime Ball.
There's a shedload of activity happening on the site as a result and Facebook & Twitter were abuzz as the artists were announced - the #STB hashtag even made it into the global trending topics.
My involvement has been minimal as I've been beavering away on other things. I did, along with m'colleague Mr. Sam Rayment, build an embeddable widget for easy syndication of news.
As the Summertime Ball approaches the widget will be dispaying more artist announcements, ticketing updates and then (probably) teasers about the running order and any special surprises that partygoers could expect. Throughout the day the editorial team put in a superhuman effort to keep the site bang up-to-date with onstage hpotos, backstage interviews and all the latest gossip.
This is the widget....
The idea behind the widget is to encourage third party sites to display the news and (in terms of increasing our google juice) to embed links back to the capitalfm.com domain. We're all about the backlinks, baby - and especially about the deeplinks i.e. links to URLs other than the root domain URL.
The embed code looks like this:
<div id="g_radio_widget_1" style="width:300px;">
<h2>
<a href="http://www.capitalfm.com">
CapitalFM</a> Summertime Ball</h2>
<div id="g_radio_news_1"> </div>
<p><a href="http://www.capitalfm.com/summertime-ball/">More Summertime Ball</a></p>
</div>
<script type="text/javascript" src="http://www.capitalfm.com/widgets/summertime-ball-2011.js">
</script>
In future we'll be hoping to offer widgets focussed entirely around specific artists and maybe even around 'content type' - latest interviews maybe? Latest videos?
It was a fun little thing to develop. The javascript is simple DOM methods and the data is embedded in the JS file itself, there's no AJAX call to load the data - the file has a relatively near-future expires date. The CSS is also simple but with every definition flagged as '!important' - that was something that felt wrong, but the only way to ensure that the styles don't get clobbered by the cascade. This is a technique that Twitter use in their widgets and I've seen similar code in widgets that pull in data from flickr and last.fm.
Related links
Latest Posts
New Launch: Global Radio App
5:35p.m., 3 Sep
The new Global Radio App for iPhone and iPad was released a little over two weeks ago (20 August) and ...How The sort() Method Of An Array Works
1:17p.m., 2 Dec
... or "What I What I Learned from the Exercise In Futility, Part 2". (This follows on from my earlier ...Custom Constructor With An Unknown Number of Arguments
10:19p.m., 30 Nov
...or "What I What I Learned From An Exercise In Futility, Part 1" - how to enforce the 'new' keyword ...Muppets Birthday Card
5:47p.m., 28 Nov
Emma loves The Muppets. She even has her own Muppet who we call Emma Too and who was born at ...