Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up

Source Usage Data for Social Proof on Your Gatsby Site

Queen Raae
March 13th, 2023

Learn how to create a social proof section like the one we added to pruneyourfollows.com, a tool to help you clean up your Twitter timeline:

Section of pruneyourfollows.com showcasing "906 Users" and "20007 Unfollows"

Why Social Proof?

Social proof increases visitors’ trust in your product. By showcasing that loads of people already use Prune your Follows with the “number of users” stat, we show potential users that “you are not the first!” The “number of unfollows” stat implicitly conveys the message, “You’ll be okay. It works.”

How to Source Usage Data

For Prune your Follows, the steps involved are:

  1. Get the number of users from Xata
  2. Get the number of unfollows from Xata
  3. Create one Gatsby UsageData Node with the numbers

More generically:

  1. Get the number of users from your database
  2. Get another key number from your database
  3. Create one Gatsby Node for the numbers

👀 Look for the corresponding step numbers in the code: 1️⃣, 2️⃣ and 3️⃣.

How to Display Usage Data

I have seen some very creative usage data designs, but you can also get away with a simple design like ours. We lifted it from the Tailwind UI Components Stats Section.

The tailwind component used and customized.

The steps involved:

  1. Query the usage numbers from the Gatsby Data Layer
  2. Display the data with the design of your choosing

👀 Again, look for the step numbers in the code example: 1️⃣ and 2️⃣.

Where To Go From Here?

I hope you feel inspired to create a social proof section for your site, and you might find these resources helpful while doing so:

Feel free to tweet me (@raae) a link when you deploy your social proof section, and I’ll send a gold star your way 🌟

Share on TwitterShare on LinkedInShare on FacebookShare via Email

Benedicte (Queen) Raae is a Norwegian Web Developer who loves jamming together side projects for fun and profit. She is a professional early adopter and helps companies maintain their Gatsby plugins. Raae was introduced to HTML + CSS by her junior high teacher almost 20 years ago. She holds an MSc in Computer Science and has developed apps trusted by the Swedish Armed Forces, The Norwegian Water Resources and Energy Directorate, and others.

Follow Queen Raae on Twitter

Tagged with social proof, tailwind, xataView all Tags

Talk to our team of Gatsby Experts to supercharge your website performance.

Contact Gatsby Now
© 2023 Gatsby, Inc.