Overview
Search for news articles and headlines from various sources worldwide
Integration Guide
Step 1: Get API Key
To use the News API, you need to sign up for an account and get an API key.
- Visit News API Registration
- Create an account with your email
- Verify your email address
- Your API key will be displayed on your account dashboard
Step 2: Set Up Your Project
Create the necessary files for your news application:
- index.html - The HTML structure
- styles.css - CSS for styling
- news.js - JavaScript for API integration
- placeholder.jpg - A fallback image for articles without images
Step 3: Implement the Code
Copy the following code into your project files:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>News Explorer</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header>
<h1>News Explorer</h1>
<p>Stay updated with the latest news from around the world</p>
</header>
<div class="search-container">
<input type="text" id="search-input" placeholder="Search for news...">
<button id="search-btn">Search</button>
</div>
<div class="filters">
<div class="filter-group">
<label for="category-select">Category:</label>
<select id="category-select">
<option value="">All Categories</option>
<option value="business">Business</option>
<option value="entertainment">Entertainment</option>
<option value="general">General</option>
<option value="health">Health</option>
<option value="science">Science</option>
<option value="sports">Sports</option>
<option value="technology">Technology</option>
</select>
</div>
<div class="filter-group">
<label for="country-select">Country:</label>
<select id="country-select">
<option value="">All Countries</option>
<option value="us">United States</option>
<option value="gb">United Kingdom</option>
<option value="ca">Canada</option>
<option value="au">Australia</option>
<option value="de">Germany</option>
<option value="fr">France</option>
<option value="in">India</option>
<option value="jp">Japan</option>
</select>
</div>
<div class="filter-group">
<label for="sort-select">Sort By:</label>
<select id="sort-select">
<option value="publishedAt">Newest First</option>
<option value="relevancy">Relevancy</option>
<option value="popularity">Popularity</option>
</select>
</div>
</div>
<div class="tabs">
<button class="tab-btn active" data-tab="headlines">Top Headlines</button>
<button class="tab-btn" data-tab="everything">All News</button>
<button class="tab-btn" data-tab="sources">News Sources</button>
</div>
<div id="news-container" class="news-container">
<!-- News articles will be displayed here -->
<div class="loading">Loading news...</div>
</div>
<div class="pagination" id="pagination">
<!-- Pagination controls will be displayed here -->
</div>
</div>
<script src="news.js"></script>
</body>
</html>Step 4: Replace the API Key
Replace your_api_key_here in the JavaScript file with your actual API key.
Security Note
In a production environment, you should never expose your API key in client-side code. Use a server-side solution or environment variables instead.
Step 5: Test Your Implementation
Open your HTML file in a browser to test your news application. You should be able to:
- View top headlines from various countries and categories
- Search for news articles by keywords
- Browse news sources
- Filter and sort results
- Navigate through paginated results
Error Handling
Common Errors
- 401 Unauthorized: Invalid API key
- 429 Too Many Requests: Rate limit exceeded
- 400 Bad Request: Invalid parameters
- 426 Upgrade Required: Free plan not supported for this request
Rate Limiting
The free tier of News API allows:
- 100 requests per day
- Access to the /top-headlines endpoint only
- No access to /everything endpoint (requires paid plan)
- Results limited to articles published in the last month
Important Note
The free plan is limited to development environments only. For production use, you'll need to upgrade to a paid plan. Also, the free plan doesn't allow you to use the API on a public website.
API Details
- Base URL
https://newsapi.org/v2- Authentication
- API Key
- Documentation
- Official Docs
Endpoints
- GET
/top-headlinesGet top headlines by country, category, or source
Parameters
apiKey*string - Your API keycountrystring - 2-letter ISO 3166-1 country code (e.g., us, gb, de)categorystring - Category (business, entertainment, general, health, science, sports, technology)sourcesstring - Comma-separated string of news source IDs (cannot be mixed with country or category)qstring - Keywords or phrases to search forpageSizenumber - Number of results per page (1-100, default: 20)pagenumber - Page number (default: 1)
- GET
/everythingSearch through all articles
Parameters
apiKey*string - Your API keyqstring - Keywords or phrases to search forsourcesstring - Comma-separated string of news source IDsdomainsstring - Comma-separated string of domains to restrict the search tofromstring - Date and optional time in ISO 8601 format (e.g., 2023-12-01 or 2023-12-01T12:00:00)tostring - Date and optional time in ISO 8601 formatlanguagestring - 2-letter ISO-639-1 language code (e.g., en, de, fr)sortBystring - Sort by: relevancy, popularity, publishedAt (default: publishedAt)pageSizenumber - Number of results per page (1-100, default: 20)pagenumber - Page number (default: 1)
- GET
/sourcesGet all news sources available
Parameters
apiKey*string - Your API keycategorystring - Category (business, entertainment, general, health, science, sports, technology)languagestring - 2-letter ISO-639-1 language code (e.g., en, de, fr)countrystring - 2-letter ISO 3166-1 country code (e.g., us, gb, de)