Create a dynamic rating image for your Google Reviews

May 19, 2022

You may ask yourself, why would I need this? But if you have things like newsletters where you want to show your trust, this could be something useful. You can easily host this on your webspace and embed it as image later.

Requirements

• PHP GD Lib has to be enabled
• Google API Key for your Google Places requests
• Your Google Place ID to make a succesful request

Result

• Download Project Files

1. Enable GD Lib if not already

If you have access to your php.ini and your GD Lib is not enabled, search for:

;extension=gd

and remove the semicolon and then restart your webserver:

extension=gd

2. Create a Google API Key

Go to Google Documentation and follow the steps to create your API Key. You can also just work with every other API of your Review Data. But for this we take Google.

3. Get your Google Places ID

If your company is already listed on Google get to the Place ID Link and enter the name of your company. Once you found it, Google will tell you the correct Places ID.

4. Let's build the script

First step we define content type as image/png, so when we embed this with our url later, it will be recognized as png image.

Your data will be returned as json, but as a string if you fetch with file_get_contents. To access it again we use json_decode here.

<?php
header("Content-type: image/png");

$api_key = "YOUR_API_KEY";
$places_id = "YOUR_PLACES_ID";
$data = file_get_contents("https://maps.googleapis.com/maps/api/place/details/json?key=".$api_key."&placeid=".$places_id);
$data = json_decode($data);

$logo = imagecreatefrompng("assets/logo-google.png");
$font_normal = "assets/OpenSans/OpenSans-Medium.ttf";
$font_bold = "assets/OpenSans/OpenSans-Bold.ttf";
$star_full = imagecreatefrompng("assets/star_full.png");
$star_half = imagecreatefrompng("assets/star_half.png");

Now create the image itself. With the $widget var we set the image dimensions, here at 270x150 pixels. What we can do here is, set an option for transparent or white background with a simple if/else. If you add ?nobg at the end of your url later you can have transparency on your widget.

We set text color to some grey here. Values are RGB, if you want to go for black you use 0,0,0 instead of 155,155,155 for $text_color var.

$widget = imagecreatetruecolor(270, 150);
if(isset($_GET["nobg"])) {
    imagesavealpha($widget, true);
    $alpha = imagecolorallocatealpha($widget, 0, 0, 0, 127);
    imagefill($widget, 0, 0, $alpha);
}
else {
    $white = imagecolorallocate($widget, 255, 255, 255);
    imagefill($widget, 0, 0, $white);
}
$text_color = imagecolorallocate($widget, 155, 155, 155);

Ok, we have defined the logo, fonts, stars, image size and colors. Now adjust everything in the correct place. This might be some trial and error, because the starting point of every elements X and Y position is top left.

We first copy in our logo and stars. We define $rating var for multiple use in this script. It comes from our api json data and tells the star rating e.g. 4.8 of your company. To understand the positioning coords check imagecopy and imagettftext in the manual, it's very much self explaining then.

$rating = $data->result->rating;

imagecopy($widget, $logo, 45, 20, 0, 0, 172, 57);
imagecopy($widget, $star_full, 58, 78, 0, 0, 32, 32);
imagecopy($widget, $star_full, 88, 78, 0, 0, 32, 32);
imagecopy($widget, $star_full, 118, 78, 0, 0, 32, 32);
imagecopy($widget, $star_full, 148, 78, 0, 0, 32, 32);
if($rating >= 4.5) {
    imagecopy($widget, $star_full, 178, 78, 0, 0, 32, 32);
}
elseif($rating < 4.5) {
    imagecopy($widget, $star_half, 178, 78, 0, 0, 32, 32);
}

Then we copy in the text to show star rating and amount of ratings.

For the amount of user ratings we number_format the value to add a thousands delimiter. This also comes from Google's api data.

imagecopy($widget, $logo, 45, 20, 0, 0, 172, 57);
imagettftext($widget, 13, 0, 40, 133, $text_color, $font_bold, $rating);
imagettftext($widget, 13, 0, 70, 133, $text_color, $font_normal, "Stars |");
imagettftext($widget, 13, 0, 130, 133, $text_color, $font_bold, number_format($data->result->user_ratings_total, 0, "", "."));
imagettftext($widget, 13, 0, 165, 133, $text_color, $font_normal, "Reviews");

As the last step we finally create the image. If you have no errors it will show the image, either way it will just show a small square.

imagepng($widget);
imagecolordeallocate($text_color);
imagedestroy($widget);
?>

5. Embed it where you want

Our image is ready and will now always show the actual rating. To keep the api requests low I highly recommend to cache the file yourself into a temp file. Then just make a request every hour, that should be enough. You can check this post for more information.

To embed it, do it like every other image:

<img src="http://yourdomain.com/trust.php" alt="some_alt_text">

And to have the transparent background:

<img src="http://yourdomain.com/trust.php?nobg" alt="some_alt_text">

That's it.