Waarom Google Reviews op je website?

Google Reviews zijn tegenwoordig een van de meest invloedrijke factoren voor online succes. Klanten vertrouwen op beoordelingen om beslissingen te nemen, en bedrijven met goede reviews bouwen sneller vertrouwen op bij potentiële klanten die jouw website bezoeken. Door Google Reviews op je website te tonen, maak je een positieve indruk op potentiële klanten. Hierdoor verhoog je je geloofwaardigheid en vergroot je de kans dat bezoekers jouw diensten of producten kiezen. Bovendien helpt het je SEO te verbeteren, omdat interacties met reviews de zichtbaarheid van je website in zoekmachines vergroten. Ten slotte zorgen positieve ervaringen van anderen ervoor dat bezoekers sneller worden overtuigd om actie te ondernemen.

Voordelen van Google Reviews op je website:

Vertrouwen: Google reviews zorgen ervoor dat klanten zich gesteund voelen door de ervaringen van anderen.
Google-integratie: Directe koppelingen met Google verbeteren de betrouwbaarheid van de gegevens.
Altijd up-to-date: Door middel van een connectie met de Google API heb je altijd de recente reviews op je website.

Verhoog je geloofwaardigheid: Laat potentiële klanten zien wat anderen over je zeggen.
Verbeter je SEO: Meer engagement op je website kan je zoekresultaten verbeteren.
Stimuleer conversies: Bezoekers zien positieve ervaringen en worden sneller overtuigd.

Stap 1: Google API toegang instellen

Om toegang te krijgen tot Google Reviews, moet je een Google API-project instellen. Volg deze stappen:

Ga naar de Google Cloud Console: Bezoek Google Cloud Console.
Maak een project aan: Klik op "Nieuw project" of selecteer een bestaand project.
Schakel de Google My Business API in: Zoek naar deze API in de bibliotheek en activeer deze.
Maak een OAuth 2.0-client-ID aan: Onder "Referenties" kun je een nieuwe OAuth 2.0-client-ID maken. Stel redirect-URL’s in zoals http://localhost:5173/api/auth/google voor lokaal gebruik.
Noteer je Client ID en Client Secret: Deze gegevens heb je later nodig.

Tip: Zorg ervoor dat je redirect-URL’s overeenkomen met je ontwikkel- en productiedomeinen.

Stap 2: Authenticatie Opzetten

Om toegang te krijgen tot Google Reviews, moet je gebruikers authenticeren via de OAuth 2.0-flow. Dit is essentieel om de juiste tokens te verkrijgen voor het ophalen van data.

Libraries:

dotenv: Voor het beheren van omgevingsvariabelen. In zowel React als Vue gebruik je deze afhankelijkheid op een vergelijkbare manier om toegang te krijgen tot beveiligde omgevingsvariabelen.
axios: Voor het maken van HTTP-aanvragen. In React kun je bijvoorbeeld een useEffect gebruiken om data op te halen met axios, en in Vue kun je axios aanroepen in de mounted()-lifecycle hook of binnen een composable functie.

Installeer deze libraries:

Server-side code voor authenticatie:

Hier is een voorbeeld van hoe je OAuth-authenticatie kunt implementeren in een SvelteKit-project:

PlainBashC++C#CSSDiffHTML/XMLJavaJavaScriptMarkdownPHPPythonRubySQL

import { json } from '@sveltejs/kit';

import axios from 'axios';

import dotenv from 'dotenv';

dotenv.config();

const AUTH_URL = 'https://accounts.google.com/o/oauth2/auth';

const TOKEN_URL = 'https://oauth2.googleapis.com/token';

