RSS Feeds - Content Syndication Feed2JS: a simple solution to display RSS feeds

(1)

Commission européenne, L-2920 Luxembourg. Telephone: (352) 43 01-1. Office: C2/18. Telephone: direct line (352) 43 01-37852.

EUROPEAN COMMISSION

DIRECTORATE-GENERAL INFORMATICS

Directorate A - Corporate IT Solutions & Services

Corporate Infrastructure Solutions for Information Systems (LUX)

RSS Feeds - Content Syndication

Feed2JS: a simple solution to display RSS feeds

Date: 11/04/2007

Version: 1.00

Authors: Alexandre Bosserelle

Revised by:

Approved by:

Public:

(2)

Document History

Version Date Comment Modified Pages

1.00 4/04/2007 Document created by Alexandre Bosserelle

Contact:

Alexandre Bosserelle, Telephone:(352) 43 01-34751, alexandre.bosserelle@ext.ec.europa.eu

(3)

INTEGRATE EXTERNAL FEEDS: FEED2JS... 2

1.1. What is Feed2JS?... 2

1.2. Into Feed2JS: the builder interface ... 4

1.3. Advanced users: customize the layout using Feed2JS Stylizer ... 10

1.4. Step-by-step: how to integrate the "50th Anniversary of the Treaty of Rome" into the index page of the European Commission website ... 14

1.4.1. Configure the feed with Feed2JS builder interface ... 15

1.5. FAQ ... 19

1.5.1. How Can I Display Multipled Feeds? ... 19

1.5.2. Why Does my Feed Display with Strange Character Substitution? ... 19

1.5.3. How Can I Have Links appear in Pop Up Windows? ... 20

1.5.4. How Can I apply Multiple Styles to feeds on the same page? ... 20

1.5.5. Feeds Updating ... 20

INTEGRATE EXTERNAL FEEDS:FEED2JS

1.1.What is Feed2JS?

An RSS Feed is a dynamically generated summary (in XML format) of information or news published on other web sites- so when the published RSS changes.

Feed2JS is a rather simple technology that allows a webmaster, to include an RSS Feed (information or news plublished on other websites) in any web page, without having to know a lick about XML!

Feed2JS displays a box in a web page that is able to update itself; whenever the source of the information changes, the page embedded the source does too, without the web page designer having to do a single thing to it.

Feed2JS provides an easy-to-use solution to accomplish all the hard work for you-- in 4 steps:

1. Find the RSS source, the web address for the feed.

2. Use Feed2Js to build the JavaScript command that will display it 3. Optionally style it up to change the way it will be displayed 4. Include the Javascript to display the feed in a webpage

(4)

When using Feed2JS, you just have to keep in mind that feeds are cached for 60 minutes, so if add a remote RSS feed to your content, the updates will take at least an hour to appear in the webpage using Feed2JS to display that feed.

Feed2JS benefits:

• Easy-to-use interface, fully documented

• Simple integration of the external feed with a single JavaScript command, no need to use iframes or other non-accesibility compliant technologies

• Repectful of the external feed provider: a cache system saves the external feed in memory, limiting accesses to the feed provider website

• On-line hosted service, no need to install any software or module • Integration of multiple feeds in one page

• Feeds look fully customizable with stylesheets; in case of multiple feeds, each feed can have its own look

• Alternate link to the feed if JavaScript is not enabled in the user's browser

Feed2JS Website: http://feed2js.org/

(5)

1.2.Into Feed2JS: the builder interface

Feed2JS provides a simple way to include an external RSS feed to any webpage.

Connect to Feed2Js: http://fpfis.net1.cec.eu.int/demos/feed2js/

You access the Feed2JS interface. Here, you will have to fill the source feed address, and choose the RSS feed information to display.

Figure 1 – Feed2JS builder interface

1 2 3 4 5 6 7 8 9 10 11 12 13

(6)

1 - URL

Enter the URL of the RSS feed to display.

Feed2JS is working with the following feed formats: Atom, RSS 1.x and RSS 2.x

You can verify the validy and structure of an RSS feed using a feed validator: http://feedvalidator.org/

Feed2JS accepts the following formats: • RSS 1.0 – RDF

• Atom 1.0 (partial support) • RSS 2.0 with Podcast enclosure

2 - Show channel

Display information (title and description) about the publisher of the feed. Possible values:

• "yes" - show the title and description • "title" - display the title only • "no" - do not display anything Default value: "yes"

3 - Number of items to display

Number of items to display. Default value: "0"

4 - Show/Hide item descriptions - How much

Kind and quantity of information to display for each item. Possible values:

• "-1" – Display the item description. The item title is not displayed; no link is available to reach the original source

• "0" – Only display the item title as a link leading to the original source

• "1" – Display the item title as a link leading to the original source and the item description

