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:

1. Make an API request for the trending articles for a spot.
   
   The API call returns a JSON object of responses.
   Entire Spot

   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>'
   

2. 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.

   HTML

   <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>