{"id":1761,"date":"2012-06-25T15:47:46","date_gmt":"2012-06-25T14:47:46","guid":{"rendered":"http:\/\/blogs.oucs.ox.ac.uk\/adamweblearn\/?p=1761"},"modified":"2013-08-28T14:25:54","modified_gmt":"2013-08-28T13:25:54","slug":"displaying-rss-twitter-feeds-on-html-pages-in-weblearn","status":"publish","type":"post","link":"https:\/\/blogs-new.it.ox.ac.uk\/adamweblearn\/2012\/06\/displaying-rss-twitter-feeds-on-html-pages-in-weblearn\/","title":{"rendered":"Displaying RSS (& Twitter) feeds on HTML pages in WebLearn"},"content":{"rendered":"

WebLearn has a built-in tool, News, for displaying RSS feeds; it is even possible to display feeds from Oxford Podcasts – these will feature an in-page media player for audio and audio-visual podcast display.<\/p>\n

Sometimes it is desirable to insert one or more newsfeeds within a regular HTML page. This is now easy to achieve in WebLearn.<\/p>\n

You should create an HTML page in Resources in the usual way. You must then add special HTML code to render a feed.<\/p>\n

To insert this code, switch to the ‘Source’ view within the editor; you may also find it useful to show a full screen version of the editor.<\/p>\n

\"\"<\/a><\/p>\n

The following code snippet will display the latest 5 blog posts from the WebLearn blog. To do this you must know the URL of the RSS feed, in the following example it is http:\/\/blogs-new.it.ox.ac.uk\/adamweblearn\/feed\/<\/em>, other examples are\u00a0http:\/\/feeds.bbci.co.uk\/news\/rss.xml<\/em> (BBC news feed) and http:\/\/search.twitter.com\/search.atom?q=@_markstewart<\/em> (Mark Stewart’s Twitter feed).<\/p>\n

An explanation of the configuration parameters will be given below.<\/p>\n

<!-- include jquery library -->\r\n<script\r\n  src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.7.1\/jquery.min.js\"\r\n  type=\"text\/javascript\">\r\n<\/script>  \r\n\r\n<!-- include zrssfeed functions stored in WebLearn -->\r\n<script\r\n  src=\"https:\/\/weblearn.ox.ac.uk\/access\/content\/public\/misc\/js\/jquery.zrssfeed.min.js\"\r\n  type=\"text\/javascript\">\r\n<\/script>       \t\r\n\r\n<!-- output the rss feed within a 'DIV' with id wl-blog\r\n     (you may use any name) -->\r\n<script type=\"text\/javascript<\/a>\">\r\n$(document).ready(function () {\r\n\r\n  $('#wl-blog').rssfeed('http:\/\/blogs-new.it.ox.ac.uk\/adamweblearn\/feed\/', {\r\n    limit: 5,\r\n    titletag: 'h3',\r\n  \u00a0 ssl: true,\r\n    linktarget: _blank,\r\n    media: true,\r\n    snippet: false\r\n  });\r\n});\r\n<\/script>\r\n\r\n<!-- here is the DIV where the feed will appear -->\r\n<div id=\"wl-blog<\/a>\">&nbsp;<\/div><\/pre>\n
This will render as:<\/p>\n
\"\"<\/a><\/p>\n
It should be pointed out that the above JavaScript used Google AJAX feeds and as such the newsfeeds are cached by Google. It would appear that there could be a couple of hours delay between updating the feed and the changes becoming visible.<\/p>\n
The ‘rssfeed<\/em>‘ function has a number of parameters. The following table is taken from http:\/\/www.zazar.net\/developers\/jquery\/zrssfeed\/<\/a>.<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Parameter<\/th>\nDefault<\/th>\nDescription<\/th>\n<\/tr>\n
limit<\/td>\n10<\/td>\nThe number of feeds to return.<\/td>\n<\/tr>\n
header<\/td>\ntrue<\/td>\nIf true, includes the header section containing the feed name and link.<\/td>\n<\/tr>\n
titletag<\/td>\n‘h4’<\/td>\nSpecifies the HTML tag for the feed title.<\/td>\n<\/tr>\n
date<\/td>\ntrue<\/td>\nIf true includes the feed date section.<\/td>\n<\/tr>\n
content<\/td>\ntrue<\/td>\nIf true includes the feed description.<\/td>\n<\/tr>\n
snippet<\/td>\ntrue<\/td>\nIf true the snippet short description is shown available when available.<\/td>\n<\/tr>\n
media<\/td>\ntrue<\/td>\nIf true displays media items when available.<\/td>\n<\/tr>\n
showerror<\/td>\ntrue<\/td>\nIf true and an error is returned from the Google Feeds API, the error message is shown.<\/td>\n<\/tr>\n
errormsg<\/td>\n–<\/td>\nReplaces the default friendly message when an error occurs.<\/td>\n<\/tr>\n
key<\/td>\nnull<\/td>\nOptionally use a Google API key.<\/td>\n<\/tr>\n
ssl<\/td>\nfalse<\/td>\nSupport for SSL. Set to True when using secure pages.<\/td>\n<\/tr>\n
linktarget<\/td>\n‘_self’<\/td>\nSpecifies the target for all feed links (‘_blank’, ‘_self’, ‘_top’, framename).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Note: In order to prevent ‘mixed content warnings’ one should always set the ssl<\/em> parameter to true<\/em>.<\/p>\n
Another example showing the first 10 titles in an <li> list format:<\/p>\n
<!-- output the rss feed within a 'DIV' with id wl-blog\r\n     (you may use any name) -->\r\n<script type=\"text\/javascript\">\r\n\r\n$(document).ready(function () {\r\n\r\n  $('#wl-blog').rssfeed('http:\/\/blogs-new.it.ox.ac.uk\/adamweblearn\/feed\/', {\r\n    limit: 10,\r\n    titletag: 'p',\r\n    date: false,\r\n    ssl: true,\r\n    content: false,\r\n    header: false,\r\n    linktarget: '_self',\r\n    media: true,\r\n    snippet: false\r\n  });\r\n});\r\n<\/script><\/pre>\n
This will look like<\/p>\n
\"\"<\/a><\/p>\n
The world is now your oyster<\/p>\n","protected":false},"excerpt":{"rendered":"
WebLearn has a built-in tool, News, for displaying RSS feeds; it is even possible to display feeds from Oxford Podcasts – these will feature an in-page media player for audio and audio-visual podcast display. Sometimes it is desirable to insert … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[295,105],"tags":[206,389],"class_list":["post-1761","post","type-post","status-publish","format-standard","hentry","category-web","category-weblearn","tag-content","tag-news-tool"],"_links":{"self":[{"href":"https:\/\/blogs-new.it.ox.ac.uk\/adamweblearn\/wp-json\/wp\/v2\/posts\/1761","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs-new.it.ox.ac.uk\/adamweblearn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs-new.it.ox.ac.uk\/adamweblearn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs-new.it.ox.ac.uk\/adamweblearn\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs-new.it.ox.ac.uk\/adamweblearn\/wp-json\/wp\/v2\/comments?post=1761"}],"version-history":[{"count":16,"href":"https:\/\/blogs-new.it.ox.ac.uk\/adamweblearn\/wp-json\/wp\/v2\/posts\/1761\/revisions"}],"predecessor-version":[{"id":2852,"href":"https:\/\/blogs-new.it.ox.ac.uk\/adamweblearn\/wp-json\/wp\/v2\/posts\/1761\/revisions\/2852"}],"wp:attachment":[{"href":"https:\/\/blogs-new.it.ox.ac.uk\/adamweblearn\/wp-json\/wp\/v2\/media?parent=1761"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs-new.it.ox.ac.uk\/adamweblearn\/wp-json\/wp\/v2\/categories?post=1761"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs-new.it.ox.ac.uk\/adamweblearn\/wp-json\/wp\/v2\/tags?post=1761"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}