The ‘plugin space’ is an area in the web-based console which we let radio stations customise. This area is fixed in size but there are plenty of ways you can use it. The size is 360 pixels wide by 517 pixels tall. If you’ve upgraded to the 3.1 console, your plugin space will be fixed at this size unless you switch on the responsive plugin space option.
You’ll need a web developer who has access to the Radioplayer console files on your web server. This article gives you some ideas and has been written for a technical audience.
The basics
Open index.html in an HTML editor – Dreamweaver, Brackets, even Notepad and Nano are all good. Scroll down and you’ll see an HTML comment
<!--
*
* Plugin Space Starts here
*
-->
By default, you will see an image beneath this space. You can remove this image and replace with your own markup
Inserting a Facebook widget
A good use of the space is to put in a facebook widget. Facebook provide plenty of widgets but the one to use is a Like Box. Click on this link and follow the steps to create your widget then click the Get Code button. One you have the code in front of you, paste it into the plugin space.
Inserting a Twitter widget
It’s now quite a lot harder to do this. Login to you twitter account then click https://twitter.com/settings/widgets . Click New then configure the widget by setting the source as User Timeline and you may or may not want to exclude @replies. The width of the widget will shrink to the size of its container but if it doesn’t, create a
with a fixed width no larger than 360px and lock the snippet inside there.
Inserting a programme schedule using Google Calendar
We’ve seen many stations using their plugin space to show a programme schedule. Here’s how… Assuming you have a Google Account for an email address at your station, visit Google Calendar. When the calendar loads, on the left hand side you should see a list titled My Calendars. Click the down arrow next to it and choose Create New Calendar. Give it a sensible name and ensure the timezone is set correctly to United Kingdom/London.
It might take a moment to create but once done, you’ll be back in the main calendar window. On the left, locate your new calendar from the list, click its down arrow and choose calendar settings
Towards the bottom of the next page, you’ll see it says Embed this calendar and to the right, a link that lets you Customise the colour, size and other options. Click that. On the next screen, adjust the width and height to match the plugin space dimensions and, if you wish, change the colours, the default view and such like. When you’re happy, click the Update HTML button then copy and paste the snippet into your plugin space.
Inserting a slideshow from Flickr
To do this, the first step is to ensure you have all the photos you want in your slideshow, saved in Flickr as a Set. On Flickr, choose You > Albums. Locate the set and mouse over the share icon. In the dialog that appears, click Embed and then from the size list, choose Medium 360×240. Turn on the header and footer if you wish. At the top of the dialog box, there will be a snippet of HTML. Click it to copy to your clipboard. Cut and paste this into the plugin space in your console.
Other options
Weather – a useful blog post here shows you some weather providers who provide widgets.
Local travel – from the Highways Agency
Responsive plugin space for 3.1 consoles
If you have upgraded to the 3.1 console, you can build a responsive plugin space if you wish. It should be able to cope with the three breakpoints we have – the native 360 width, screens narrower than 360px and then fluid up to 720 max width. The primary experience should be designed for the 360 width and then adapt accordingly for larger or smaller screens. Regardless, be careful that your plugin space does not scroll as the console height is fixed and plugin spaces that end up being taller, will make the web player look broken. To turn on responsiveness edit index.html and locate
var isResponsive = false;
Simply switch the flag to true and this will turn off the fixed layout.