• Numeric value "n" > 1 - Display the item title as a link leading to the original source and the first "n" characters of the item description

Default value: "1"

! Important: these values can be ignored if you set "Use HTML in item display" to "yes". See below.

(7)

! Important: when setting a numeric value, the description can be truncated in the middle of a word.

5 - Use HTML in item display

Display each item as it has been defined in the feed (preserving the HTML code). Possible values:

• "yes" – Display the item description as it has been defined in the original feed (HTML code is preserved). Ignore the way to display an item set in "Show/Hide item descriptions)

• "no" – Strip HTML code defined in the original feed. The output displayed will be text-only.

• "preserve paragraphs only" - Strip HTML code defined in the original feed but convert all RETURN/linefeeds to HTML tag <br> to preserve paragraph breaks Default value: "no"

! Important: Using "yes" will ignore the way to display an item set in "Show/Hide item descriptions.

! Important: Using "yes" will use the HTML code defined in the original feed. This can potentially interfere with the layout of the page where the feed will be displayed.

6 - Show item posting date

Display the time and date for each item.

The time and date will be displayed under the item title, like this "published on Pubdate". If the feed does not have any information related to the publication date and this option is set to "yes", then "published date n/a" will be displayed under the item title.

Possible values: • "yes" • "no" Default value "no"

7 - Time Zone Offset

Date conversion to a local time when displaying a date and time.

Date and time are converted to GMT time; to display in local time, you must enter an offset from your current local time.

Possible values:

• Numeric value "-n" / "+n" - If your local time is 5 hours before GMT, enter -5. If your local time is 8 hours past GMT, enter +8. Fractional offsets such as +10:30 must be entered as decimal +10.5.

• "feed" - Display the date that is recorded in the RSS feed Default value = "feed".

(8)

8 - Target links in the new window

If an item is linked to the original content, this option defines how the link is reached. Possible values:

• "n" - Links are opened in the same window • "y" – Links are opened in a new window

• "popup" – Links are opened in a Javascript pop-up window • Custom value "xxxx" – Links are opened in a frame named "xxxx" Default value: "n"

9 - UTF-8 Character Encoding

Displays output content as UTF-8. Required for many non-western language web pages and also may help if you see strange characters replacing quotes and special characters (non-latin, etc.) in the output.

Possible values:

• Option checked – displays output content as UTF-8 • Option unchecked

Default value: "unchecked".

! Tip: you can see what encoding is used for the feed by checking the "<?xml> tag of the feed source code. If it's set to "UTF-8", check this option.

10 - Podcast enclosures

For RSS 2.0 feeds with enclosures, display links to the media files.

RSS enclosures are attachments for RSS feeds. Think of RSS enclosures as the counterpart to email attachments. RSS enclosures attach your media files to your RSS feeds it informs RSS aggregators that support enclosures of the published date/time and size of the media attachment. Possible values:

• "yes" • "no" Default value: "no"

11 - Custom CSS Class (advanced users)

Specify a CSS class-id to identify the layer where a feed is displayed; this class-id could then be used in stylesheets to customize the look of the feed.

Usefull when multiple feeds with different layouts are displayed in a page; it allows a webmaster to define a specific layout for each feed integrated.

(9)

Default value: blank.

! Important: style sheets must be created in accordance with Feed2JS guidelines (See 1.3 - Advanced users: customize the layout using Feed2JS Stylizer).

12 - Preview Feed

Once the Feed2Js has been filled, you can preview the result of the feed by clicking

The preview opens in a new window, so that you can still modify the options of the feed.

The feed shows in the preview window has a simple style applied to it, to distinguish the preview elements of the interface and the elements of the feed that will be integrated.

In any case this preview and this style will not presume of the result of the final integration in a web page where stylesheets, specific layout, etc. can modify the visual rendering of the feed.

If you are satisfied with the configuration and the content displayed by the feed, go back to the Feed2JS builder interface and generate the Javascript code to integrate the feed.

13 - Generate JavaScript

This option will generate the JavaScript code that allows the webmaster to easily integrate the feed into a webpage.

When the webmaster clicks on , the Feed2JS builder interface is reloaded and a text field delivers the JavaScript code required to integrate the feed (see Figure 2).

(10)

Integrating a Feed2JS generated feed using JavaScript

Copy the JavaScript code generated and paste it into the code source (HTML) of the page where it should be displayed.

What happens if JavaScript is disabled on the user's browser?

Feed2JS displays feeds using JavaScript commands. When users have a browser supporting JavaScript, the feed is displayed correctly (see Figure 3).

Figure 3 – Example of a feed displayed by Feed2JS when JavaScript is enabled in the user's browser

Sometimes users can voluntarily disable JavaScript support, or use older browsers without JavaScript support. In that case, Feed2JS provides a simple link (see Figure 4) leading to a page displaying the feed (see Figure 5); this page is hosted on the Feed2JS server and webmasters have no control on it.

