Embedding Google evaluations in your web site exhibits credibility for your corporation. It exhibits the general public opinion about your services or products. It will increase individuals’s belief and thereby the conversion fee.
Additionally, associating with a Google-like large model offers worth to your corporation. Embedding Google evaluations on an internet site supplies comfort who need to see your evaluations.
https://maps.googleapis.com/maps/api/place/particulars/json
?fields=evaluations,score&
place_id=PLACE_ID&key=YOUR_API_KEY
Google supplies an API to entry the evaluation knowledge. Google Locations API has the endpoint to get the evaluations listing. On this tutorial, we’ll see how one can use the API to embed Google Opinions on an internet site.
It requires the next stipulations to entry the API.
- Create a Google Place ID for your corporation
- Generate API credentials
Tips on how to generate a Google Locations ID for your corporation?
- Log in with the Google Cloud console and activate Locations API.
- Register your corporation identify with the deal with with a billing account.
- Go to Google place finder to filter the enterprise location.
- Get the place ID by the enterprise identify.
Tips on how to create a Google API Key?
The beneath steps are to create a Google API key. This secret’s for authenticating the shopper request and making an attempt to entry the Google evaluations knowledge.
- Create a brand new venture within the Google Cloud console and select the venture.
- Select API and providers from the left menu.
- Navigate to Credentials -> CREATE CREDENTIALS -> API key API.
Chances are you’ll be accustomed to this authentication step if you’re working with Google service by way of API. In a earlier tutorial, we noticed how one can get the Google API credentials when registering Google reCaptcha v3.
Code to fetch Google Opinions API knowledge for an internet site
The beneath easy code fetches the evaluation knowledge utilizing the Google Place API endpoint. It passes the place ID and the API key with the URL.
It sends the specification about which knowledge to be retrieved from the API. It’s within the fields parameter of the endpoint.
On this instance, the fields parameter consists of evaluations, names and score knowledge from the Google Locations API service.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta identify="viewport" content material="width=device-width, initial-scale=1.0">
<hyperlink href="https://phppot.com/php/embed-google-reviews-on-website/score.css" kind="textual content/css" rel="stylesheet" />
<title>Tips on how to embed Google Opinions on web site</title>
</head>
<physique>
<div class="phppot-container">
<h1>Tips on how to embed Google Opinions on web site</h1>
<div id="google-reviews-embed"></div>
</div>
</physique>
<script>
fetch("https://maps.googleapis.com/maps/api/place/particulars/json?place_id=PLACE_ID_HERE&fields=identify,score,evaluations&key=YOUR_API_KEY")
.then(response => {
if (!response.okay) {
throw new Error('Didn't fetch Google Opinions');
}
return response.json();
})
.then(knowledge => {
if (knowledge.standing === 'OK') {
const evaluations = knowledge.outcome.evaluations;
evaluations.evaluations.forEach(evaluation => {
reviewsHTML += "<div class="rating-row">";
reviewsHTML += "<p><b><img src="" + evaluation.profile_photo_url + "" class="avatar" /> " + evaluation.author_name + "</b></p>";
for (var i = 1; i <= 5; i++) {
if (i <= parseInt(evaluation.score)) {
reviewsHTML += "<img src="star-highlight.png" hspace="1" />";
} else {
reviewsHTML += "<img src="star.png" hspace="1" />";
}
}
reviewsHTML += "<p>" + evaluation.textual content + "</p>";
reviewsHTML += "</div>";
});
reviewsHTML += '</div>';
doc.getElementById('google-reviews-embed').innerHTML = reviewsHTML;
} else {
throw new Error(knowledge.standing);
}
})
.catch(error => {
doc.getElementById('google-reviews-embed').innerHTML = 'Error fetching Google Opinions';
}
);
</script>
</html>
The above code renders the best template with Google star scores and evaluation knowledge. The API returns plenty of info to counterpoint the template with extra particulars. If you wish to study PHP star score, the linked article has the code.
Tips on how to present Google evaluations on a WordPress web site
In WordPress, there are plugins to get an embeddable Google Opinions code. The Widgets for Google Assessment is without doubt one of the WordPress plugins that enables getting Google evaluations embeddable.
After putting in and activating this plugin the next steps assist to get the Google Opinions code.
- Configure the Google Place ID to attach with Google API.
- Choose a structure from the accessible templates.
- Select widget settings to configure language and date codecs.
- Save all settings to get the embeddable code.
- Copy the WordPress shortcode to the clipboard.
- Create a WordPress web page and add the shortcode to the content material.
