RSS-Feeds einbinden (jFeed)

Zur Einbindung von RSS-Feeds nutzen wir jFeed. jFeed selbst ist recht einfach gehalten, erfüllt aber voll und ganz den Zweck die News aus den Blogs auf den Internet-Seiten der Universität anzuzeigen.

In Roxen wird das Proxy-Modul HTTP Relay verwendet, das ein virtuelles Verzeichnis /ekvv-feed/ für die URL https://ekvv.uni-bielefeld.de/blog/ anlegt. Der Aufruf kann in Roxens data cache zwischengespeichert werden.

BIS-Blogs

Das BIS - Bielefelder Informationssystem - betreibt seit 2009 in enger Kooperation mit der Web-Entwicklung die 'BIS Blogs' als Blogdienst. Folgende Seite soll Ihnen einen Überblick über den Dienst geben:
Einführung in die BIS Blogs

Ein wichtiges Ziel der BIS Blogs ist die Möglichkeit alle Bloginhalte in andere Webseiten integrieren zu können. Die Integration kann in beliebigen Webservern erfolgen, es muss nicht das zentral angebotene Roxen CMS genutzt werden.


Wie man RSS-Feeds in die Seiten einbindet, wird im folgenden einmal anhand des uni.aktuell-Blogs dokumentiert:


Version 1 - als einfache Liste

Code-Schnipsel
<!-- RSS-Feed -->
<script type="text/javascript">
<!--
jQuery(function() {

  jQuery.getFeed({
    url: '/ekvv-feed/uniaktuell/feed/entries/atom',
    success: function(feed) {
      var html = '';

      for(var i = 0; i < feed.items.length && i < 3; i++) {
        var item = feed.items[i];
        html += '<li>'
        + '<a href="' + item.link + '">' + item.title + '</a>'
        + '</li>';
      }
      jQuery('#blog-insert').append(html);
    }
  });

});
-->
</script>
<!-- RSS-Feed-Ende -->

<ul id="blog-insert" class="pfeil-liste margin-l10 feed"></ul> <!-- In diesen Container werden automatisch die Feed-Inhalte geladen -->


Erläuterung des Quellcodes

Hier wird der Blog ausgewählt. Bitte schauen Sie in den Link Ihres Blogs, um die korrekte Angabe zu identifizieren:

url: '/ekvv-feed/uniaktuell/feed/entries/atom',

Beachten Sie, dass die URL
http://ekvv.uni-bielefeld.de/blog/
ersetzt wird durch
/ekvv-feed/

Hier wird die Anzahl der anzuzeigenden Blog-Einträge festgelegt (hier 4):
for(var i = 0; i < feed.items.length && i < 4; i++)

Neben link und title kann man je nach RSS-Feed auch noch folgende Parameter anzeigen lassen:

author
published
updated
summary
description
date
time
datetime
snippet
label
url
pubDate