Figure 4 - Example of a feed displayed by Feed2JS when JavaScript is disabled in the user's browser

Figure 5 – Feed displayed when users have followed the alternative link when JavaScript id disabled

The default text of the link leading to the feed when JavaScript is disabled is "View RSS Feed". This text can be changed for something else; when you integrate the JavaScript code in your webpage (see Figure 2 – JavaScript code to install the feed into a webpage), simply change the following lines marked in red with the appropriate text to display:

(11)

1.3.Advanced users: customize the layout using Feed2JS Stylizer

Feeds generated by Feed2JS have no style when they are integrated into a webpage, meaning that they inherit from the style and the layout of the webpage where they are displayed.

Hopefully, webmasters can apply a specific layout to the feeds using stylesheets.

Feed2JS includes a "Stylizer" available at http://fpfis.net1.cec.eu.int/demos/feed2js/style.php This "Stylizer" offers to the webmaster a possibility to preview the look of a feed using different styles (see Figure 6).

(12)

Figure 6 – Feed2JS Stylizer: interface to change the layout of a feed using CSS

Simply indicate the URL of the feed that will be integrated with Feed2JS ( 14 ), you can optionnaly select a style defined with Feed2JS ( 15 ) and finaly click on (

14

15

(13)

16 ); a new window "Style Preview" (see Figure 7) shows how the feed will look like when it will be intergrated.

Figure 7 – Fedd2JS Style Previewer

17 URL of the feed to integrate

18 Preview of the look of the feed once integrated with Feed2JS; the style applied is the one

chosen with Feed2JS Stylizer (see Figure 6 – 15) or the one set in the "CSS applied" field ( 19 )

19 CSS applied to the feed

20 Online help indicating CSS classes to use to customize the look of a feed

17

18

19

(14)

Feeds displayed by Feed2JS are built using the following CSS structure:

Figure 8 – Structure of a feed displayed by Feed2JS, with associated CSS classes

Furthermore, here is a basic template of the CSS classes used by Feed2JS: .rss-box { } .rss-title, rss-title a { } .rss-items { }

.rss-item a:link, .rss-item a:visited, .rss-item a:active { }

.rss-item a:hover { }

.rss-date { }

Different styles for different feeds

If you have more than one feed displayed per page, you can assign different styles to each display.

By supplying a value for "CSS Custom Class" in the build form (see Figure 1 – 11) you can now create different top level classes. It will create a CSS class named rss-box-XXXX where XXXX is this value you defined in the build form. You can now use the top level rss-box-XXXX classes to define the layout of the feed.

(15)

1.4.Step-by-step: how to integrate the "50th Anniversary of the Treaty of Rome" into the index page of the European Commission website

This how-to will show you, step by step, how to use Feed2JS, through a simple example: the integration of the "50th Anniversary of the Treaty of Rome" RSS feed into the index page of the European Commission website.

In the Figure 9, the "Focus on" section 1 headlines news we want to integrate into another

webpage. The related RSS feed 2 link leads to the XML we gonna integrate with Feed2JS.

The Figure 10 is the index page of the European Commission website. The news items of the "50th Anniversary of the Treaty of Rome" website will be integrated into this webpage.

Figure 9 – News of the "50th Anniversary of the Treaty of Rome" to integrate in another website

1

(16)

Figure 10 – Index page where the "50th Anniversary of the Treaty of Rome" RSS feed will be integrated

1.4.1.Configure the feed with Feed2JS builder interface

Connect to Feed2JS: http://fpfis.net1.cec.eu.int/demos/feed2js/ - We access the Feed2JS builder interface.

In our example, we'll use the URL of the "50th Anniversary of the Treaty of Rome" RSS feed: http://europa.eu/50/rss/eu50_en.rss .

We'll also set the following properties for the feed: • "Show channel" = "no"

• "Number of items to display" = "4"

• "Show/Hide item descriptions - How much" = "1" • "Use HTML in item display" = "no"

• "Show item posting date" = "no" • "Time Zone Offset" = "feed"

• "Target links in the new window" = "n" • "UTF-8 Character Encoding" checked • "Podcast enclosures" = "no"

• "Custom CSS Class" = "50th-anniversary" Section where the "50th Anniversary of the Treaty of

Rome" RSS feed will be integrated

(17)

We click on to take a look to the feed and make sure that the information we want to gather from the source feed is right (see Figure 11).

Figure 11 – Preview of the information from the feed "50th Anniversary of the Treaty of Rome" as it will be integrated by Feed2JS

The information displayed is correct, so now we gonna integrate this feed to main page of the European Commission website.We go back to the builder interface, and click on

It generates the following HTML code:

