top of page
Trending Posts

Trending Posts

Create your own custom trending posts feed.

Intermediate.png

Beginner

3K

Published:

December 31, 2019

Girl Enjoying her Drink

by

Anchor 1
Hire a Developer

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

Tab 1

.

Tab 2

.

Tab 3

.

This code solution can be complicated.

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

Non-code example.

Non-code example.

Non-code example.

Related Articles

Article Link

Hire a Developer

Velo solutions are powerful tools, but building them on your own can be challenging. Let an experienced Velo development shop build it for you, so you can keep working on your site or business.

Related Examples

Did this help?

Yes

|

No

Thanks for your feedback!

Related Posts

Related Posts

Display related posts in your blog post page

Intermediate.png

Beginner

Custom Comments

Custom Comments

Create your own custom post comments section.

Intermediate.png

Beginner

Custom Post Page

Custom Post Page

Create your own customised blog post page.

Intermediate.png

Intermediate

Anchor 2
bottom of page