How to build News components

Highlights

Component News feed
Overview The News component provides you with the ability to display multiple headlines, abstracts, and images in a news feed. Ideal for data such as social media streams or RSS feeds.
Key Features Display a live news feed
Use the built-in CSS to quickly format news headlines
Display images
Include hyperlinks in the component

Overview

The News component lets you format data for use in a news feed, such as Twitter and RSS feeds (eg: Google News).

Component structure

Here is the structure of the News component. Each of the sub-components in the News component is pre-formatted. This section of the Klip Editor is called the Component Tree.

Key Features

This section provides examples of the different ways to use the News component.

Displaying and using an RSS news feed

This article walks you through bringing an RSS feed from Google News into Klipfolio.

To open the New Data Source page

  1. Click the Library link.
  2. Select the Data Sources tab.
  3. Click the Set up a New Data Source button.
  4. Select the Web Accessible Resource option.

You are now in Klipfolio’s New Data Source page. Keep this page open.

To retrieve your RSS news feed URL

  1. Navigate to your news feed: https://news.google.com/news/.
  2. Scroll to the bottom of the page and select RSS.
  3. A page of code will appear. Copy the URL of that page, for example: https://news.google.com/news?pz=1&cf=all&ned=ca&hl=en&output=rss

To create your RSS feed

  1. Navigate to Klipfolio’s New Data Source page.
  2. Paste the RSS URL into the URL text box.
  3. For Data Format select XML.
  4. For Method select GET.
  5. Click the Get Resource button.
  6. Save, name, and select an appropriate refresh rate for your data source.
  7. On the About this Data Source page, select Build a Klip with this Data Source.
  8. Select News Component.

Setting up your news headlines with the Component Tree

From the Data panel, use the XML results to reference each sub-component in the Component Tree.

To add a headline

  1. In the Component tree, select Headline.
  2. In the Data panel, under item, select the title node.

A headline appears in the Klip

To add a description

  1. In the Component tree, select Content.
  2. In the Data panel, under item, select the description node.

A description appears in the Klip

To add a link to the headline

  1. In the Component tree, select Link.
  2. In the Data panel, under item, select the link node.

Your headline is a link to the news article

To add an image

  1. In the Component tree, select Image.
  2. In the Data panel, under channel and under image, select the url node.

The Google News logo appears in the Klip

To add your own image

  1. In the Component tree, select Image.
  2. In the Data panel, paste the URL of your image.
  3. Click Apply.

Your chosen image appears in the Klip

To add an author

  1. In the Component tree, select Author.
  2. In the Data panel, under channel, select the copyright node.

@ 2015 Google appears at the bottom of your Klip

To add a date

  1. In the Component tree, select Date.
  2. In the Data panel, under item, select the pubdate node.

The publication date appears at the bottom of your Klip.

Save your Klip.

Learn more:

Now that you know more about the News component, check out this tutorial:

Important concepts

These articles provide an overview of important concepts for building Klips: