Some sites rely on Javascript to construct elements and sometimes pull in the desired items via additional requests after the page has loaded in your browser. div.section-article to select all elements with a class attribute containing “section-article”Īt the moment Feed Creator only works with HTML elements that are returned by the server in its initial response.ction-article-container to select all elements with a class attribute containing “section-article-container”.article to select all elements on the page.We have a number of options here for choosing a suitable CSS selector: That’s not what Feed Creator expects as the item selector (unless there’s only ever a single item on the page). For example, the parent element of the highlighted element in the image above is such an element, so targeting it with div.section-articles would be selecting a single element. Later, we will use additional selectors to target title, summary, image and date elements within each selected item.Ī common mistake is to identify an element that contains all the items and to create a selector for that. What we’re looking for is an HTML element for a single item. You’ll now see the item’s underlying HTML markup. Move your cursor over one of the items and right-click and choose ‘Inspect Element’ in Firefox (‘Inspect’ in Chrome).
To create a usable selector, we’ll want to inspect the desired items and identify the main elements in the underlying HTML. Now switch to the Feed Creator tab and enter the Reuters Investigates URL in the field labeled ‘Enter web page URL’: īelow it, choose ‘Advanced Selectors’ Step 4: Create selector for the desired items Step 3: Enter the source page URL and choose Advanced Selectors In this example we’re using the Reuters Investigates page, and the areas we’ve marked in red rectangles contain the items of interest. Tab 2: Feed Creator – Step 2: Identify the items that should be used in the feed Tab 1: Reuters Investigates – /investigates/
JAVASCRIPT RSS FEED READER WINDOWS
We’ll be switching between the source page and Feed Creator in the steps below, so we recommend you open them in two tabs (or have the windows side-by-side). Step 1: Make source page and Feed Creator easily accessible Enter the selectors in Feed Creator to generate the feed.Find appropriate selectors for individual item elements (e.g.Find appropriate selectors for the main item blocks.These are the basic steps we’ll be following: Your browser’s developer tools to inspect the source page’s HTML (we’ll use Firefox’s Developer tools in this guide, but Chrome will be very similar).Our Feed Creator application (we offer a free, hosted service to get started, no signup required – if you find it useful, it’s also available for self-hosting or as a premium, hosted service).The webpage address (URL) of the source page you want to create a feed from.Some basic knowledge of HTML and CSS selectors.If you’d rather have us create a feed for you, please submit a custom feed request. We’ll use Reuters Investigates as our source page, but the technique can be applied to any site.
JAVASCRIPT RSS FEED READER HOW TO
In this post we’re going to show you how to create a feed using CSS selectors, step by step. Generating a feed from a webpage using CSS selectors Feed Creator does not concern itself with the styling aspect of CSS, but does accept CSS selectors to help extract elements to be used in the feeds it produces. As part of its specification, it includes selectors to target HTML elements to be styled. If you’re new to Feed Creator, we recommend you start by reading part 1 and then continue here.ĬSS is a standardised web technology primarily used for styling web page elements. CSS selectors used to target elements on a web page In this post we’ll show you how to use advanced mode and CSS selectors to include additional item information such as the publication date, featured image, and summary text. In part 1 we showed you how to turn a webpage into an RSS feed using our Feed Creator application and its simple selector mode.
0 kommentar(er)
