Oxford Talks Embed Widget¶
Web Managers¶
An example widget to get you started with embedding talks in your own webpages can be found here:
https://github.com/ox-it/talks.ox-js-widget
The widget uses JavaScript to write a table, list or calendar view of selected talks to an HTML page. You can specify the criteria to select the talks you want.
This is a very basic guide for web managers and integrators, developers can probably skip to the Parameters Reference at the end. For the calendar view, the widget uses a JQuery plugin, FullCalendar; comprehensive documentation for that can be found on the FullCalendar website - http://fullcalendar.io .
Installing and Configuring the Widget¶
Installation¶
- Download the latest files (instructions on downloading from the github repository in this guide)
- You will only need to tweak the files in the widget folder - embed_ox_talks.js and embed_example.html (embed_ox_talks.min.js is a minified version of the JavaScript).
- However, to get things up and running quickly, place both the widget directory and the libs directory in a single directory on your computer or web server
- You are now ready to test the widget by opening and viewing embed_example.html in your browser
Defining your selection of talks¶
You do this in the HTML page
- Open embed_example.html in a text editor
- The main work is done in the <script> tag at the bottom of the page
- To customise your selection of talks adjust the
var params
section in the <script> tag. Full instructions on how to do this are given in the Parameters Reference section. - Remove the first set of ‘//’ to activate a particular parameter
Changing how the talks are displayed¶
- In embed_example.html you will see three functions in the <script> tag at the bottom of the page - delivering a table, a plain listing of talks and a calendar view:
showTable( params ); //appends to body, since no selector specified
showList( params, "#embedded-talks" ); //appends to the specified element
oxtalks.showCalendar( params, "#embedded-calendar" ); //appends a calendar to the body
- All have the option to specify the id of the HTML element you would like to populate, and some example elements are provided in the middle of the page:
<h1>Example of embedding</h1>
<div id="embedded-talks"></div>
<div id="embedded-table"></div>
<div id="embedded-calendar" style="max-width:800px"></div>
- Once you’ve finished testing, you can delete the divs you don’t want. Remember that, if you choose the showTable option you will probably want to specify the element you want the table to appear in.
- If the actual output of the listing or the table is not to your liking you will need to investigate the JavaScript file embed_ox_talks.js in more detail and adjust the
buildList
orbuildTable
functions
Changing the calendar view¶
- You can adjust the way the calendar displays in the
var calParams
section in the <script> tag in embed_example.html - It is also possible to add more parameters, for a complete overview of the range of parameters go to http://fullcalendar.io/docs/
Downloading from Github¶
The embed widget javascript and example html page are available on Github - this is a repository of code which makes it easier for developers to collaborate and store versions of their work.
Parameters Reference¶
The web page embed-example.html uses information you provide to build your selection of talks.
Note
Speakers, venues etc are searched via their ID - check the instructions on how to find the IDs you need.
- from : date string (‘dd/mm/yy’), required
- Start date for the list of talks.
- Format as
'dd/mm/yy'
- Or use the keyword
'today'
to get upcoming talks
- to : date string (‘dd/mm/yy’), optional
- End date for the list of talks.
- Format
'dd/mm/yy'
- speakers : array of speaker IDs as strings, optional
- For a list of talks by one or more specific speakers
- Format for one speaker
['f8ecded3-d2af-4585-bd3b-5cd7440795b9']
- Format for more than one
['f8ecded3-d2af-4585-bd3b-5cd7440795b9','7d5e6f9a-d2d0-4185-9cf6-eaf0073cbf34']
- venues : array of oxpoints IDs as strings, optional
- For a list of talks in one or more specific venues
- Format for one venue
['oxpoints:59444038']
- Format for more than one venue
['oxpoints:59444038','oxpoints:55095840']
- organising_departments : array of oxpoints IDs as strings, optional
- For a list of talks in one or more specific organising departments
- Format for one department
['oxpoints:23232596']
- Format for more than one department
['oxpoints:23232596','oxpoints:23232740']
- topics : array of FAST topic URIs as strings, optional
- For a list of talks on one or more specific topics
- Format for one topic
['http://id.worldcat.org/fast/1097048']
- Format for more than one topic
['http://id.worldcat.org/fast/1097048','http://id.worldcat.org/fast/864329']
- url : url string, optional
- For testing purposes, overrides the API url
- page_size : integer, optional
- Specify the number of talks to appear per page
- Format
4
Note
- individual parameters are joined by AND in the query whereas two or more values given in the arrays are joined by OR.
- an array comprises square brackets and a list of items separated by commas
- make sure each of the IDs, dates or keywords you provide is given as a string i.e. it is set in inverted commas
- if you aren’t using one of the parameters, either remove the line completely, comment it out with ‘//’, or make sure it is set to
null
(for a date) or an empty array[]
How to find IDs for locations, units and topics¶
To get a customized listing to display in the embed widget, you need to supply Oxpoints (locations/units) and FAST (topic) IDs. There are several ways to find these.
Inspecting Oxford Talks URLs¶
The simplest way is to look in Oxford Talks.
If you can find a talk assigned to the department or topic you are interested in, then hovering over, or clicking, the links will allow you to extract the ID from the URL:
http://talks.ox.ac.uk/talks/topics/id/?\ **uri=http://id.worldcat.org/fast/1036509**
http://talks.ox.ac.uk/talks/department/id/\ **oxpoints:23232612**
If you can’t find what you’re looking for - there are some other options:
Searching for Oxpoints IDs¶
Search http://maps.ox.ac.uk for the location or department. The address in your browser address bar will contain the Oxpoints ID.
Alternatively, use the Mobile Oxford API (http://api.m.ox.ac.uk) e.g:
http://api.m.ox.ac.uk/places/search?q=radcliffe
Searching for Topics¶
Search via the Online Computer Library Center interface: http://fast.oclc.org/searchfast/
- Identify the term you want to use
- Then locate the Permanent Link under Links to Full Record
Alternatively, the Talks API provides a search for Topics e.g.:
http://talks.ox.ac.uk/topics/search?q=neuroscience