Hier können Sie das Element bestimmen, in welchem die Feeds angezeigt werden sollen (hier: #uni-aktuell):
jQuery('#blog-insert').append(html);

Vergessen Sie nicht, das entsprechende Element in Ihrem Seitenquelltext auch tatsächlich aufzurufen:
<ul id="blog-insert"> </ul>



Version 2 - mit Contentboxen

Code-Schnipsel
<!-- RSS-Feed -->
<script type="text/javascript">
<!--
jQuery(function() {

  jQuery.getFeed({
    url: '/ekvv-feed/uniaktuell/feed/entries/atom',
    success: function(feed) {
      var html = '';

      for(var i = 0; i < feed.items.length && i < 3; i++) {
      var item = feed.items[i];
      html += '<div class="contentbox">'
      + '<a href="' + item.link + '"><h2>' + item.title + '</h2></a><br>'
      + item.summary
      + '</div>';
      }
      jQuery('#blog-insert').append(html);
    }
  });

});
-->
</script>
<!-- RSS-Feed-Ende -->

<div id="blog-insert"></div> <!-- In diesen Container werden automatisch die Feed-Inhalte geladen -->


Einbindung mehrerer Feeds (& Blog-Kategorien)

Wenn Sie mehrere Feeds (z.B. verschiedene Kategorien eines Blogs) darstellen lassen möchten, ist das mit untenstehenden Code-Schnipseln möglich.

In dem folgenden Standard-Code werden die einzelnen Beiträge der verschiedenen Blogs (oder Kategorien) nacheinander ausgegeben:
Zuerst die neusten x Beiträge von Blog1, dann die neusten x Beiträge von Blog2, usw. ... Wobei x in der zweiten (inneren) For-Schleife festgelegt wird.

Um die Blogbeiträge aller Blogs (oder Kategorien) untereinander chronologisch zu sortieren ist der unten angegebene Zusatz-Code notwendig.

Code-Schnipsel

In blau sind die neu hinzugefügten oder veränderten Zeilen dargestellt.

<!-- RSS-Feed -->
<script type="text/javascript">
<!--
jQuery(function() {

  var urls = ['/ekvv-feed/lehre/feed/entries/atom?cat=%2FPublikationen',
              '/ekvv-feed/lehre/feed/entries/atom?cat=%2FZLL'];

  for (var m = 0; m < urls.length; m++) {

    jQuery.getFeed({
      url: urls[m],
      success: function(feed) {
        var html = '';

        for(var i = 0; i < feed.items.length && i < 4; i++) {
          var item = feed.items[i];
          html += '<li><span class="sortierdatum" style="display: none;">' + item.published + '</span>'
          + '<a href="' + item.link + '">' + item.title + '</a>'
          + '</li>';
        }
        jQuery('#blog-insert').append(html);
      }
    });

  }

});
-->
</script>
<!-- RSS-Feed-Ende -->

<ul id="blog-insert"></ul> <!-- In diesen Container werden automatisch die Feed-Inhalte geladen -->


Zusätzlicher Code zur Mischung der verschiedenen Blogs

In blau sind die zusätzlichen Code-Zeilen gekennzeichnet.

<!-- RSS-Feed -->
<script type="text/javascript">
<!--
jQuery(function() {

  var urls = ['/ekvv-feed/lehre/feed/entries/atom?cat=%2FPublikationen',
              '/ekvv-feed/lehre/feed/entries/atom?cat=%2FZLL'];
  for (var m = 0; m < urls.length; m++) {

    jQuery.getFeed({
      url: urls[m],
      success: function(feed) {
        var html = '';

        for(var i = 0; i < feed.items.length && i < 4; i++) {
          var item = feed.items[i];
          html += '<li><span class="sortierdatum" style="display: none;">' + item.published + '</span>'
          + '<a href="' + item.link + '">' + item.title + '</a>'
          + '</li>';
        }
        jQuery('#blog-insert').append(html);
      }
    });

  }


  // sorting the items after all are appended to #blog-insert

  setTimeout(function() {

    var mylist = $('#blog-insert');
    var listitem = mylist.children('li').get();

    // sort all items by date (descending)
    listitem.sort(function(a, b) {
      return $('span.sortierdatum', a).text().localeCompare($('span.sortierdatum', b).text());
    }).reverse(); //reverse for descending

    // append each item again in the right order
    $.each(listitem, function(index, item) { mylist.append(item); });

    // show only the first 5 items
    $('#blog-insert li:lt(5)').show();

  }, 1000);

});
-->
</script>
<!-- RSS-Feed-Ende -->

<style> #blog-insert li { display: none; } </style>
<ul id="blog-insert"></ul> <!-- In diesen Container werden automatisch die Feed-Inhalte geladen -->

Virtuelles Verzeichnis

Beachten Sie, dass die URL
https://ekvv.uni-bielefeld.de/blog/

ersetzt wird durch
/ekvv-feed/

Tipp

Lagern Sie den RSS-Feed-Quelltext in eine eigene Datei aus (z.B. "feed.html", ohne Seitentemplate).

Anschließend können Sie über
<insert file="feed.html" />

die Feed-Einträge an jeder beliebigen Stelle in Ihren Internetseiten einbinden.



Sie verwenden noch die alten Templates?

Wenn Sie noch die alten Templates vor 2017 verwenden, so müssen Sie folgende zusätzliche Zeilen über dem eigentlichen Feed-Quellcode ergänzen:

Zusätzlicher Code

<!-- RSS-Feed -->
<script type="text/javascript" src="/javascript/jquery.min.js"></script>
<script type="text/javascript" src="/javascript/jquery.jfeed_ms_summ.js"></script>