Trending Posts

Create your own custom trending posts feed.

Code Level

Beginner

Published

 

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

Collections 

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

 

Code

  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

INTERMEDIATE

Hide and Show Elements

Hide and show elements in response to user interactions

BEGGINER

Hide and Show Elements

Hide and show elements in response to user interactions

BEGGINER

 

This website was designed with Corvid by Wix.