Free Facebook Review Widgets for Next.js / React

How to Add Facebook Reviews to Next.js / React

One embed code, pasted into the next/script component.

1. 1

   In app/layout.tsx import Script from next/script and add the BlooTrue loader once inside the body, with strategy set to afterInteractive.

2. 2

   Drop the widget div into any page or component where the reviews should appear.

3. 3

   Change class to className on that div — the snippet is HTML and JSX will not accept class.

4. 4

   Deploy. The loader watches the DOM, so the widget survives client-side navigation too.

A raw <script> tag pasted into a component will not execute, which is what next/script is for — and the snippet's class attribute has to become className or React drops it.

Facebook Widget on Next.js / React — FAQ

Is the BlooTrue Facebook review widget free for Next.js / React?

Yes. BlooTrue is completely free to embed Facebook reviews on Next.js / React. No plugin, no recurring fee, unlimited views. The free plan shows your reviews with BlooTrue branding in the footer; paid plans remove the branding.

How do I install the widget on Next.js / React?

In app/layout.tsx import Script from next/script and add the BlooTrue loader once inside the body, with strategy set to afterInteractive. Drop the widget div into any page or component where the reviews should appear. Change class to className on that div — the snippet is HTML and JSX will not accept class. Deploy. The loader watches the DOM, so the widget survives client-side navigation too.

Anything specific to Next.js / React worth knowing before I embed?

A raw <script> tag pasted into a component will not execute, which is what next/script is for — and the snippet's class attribute has to become className or React drops it.

Where should I place Facebook reviews on Next.js / React for the biggest lift?

Under the hero on the landing page and beside the pricing CTA — on SaaS and agency sites the proof belongs at the decision point.

Do the reviews stay up to date automatically?

Paid plans auto-sync your Facebook reviews daily, so the widget always shows your latest 5-star reviews without touching Next.js / React again. The free plan shows the reviews imported at setup.

Facebook only lets people click Recommends, so what rating does my widget display?

Facebook dropped numeric stars for Pages in 2018, so the widget does not invent a Facebook star average. Each Recommends becomes a 5-star card, and the header converts the Page's overall recommendation percentage into a 0 to 5 star figure. Both come from your Page, not from a calculation over the cards on your site.

Can I use Facebook's own Page Plugin to embed my recommendations?

No. The Page Plugin drops your whole Page timeline into an iframe and has no setting to show only recommendations, and Facebook's own tools cannot place them on an external site at all. The BlooTrue builder takes your Page URL instead and gives you a one-line embed, with no Facebook ad spend and no plugin required.

My Page has no Reviews tab, so where would the recommendations come from?

They only exist once you turn them on: open your Facebook Page settings, find the Reviews or Recommendations option and switch it on. Until then customers cannot tap Recommends and the builder finds nothing to import. A free widget holds the recommendations found that day; paid plans check the Page daily and drop the BlooTrue badge.