News API

News
Beginner

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.

  1. Visit News API Registration
  2. Create an account with your email
  3. Verify your email address
  4. 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.

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

API Details

Base URL
https://newsapi.org/v2
Authentication
API Key
Documentation
Official Docs

Endpoints

  • GET
    /top-headlines

    Get top headlines by country, category, or source

    Parameters
    • apiKey*
      string - Your API key
    • country
      string - 2-letter ISO 3166-1 country code (e.g., us, gb, de)
    • category
      string - Category (business, entertainment, general, health, science, sports, technology)
    • sources
      string - Comma-separated string of news source IDs (cannot be mixed with country or category)
    • q
      string - Keywords or phrases to search for
    • pageSize
      number - Number of results per page (1-100, default: 20)
    • page
      number - Page number (default: 1)
  • GET
    /everything

    Search through all articles

    Parameters
    • apiKey*
      string - Your API key
    • q
      string - Keywords or phrases to search for
    • sources
      string - Comma-separated string of news source IDs
    • domains
      string - Comma-separated string of domains to restrict the search to
    • from
      string - Date and optional time in ISO 8601 format (e.g., 2023-12-01 or 2023-12-01T12:00:00)
    • to
      string - Date and optional time in ISO 8601 format
    • language
      string - 2-letter ISO-639-1 language code (e.g., en, de, fr)
    • sortBy
      string - Sort by: relevancy, popularity, publishedAt (default: publishedAt)
    • pageSize
      number - Number of results per page (1-100, default: 20)
    • page
      number - Page number (default: 1)
  • GET
    /sources

    Get all news sources available

    Parameters
    • apiKey*
      string - Your API key
    • category
      string - Category (business, entertainment, general, health, science, sports, technology)
    • language
      string - 2-letter ISO-639-1 language code (e.g., en, de, fr)
    • country
      string - 2-letter ISO 3166-1 country code (e.g., us, gb, de)