Trending Posts

Create your own custom trending posts feed.

Code Level




Example Description

In this example we create a trending blog post feed that lists posts based on the number of its views and likes.

Example Code

How We Built It


For this example we used the database collections automatically added to your site if you have a blog:

  • Blog/Posts collection: Contains information about your individual blog posts

  • Blog/Categories collection: Contains information about your blog categories


Page Elements

In our site we added the following page elements:


  • Strip: Custom header strip for a repeater element. 

  • Trending repeater with the following items:

    • Text: Post title

    • Image: Post image

    • Text: Number of “Likes,” converted to text

    • Text: Number of views, converted to text

    • Link: Post URL



  1. Set variables for:

    • likesWeight and viewsWeight: The weight percentages for likes and views. Use these percentages to calculate if a post is trending. 

    • trendingPostsToShow: How many trending posts to display on the page.

  2. When the page is ready, call the loadTrendingPosts() function which holds the core functionality for displaying which posts are trending.

  3. Query the Blog/Posts collection to retrieve all blog posts. 

  4. Calculate the “trending strength” of each blog post  and store the calculations along with each post in a trendingPosts array.

  5. Sort the trendingPosts array.

Display a certain number of posts, as set with the trendingPostsToShow variable.

APIs We Used

Related Articles

Related Examples

Add to Cart Gallery

Let customers to add products to their cart


Hide and Show Elements

Hide and show elements in response to user interactions


Hide and Show Elements

Hide and show elements in response to user interactions



This website was designed with Corvid by Wix.