Table of Contents
What is mediastack, and What Makes it Such a Reliable Resource?
mediastack collects and aggregates news data from thousands of global sources, converts it into a standardized and machine-readable format, and delivers it to developers in a straightforward and lightweight JSON format. It is a powerful news API.
The mediastack news API is capable of searching millions of news articles in real-time. It accesses current and historical news data across multiple categories, such as business, health, entertainment, sports, and many more. Let’s read on to learn how to make live news apps with mediastack.
This article outlines in detail more advanced methods of using mediastack API using Python.
if you are looking for basic mediastack API use with Python, then take a look at this article:
For advanced mediastack API use with Python, take a look at this article:
You can also take a look at this article if you are interested in Node.js implementation:
Why should You Use mediastack to Provide Live News Data?
Starting in 2017 as an internal sports news aggregation feed, mediastack has grown into one of the most popular one-stop shops for news data.
Here are some reasons why mediastack is the trusted news data API resource of more than 2,000 major companies worldwide:
- It gathers information from over 7,500 reputable news sources around the world.
- Thousands of relevant news and blog articles are published every day.
- It powers global live news feeds, data analytics platforms, and trend analysis applications.
Not only that, but tens of thousands of individuals, universities, and non-profit organizations rely on the API for a reliable source of real-time news data.
Whether you run a non-profit organization, a small business resources website, a community news aggregator website, or simply want to run an RSS feed on your blog, the mediastack API gives you the same sources of news data that all the big players use daily.
What API Features are Provided by mediastack?
The following is a list of the mediastack API’s features:
1. Does It Provide Live News?
With mediastack, you can access the full set of available real-time news articles using a simple API request to the mediastack API’s news endpoint.
HTTP GET Request Parameters:
| Object | Description |
| access_key | [Required] Specify your unique API access key, which is shown when you log in to your account dashboard. |
| sources | [Optional] Include or exclude one or multiple comma-separated news sources. Example: To include CNN, but exclude BBC: &sources=cnn,-bbc |
| categories | [Optional] Include or exclude one or multiple comma-separated news categories. Example: To include business, but exclude sports: &categories=business,-sports. Available categories: general (Uncategorized News), business (Business News), entertainment (Entertainment News), health (Health News), science (Science News), sports (Sports News), technology (Technology News) |
| countries | [Optional] Include or exclude one or multiple comma-separated countries. Example: To include Australia, but exclude the US: &countries=au,-us. Available countries: See all supported countries |
| languages | [Optional] Include or exclude one or multiple comma-separated languages. Example: To include English, but exclude German: &languages=en,-de. Available languages: ar (Arabic), de (German), en (English), es (Spanish), fr (French), he (Hebrew), it (Italian), nl (Dutch), no (Norwegian), pt (Portuguese), ru (Russian), se (Swedish), and zh (Chinese) |
| keywords | [Optional] Search for sentences, you can also exclude words that you do not want to appear in your search results. Example: To search for “New movies 2021” but exclude “Matrix”: &keywords=new movies 2021 -matrix |
| date | [Optional] Specify a date or date range. Example: &date=2020-01-01 for news on Jan 1st and &date=2020-12-24,2020-12-31 for news between Dec 24th and 31st. |
| sort | [Optional] Specify sorting order. Available values: published_desc (default), published_asc, popularity |
| limit | [Optional] Specify a pagination limit (number of results per page) for your API request. The default limit value is 25, the maximum allowed limit value is 100. |
| offset | [Optional] Specify a pagination offset value for your API request. Example: An offset value of 100 combined with a limit value of 10 would show results 100-110. The default value is 0, starting with the first available result. |
2. Can I Get Historical News with the API?
If you are subscribed to the Standard Plan or higher, you can access historical news data by specifying a historical date using the API’s date parameter in YYYY-MM-DD format.
HTTP GET Request Parameters:
| Object | Description |
| access_key | [Required] Specify your unique API access key, which is shown when you log in to your account dashboard. |
| date | [Optional] Specify a date or date range. Example: &date=2020-01-01 for news on Jan 1st and &date=2020-12-24,2020-12-31 for news between Dec 24th and 31st. |
| sources | [Optional] Include or exclude one or multiple comma-separated news sources. Example: To include CNN, but exclude BBC: &sources=cnn,-bbc |
| categories | [Optional] Include or exclude one or multiple comma-separated news categories. Example: To include business, but exclude sports: &categories=business,-sports. Available categories: general (Uncategorized News), business (Business News), entertainment (Entertainment News), health (Health News), science (Science News), sports (Sports News), technology (Technology News) |
| countries | [Optional] Include or exclude one or multiple comma-separated countries. Example: To include Australia, but exclude the US: &countries=au,-us. Available countries: See all supported countries |
| languages | [Optional] Include or exclude one or multiple comma-separated languages. Example: To include English, but exclude German: &languages=en,-de. Available languages: ar (Arabic), de (German), en (English), es (Spanish), fr (French), he (Hebrew), it (Italian), nl (Dutch), no (Norwegian), pt (Portuguese), ru (Russian), se (Swedish), and zh (Chinese) |
| keywords | [Optional] Include or exclude one or multiple comma-separated search keywords.Example: To include the keyword “virus”, but exclude “corona”: &sources=virus,-corona |
| sort | [Optional] Specify sorting order. Available values: published_desc (default), published_asc, popularity |
| limit | [Optional] Specify a pagination limit (number of results per page) for your API request. The default limit value is 25, the maximum allowed limit value is 100. |
| offset | [Optional] Specify a pagination offset value for your API request. Example: An offset value of 100 combined with a limit value of 10 would show results 100-110. The default value is 0, starting with the first available result. |
3. How do I Search News Sources With The News API?
Using the sources endpoint together with a series of search and filter parameters you can search all news sources supported by the mediastack API. The API returns all available source metadata, including the ID required to define sources for live or historical news.
HTTP GET Request Parameters:
| Object | Description |
| access_key | [Required] Specify your unique API access key, which is shown when you log in to your account dashboard. |
| search | [Required] Specify one or multiple search keywords. |
| countries | [Optional] Include or exclude one or multiple comma-separated countries. Example: To include Australia, but exclude the US: &countries=au,-us. Available countries: See all supported countries |
| languages | [Optional] Include or exclude one or multiple comma-separated languages. Example: To include English, but exclude German: &languages=en,-de. Available languages: ar (Arabic), de (German), en (English), es (Spanish), fr (French), he (Hebrew), it (Italian), nl (Dutch), no (Norwegian), pt (Portuguese), ru (Russian), se (Swedish), and zh (Chinese) |
| categories | [Optional] Include or exclude one or multiple comma-separated news categories. Example: To include business, but exclude sports: &categories=business,-sports. Available categories: general (Uncategorized News), business (Business News), entertainment (Entertainment News), health (Health News), science (Science News), sports (Sports News), technology (Technology News) |
| limit | [Optional] Specify a pagination limit (number of results per page) for your API request. The default limit value is 25, the maximum allowed limit value is 100. |
| offset | [Optional] Specify a pagination offset value for your API request. Example: An offset value of 100 combined with a limit value of 10 shows results 100-110. The default value is 0, starting with the first available result. |
How can I Get Started with mediastack API?
First, get your API Credentials here, and set up your subscription plan:
And you can monitor your usage via the dashboard.
How do I Check API Access Key & Authentication?
Next, to check if everything is working properly, simply run this URL in your favorite web browser:
|
1 |
http://api.mediastack.com/v1/news?access_key=YOUR_ACCESS_KEY |
You will get this API response inside your browser:
Or, here is the output you will get if you test it with Postman:
What does the API Response Structure Look Like?
As shown in the previous section, if your API request is successful, the mediastack API returns HTTP status 200 together with a JSON result. The result carries a pagination object as well as a data object containing one or multiple news articles.
Here is an example of the structure of the mediastack API response:
And here are their descriptions:
| Response Object | Description |
| pagination > limit | Returns your pagination limit value. |
| pagination > offset | Returns your pagination offset value. |
| pagination > count | Returns the results count on the current page. |
| pagination > total | Returns the total count of results available. |
| data > id | Returns the source ID of the given news source. This is also the ID you need to pass to the API’s sources parameter when requesting live or historical news data. |
| data > name | Returns the name of the given news source. |
| data > author | Returns the name of the author of the given news article. |
| data > title | Returns the title text of the given news article. |
| data > description | Returns the description text of the given news article. |
| data > url | Returns the URL leading to the given news article. |
| data > image | Returns an image URL associated with the given news article. |
| data > category | Returns the category associated with the given news article. |
| data > language | Returns the language the given news article is in. |
| data > country | Returns the country code associated with the given news article. |
| data > published_at | Returns the exact timestamp the given news article was published. |
How to Set Up a React Apps Environment for the First Time?
If this is your first time using React.js, run this command on your command prompt to install create-react-app:
|
1 |
npm i create-react-app |
Next, create a new project using create-react-app. Switch to your preferred directory and run this command on your terminal. Here, I call the project reactjs-apilayer2:
|
1 |
npx create-react-app reactjs-apilayer2 |
The command above will generate the scaffolds you need to get your React application running as quickly as possible.
Next, run the application using the following command.
|
1 |
npm start |
This automatically opens http://localhost:3000 on your browser with the default create-react-app homepage:
How do I Set Up Bootstrap for the App’s Frontend, Inside the public\index.html File?
Add the link to the bootstrap’s CDN inside the index.html [1] file which can be found in the public folder:
|
1 2 3 4 5 |
<head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> </head> |
How to Modify the src\App.js to Consume mediastack REST News API?
To consume mediastack API, modify the code inside src\App.js [2] file into this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
import React, {Component} from 'react'; import Newss from './components/newss'; class App extends Component { render() { return ( <Newss newss={this.state.newss} /> ) } state = { newss: [] }; componentDidMount() { fetch("http://api.mediastack.com/v1/news?access_key=YOUR_ACCESS_KEY&languages=en") .then(res => res.json()) .then((res) => { this.setState({ newss: res.data }) }) .catch(console.log) } } export default App; |
What the above code does:
- Calls the mediastack REST API
- Feeds dynamic data from the mediastack API.
- Creates a state (an object that holds data pending to be rendered).
- Parses and display the data in a presentable manner (present the data from news.title, news.author, and news.description into our web app).
How do I Create Our News Component Inside the src\components\newss.js File?
You will need another .js file or component to show the scraped results as a web app.
Here is what the code inside src\components\newss.js [3] look like:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import React from 'react' const Newss = ({ newss }) => { return ( <div> <center><h1>Latest News</h1></center> {newss.map((news) => ( <div class="card"> <div class="card-body"> <h5 class="card-title">{news.title}</h5> <h6 class="card-subtitle mb-2 text-muted">{news.author}</h6> <p class="card-text">{news.description}</p> </div> </div> ))} </div> ) }; export default Newss |
What the above code does:
- Renders the results as cards
- The “newss” method accepts the “newss” state we created earlier and then returns a mapped version of the scraped news, which loops over the bootstrap card to insert the news’s title, subtitle, and description.
How to Run Our Live News Application?
Finally, run this npm start command inside your command prompt (and inside your working directory):
|
1 |
npm start |
This command opens your browser to show your live news apps. You can also visit it directly by accessing http://localhost:3000.
Simple yet awesome, right?
Check out the full source code here! [4]
This article is based on this tutorial: https://pusher.com/tutorials/consume-restful-api-react/
Are You Ready to Build Your Own Advanced News API Scraper Apps?
As you can see, the mediastack REST API endpoint provides rich news data and API features that you can connect to any platform or programming language you work with.
Take advantage of the free tier on mediastack, although we recommend you upgrade your subscription plan if you need more powerful features (HTTPS Encryption, Historical Data, Commercial Use, Technical Support), You can also contact us for a custom solution. We can’t wait to see what you build with our REST API!
Head over and sign up for free to start integrating resourceful live news data into your apps today!
[1] https://github.com/MuhammadAzizulHakim/apilayerBlog-repo/blob/main/Article15%20-%20mediastack%20%2B%20React.js/reactjs-apilayer2/public/index.html
[2] https://github.com/MuhammadAzizulHakim/apilayerBlog-repo/blob/main/Article15%20-%20mediastack%20%2B%20React.js/reactjs-apilayer2/src/App.js
[3] https://github.com/MuhammadAzizulHakim/apilayerBlog-repo/blob/main/Article15%20-%20mediastack%20%2B%20React.js/reactjs-apilayer2/src/components/newss.js
[4] https://github.com/MuhammadAzizulHakim/apilayerBlog-repo/tree/main/Article15%20-%20mediastack%20%2B%20React.js
