Source Usage Data for Social Proof on Your Gatsby Site

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:

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

• The Tailwind Components Stats Section for design inspiration.
• The Xata Getting Started Guide to give Xata a spin.

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