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

Transcription

1 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: Reference Number: Commission européenne, L-2920 Luxembourg. Telephone: (352) Office: C2/18. Telephone: direct line (352) Commission européenne, B-1049 Bruxelles / Europese Commissie, B-1049 Brussel - Belgium. Telephone: (32-2) romain.souteyrand@ext.ec.europa.eu

2 Document History Version Date Comment Modified Pages /04/2007 Document created by Alexandre Bosserelle Contact: Alexandre Bosserelle, Telephone:(352) , RSS Feeds - Content Syndication - Feed2JS: a simple solution to display RSS feeds Page 1 / 1

3 INTEGRATE EXTERNAL FEEDS: FEED2JS What is Feed2JS? Into Feed2JS: the builder interface Advanced users: customize the layout using Feed2JS Stylizer Step-by-step: how to integrate the "50 th Anniversary of the Treaty of Rome" into the index page of the European Commission website Configure the feed with Feed2JS builder interface FAQ How Can I Display Multipled Feeds? Why Does my Feed Display with Strange Character Substitution? How Can I Have Links appear in Pop Up Windows? How Can I apply Multiple Styles to feeds on the same page? Feeds Updating 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 Feed2JS is a hosted service, so no installation or configuration is required by the webmaster. RSS Feeds - Content Syndication - Feed2JS: a simple solution to display RSS feeds Page 2 / 2

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: Feed2JS can be evaluated here: RSS Feeds - Content Syndication - Feed2JS: a simple solution to display RSS feeds Page 3 / 3

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: 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 RSS Feeds - Content Syndication - Feed2JS: a simple solution to display RSS feeds Page 4 / 4

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: 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: Default value: "1" "-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! Important: these values can be ignored if you set "Use HTML in item display" to "yes". See below. RSS Feeds - Content Syndication - Feed2JS: a simple solution to display RSS feeds Page 5 / 5

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: Default value: "no" "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! 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: Default value = "feed". 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 "feed" - Display the date that is recorded in the RSS feed RSS Feeds - Content Syndication - Feed2JS: a simple solution to display RSS feeds Page 6 / 6

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 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 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. The class-id used for the layer will be "rss-box-xxxx", where XXXX is the value you entered. RSS Feeds - Content Syndication - Feed2JS: a simple solution to display RSS feeds Page 7 / 7

9 Default value: blank.! Important: style sheets must be created in accordance with Feed2JS guidelines (See Advanced users: customize the layout using Feed2JS Stylizer) 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 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). Figure 2 JavaScript code to install the feed into a webpage RSS Feeds - Content Syndication - Feed2JS: a simple solution to display RSS feeds Page 8 / 8

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: RSS Feeds - Content Syndication - Feed2JS: a simple solution to display RSS feeds Page 9 / 9

11 <noscript> <a href=" A%2F%2Feuropa.eu%2F50%2Frss%2Feu50_en.rss&num=4&desc=1&utf= y&css=50th-anniversary&html=y">view RSS feed</a> </noscript> 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 This "Stylizer" offers to the webmaster a possibility to preview the look of a feed using different styles (see Figure 6). RSS Feeds - Content Syndication - Feed2JS: a simple solution to display RSS feeds Page 10 / 10

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 ( RSS Feeds - Content Syndication - Feed2JS: a simple solution to display RSS feeds Page 11 / 11

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 RSS Feeds - Content Syndication - Feed2JS: a simple solution to display RSS feeds Page 12 / 12

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. RSS Feeds - Content Syndication - Feed2JS: a simple solution to display RSS feeds Page 13 / 13

15 1.4. Step-by-step: how to integrate the "50 th 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. 1 2 Figure 9 News of the "50th Anniversary of the Treaty of Rome" to integrate in another website RSS Feeds - Content Syndication - Feed2JS: a simple solution to display RSS feeds Page 14 / 14

16 Section where the "50th Anniversary of the Treaty of Rome" RSS feed will be integrated Figure 10 Index page where the "50th Anniversary of the Treaty of Rome" RSS feed will be integrated Configure the feed with Feed2JS builder interface Connect to 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: 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" RSS Feeds - Content Syndication - Feed2JS: a simple solution to display RSS feeds Page 15 / 15

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: <script language="javascript" src=" %2F%2Feuropa.eu%2F50%2Frss%2Feu50_en.rss&num=4&desc=1&utf=y &css=50th-anniversary" type="text/javascript"></script> <noscript> <a href=" A%2F%2Feuropa.eu%2F50%2Frss%2Feu50_en.rss&num=4&desc=1&utf= y&css=50th-anniversary&html=y">view RSS feed</a> </noscript> 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! RSS Feeds - Content Syndication - Feed2JS: a simple solution to display RSS feeds Page 16 / 16

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: <style type="text/css">.rss-box-50th-anniversary { background: #e6eaf6 url( norepeat scroll bottom right; padding: 10px 10px 10px 10px;.rss-title, rss-title a {.rss-items { list-style-image: url(' ul.rss-items { RSS Feeds - Content Syndication - Feed2JS: a simple solution to display RSS feeds Page 17 / 17

19 padding: px;.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 RSS Feeds - Content Syndication - Feed2JS: a simple solution to display RSS feeds Page 18 / 18

20 1.5. FAQ The following common issues have been taken the Feed2JS official website: 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 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 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 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: <meta http-equiv="content-type" content="text/html; charset=iso "> and change it to read: <meta http-equiv="content-type" content="text/html; charset=utf-8"> If there is no such line, add this code anywhere after the <head> tag. RSS Feeds - Content Syndication - Feed2JS: a simple solution to display RSS feeds Page 19 / 19

21 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: <script type="text/javascript" language="javascript"> function popupfeed(url) { 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> 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 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. RSS Feeds - Content Syndication - Feed2JS: a simple solution to display RSS feeds Page 20 / 20