We paste this code into the HTML code of the main page of the European Commission website and open the page into a browser to see the result (see Figure 12). That's it! The feed is correctly integrated into the page !

(18)

Figure 12 - "50th Anniversary of the Treaty of Rome" RSS feed integrated with Feed2JS into the European Commission Website

We can now change the layout of the feed using the CSS class "50th-anniversary" defined in the builder interface by add the following CSS into the HTML code of the main page of the European Commission website.

Just before the HTML code previously used to integrate the feed, we paste the following CSS classes:

url(http://ec.europa.eu/hp_webfiles/images/bg_aroundeurope.gif) no-repeat scroll bottom right;

padding: 10px 10px 10px 10px; } .rss-title, rss-title a { } .rss-items { list-style-image: url('http://ec.europa.eu/hp_webfiles/images/picto_default_right.gif'); } ul.rss-items {

(19)

padding: 0 0 0 22px; }

.rss-item {

font-size: 0.9em; }

.rss-item a:link, .rss-item a:visited, .rss-item a:active { font-weight: bold; font-size: 1.2em; } .rss-item a:hover { } .rss-date { } </style>

We open the page into a browser to see the new result (see Figure 12). The feed layout is now customized!

Figure 13 - "50th Anniversary of the Treaty of Rome" RSS feed integrated with Feed2JS into the European Commission Website, with a custom layout based on CSS

(20)

1.5.FAQ

The following common issues have been taken the Feed2JS official website: http://feed2js.org/index.php?s=help

1.5.1.How Can I Display Multipled Feeds?

Issue:

Can the feed-generator generate news from multiple sites?

Solution:

Feed2JS can only take one RSS feed as a parameter. If you want to create a display that is a mix of multiple sites, use an external service that can take a list of RSS feeds and "splice" or "mix" them into one RSS URl that you can use in Feed2JS.

The followings offer this sort of service: KickRSS, FeedShake, BlogSieve, FeedDigest, RSS Mix, BlogDigger Groups, Aggrssive, Lazytom's feedjumbler, FeedMarker, FEEDcombine, Feed Findings, FrankenFeed, etc.

1.5.2.Why Does my Feed Display with Strange Character Substitution?

Issue:

What are quotes and other punctuation marks replaced by question marks or other strange characters in the display of a feed?

Solution:

The explanation is a bit more than we can write here, but it has to do with the charcter sets used to display web content. Most web pages by default use what is known as ISO-8559-1 or Latin-1 sets of characters. Many publishing systems, or content pasted from software such as MS Word, introduce certain characters (curly quotes, em-dashes) that are not part of the ISO-8559-1 character set, and thus it substitutes other characters, which look like gibberish.

However, there is a web character set called UTF-8 that can properly display these characters. There are two things you need to do to make this work. First, in Feed2JS, you must check the option box for Use UTF-8 Encoding. This tells our script to use UTF-8 characters for its output. But to have it work correctly in your web page, you must edit or add a line of HTML code so the web page knows to display with this character set. This must be done in the web page that contains the cut and paste Feed2JS code.

In the <head>...</head> portion of your web page, look for a line like:

and change it to read:

(21)

1.5.3.How Can I Have Links appear in Pop Up Windows?

Issue:

How can I make links appear in a custom pop up window e.g. no buttons or browser bars?

Solution:

If you specify a value for the Feed2JS builder variable "Target links in the new window?" = "popup", the links will be built that can pass the URL to a JavaScript function named popupfeed(url) that can then do the work to open the a new window with the features you want.

This does require that the web page containing the Feed2JS JavaScript code also have in the <HEAD>...</HEAD> part of the HTML, a JavaScript function, for instance:

var myfeatures = "toolbar=no,location=no,directories=no, menubar=no,scrollbars=yes, status=yes,resizable=no, width=800,height=400";

thefeed = window.open( url, 'feed2jspop', myfeatures); if (window.focus) {thefeed.focus()}

}

</script>

1.5.4.How Can I apply Multiple Styles to feeds on the same page?

Issue:

I have multiple feeds listed on the same page- is it possible to have different style sheets applied for different feeds?

Solution:

Feed2JS contains the parameter "Custom CSS Class (advanced users)" in the build form that allows you to specify a name that becomes part of the class that defines the feed content. By default, this class is rss-box but if you name a new class such as "Custom CSS Class (advanced users)" = "XXX", you can now style via a class named rss-box-XXX. You may have to redefine more specific sub-classes to make dramatically different styles.

1.5.5.Feeds Updating

Issue:

"My web site feed has changed but the display from Feed2JS has not changed. What's going on?"

Solution:

Feed2JS site's feeds are cached for 60 minutes. This means that once a feed is requested, it is stored locally on the Feed2JS server as a "cached" version that will be used until the cache version is at least one hour old. This is to avoid a performance hit on remote servers.