Trending Articles ᴺᴱᵂ

With the Trending Articles API, you can retrieve and sort trending articles from a specific spot ID. When integrated into your site, this API enhances content discovery and user engagement across your site:

Increased user engagement. Highlighting trending articles encourages users to explore more content and spend more time on your site.
Implementation flexibility. Designing a custom widget allows you to seamlessly integrate trending articles into your site's layout and user experience.
Content strategy insights. Analyzing trending articles helps you understand what drives engagement on your site and make data-driven decisions to optimize your editorial strategy.

Retrieve and display trending articles

ℹ️
The initial request to this API using a spot's API key sets up the API and may take up to a minute. Subsequent calls will not experience this delay.
This initial request can be made during testing in a development environment or directly through the interactive API reference documentation.

Follow these steps to retrieve and use trending articles:

Make an API request for the trending articles for a spot.

The API call returns a JSON object of responses.

curl --request GET \
     --url https://api.openweb.com/engagement-api/trending-articles \
     --header 'accept: application/json' \
     --header 'x-api-key: <ENGAGEMENT_TOKEN>' \
     --header 'x-count: 10' \
     –-header 'x-interval: day' \
     --header 'x-spot-id: <SPOT_ID>'

Customize and display the JSON object of responses in an existing <div> on a page.

💡
As an alternative, you can export the API response into an analytics tool to evaluate the charactertistics of the articles that drive engagement on your site.

⚠️
The following code snippet demonstrates one possible approach to insert trending articles into an existing <div> named trendingarticles.
For your specific use case, be sure to test your code thoroughly in a development environment before deploying it to a production environment.

<script>
  // Sample JSON response
  const response = <API_JSON_RESPONSE>;

  function formatTimestamp(timestamp) {
    const date = new Date(timestamp * 1000);
    return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
  }

  function sanitizeHtml(str) {
    const temp = document.createElement('div');
    temp.textContent = str;
    return temp.innerHTML;
  }

  function renderArticle(article) {
    const tags = article.ArticleTags[0].replace(/"/g, '').split(',').map(tag => tag.trim());
    
    return `
      <div class="article">
        <a href="${sanitizeHtml(article.url)}">
          <img src="${sanitizeHtml(article.thumbnail_url)}" alt="${sanitizeHtml(article.title)}" class="thumbnail">
        </a>
        <h3><a href="${sanitizeHtml(article.url)}">${sanitizeHtml(article.title)}</a></h3>
        <p class="timestamp">Published on: ${formatTimestamp(article.ArticleDate)}</p>
        <p class="stats">
          <span class="comments">💬 ${article.TotalCommentCount || 0} comments</span>
          <span class="replies">↩️ ${article.TotalReplyCount || 0} replies</span>
        </p>
        <p class="tags">Tags: ${tags.map(sanitizeHtml).join(', ')}</p>
      </div>
    `;
  }

  function injectArticles() {
    const trendingArticlesDiv = document.getElementById('trendingarticles');
    if (!trendingArticlesDiv) {
      console.error('Element with ID "trendingarticles" not found.');
      return;
    }

    let articlesHtml = '';
    response.articles.forEach(article => {
      articlesHtml += renderArticle(article);
    });

    trendingArticlesDiv.innerHTML = articlesHtml;
  }

  window.addEventListener('load', injectArticles);
</script>