export async function GET({ url }) {

const code = url.searchParams.get('code');

if (code) {

try {

const response = await axios.post(TOKEN_URL, {

client_id: process.env.GOOGLE_CLIENT_ID,

client_secret: process.env.GOOGLE_CLIENT_SECRET,

redirect_uri: process.env.GOOGLE_REDIRECT_URI,

grant_type: 'authorization_code',

code

});

const { access_token, refresh_token } = response.data;

return json({ success: true, access_token });

} catch (error) {

return json({ error: error.response?.data || error.message }, { status: 500 });

}

} else {

const authUrl = `${AUTH_URL}?client_id=${process.env.GOOGLE_CLIENT_ID}&redirect_uri=${process.env.GOOGLE_REDIRECT_URI}&scope=https://www.googleapis.com/auth/business.manage&response_type=code&access_type=offline`;

return json({ authUrl });

}

Stap 3: Account ID en location ID ophalen

Voordat je Google Reviews kunt ophalen, heb je zowel een Account ID als een Locatie ID nodig. Dit kan verwarrend zijn, dus hier een uitleg:

Account ID: Dit is een unieke ID die Google toewijst aan je Google My Business-account. Elk bedrijf heeft minstens één Account ID.
location ID: Binnen een Google My Business-account kun je meerdere locaties beheren. Elke vestiging heeft een unieke location ID, die je nodig hebt om reviews op te halen.

Om de account ID en de location ID te verkrijgen, volg je deze stappen:

Haal je Account ID op: Voer een API-call uit naar https://mybusiness.googleapis.com/v4/accounts met je Access Token. In de JSON-respons vind je een lijst met je Google Business-accounts, inclusief de ID’s.
Haal de location ID op Zodra je de Account ID hebt, voer je een API-call uit naar https://mybusiness.googleapis.com/v4/accounts/{accountId}/locations.

Als het goed is krijg je nu een lijst met alle locaties die bij jouw Google-account horen.

Voorbeeld code om dit op te halen:

Met een geldig account-ID kun je nu de locaties ophalen die aan dat account gekoppeld zijn. Dit is cruciaal om de juiste location-ID’s te vinden.

Server-side code:

PlainBashC++C#CSSDiffHTML/XMLJavaJavaScriptMarkdownPHPPythonRubySQL

export async function GET({ params }) {

const { accountId } = params;

const accessToken = process.env.GOOGLE_ACCESS_TOKEN;

try {

const response = await axios.get(

`https://mybusiness.googleapis.com/v4/accounts/${accountId}/locations`,

{

headers: { Authorization: `Bearer ${accessToken}` }

}

);

return json(response.data);

} catch (error) {

return json({ error: error.response?.data || error.message }, { status: 500 });

}

Stap 4: Google Reviews ophalen van een locatie

Met een location-ID kun je de Google Reviews ophalen die aan die specifieke locatie gekoppeld zijn.

Voorbeeld Server-side code:

PlainBashC++C#CSSDiffHTML/XMLJavaJavaScriptMarkdownPHPPythonRubySQL

export async function GET({ params }) {

const { locationId } = params;

const accessToken = process.env.GOOGLE_ACCESS_TOKEN;

try {

const response = await axios.get(

`https://mybusiness.googleapis.com/v4/accounts/{accountId}/locations/${locationId}/reviews`,

{

headers: { Authorization: `Bearer ${accessToken}` }

}

);

return json(response.data);

} catch (error) {

return json({ error: error.response?.data || error.message }, { status: 500 });

}

Stap 5: Google Reviews tonen op je Website

Als alle voorgaande stappen is gelukt kun je de verzamelde reviews op je website tonen. Hier is hoe je dit kunt doen in Svelte, React, en Vue:

Svelte:

PlainBashC++C#CSSDiffHTML/XMLJavaJavaScriptMarkdownPHPPythonRubySQL

Plain Bash C++ C# CSS Diff HTML/XML Java JavaScript Markdown PHP Python Ruby SQL

import { onMount } from 'svelte';

let reviews = [];

let error = null;

async function fetchReviews() {

try {

const response = await fetch('/api/google/locations/{locationId}/reviews');

const data = await response.json();

if (data.error) {

error = data.error;

} else {

reviews = data.reviews || [];

}

} catch (err) {

error = err.message;

}

onMount(fetchReviews);

{#if error}

{error}

{/if}

{#if reviews.length === 0}

Geen reviews gevonden...

{/if}

{#each reviews as review}

{review.reviewer.displayName}

⭐ {Number.isInteger(review.starRating) ? `${review.starRating}.0` : review.starRating}

{review.comment}

{/each}

React :

PlainBashC++C#CSSDiffHTML/XMLJavaJavaScriptMarkdownPHPPythonRubySQL

Plain Bash C++ C# CSS Diff HTML/XML Java JavaScript Markdown PHP Python Ruby SQL

import React, { useEffect, useState } from 'react';

function GoogleReviews() {

const [reviews, setReviews] = useState([]);

const [error, setError] = useState(null);

useEffect(() => {

async function fetchReviews() {

try {

const response = await fetch('/api/google/locations/{locationId}/reviews');

const data = await response.json();

if (data.error) {

setError(data.error);

} else {

setReviews(data.reviews || []);

}

} catch (err) {

setError(err.message);

}

fetchReviews();

}, []);

if (error) return

Error: {error}

;

if (reviews.length === 0) return

Geen reviews gevonden...

;

return (

{reviews.map((review, index) => (

{review.reviewer.displayName}

⭐ {Number.isInteger(review.starRating) ? `${review.starRating}.0` : review.starRating}

{review.comment}

))}

);

}

export default GoogleReviews;

Vue:

PlainBashC++C#CSSDiffHTML/XMLJavaJavaScriptMarkdownPHPPythonRubySQL

Plain Bash C++ C# CSS Diff HTML/XML Java JavaScript Markdown PHP Python Ruby SQL

export default {

data() {

return {

reviews: [],

error: null

};

mounted() {

fetch('/api/google/locations/{locationId}/reviews')

.then((response) => response.json())

.then((data) => {

if (data.error) {

this.error = data.error;

} else {

this.reviews = data.reviews || [];

}

})

.catch((err) => {

this.error = err.message;

});

}

};

In7dagen: Vooruitstrevend in software & grafisch ontwerp