Le recensioni Google sul nostro sito

I clienti si fidano di coloro che hanno investito il proprio tempo nella condivisione delle esperienze di acquisto e di prova di prodotti o servizi. Pensiamo solo al potere che hanno le recensioni dei clienti di Amazon nel convincerci (o meno) di acquistare quel determinato prodotto.

I clienti amano essere ascoltati e le recensioni online sono il modo più semplice e diretto per innescare tale ascolto e incrementare la reputazione del brand.

In Google Maps si posso esprimere le nostre opinioni sui luoghi che abbiamo visitato. Le recensioni sono pubbliche, pertanto tutti possono consultarle.

Ecco come si presenta 20BIT su Google Maps
Ecco come si presenta 20BIT su Google Maps

Ma se volessimo che le stesse recensioni fossero visualizzate dagli utenti quando visitano il nostro sito web? Se volessimo che la nostra pagina visualizzi la nuova recensione appena inserita in modo automatizzato?

Per fare questo dobbiamo usare le Google Places API: in questo modo interroghiamo il database di Google per farci restituire le informazioni richieste. Con un po’ di fantasia (e conoscenza di html e css) ne personalizziamo poi la visualizzazione sul nostro sito.

Primi passi

Per prima cosa abbiamo bisogno del codice univoco della nostra attività geolocalizzata sulle mappe di Google: andiamo qui e cerchiamola nel campo di ricerca. Una volta trovata annotiamo il lunghissimo codice alfanumerico chiamato Place ID.

Recuperiamo il Place ID da Google Places API
Recuperiamo il Place ID da Google Places API

Come secondo passaggio preliminare otteniamo da Google una chiave di sicurezza. Per farlo basterà seguire il wizard di google (in inglese):

  1. Selezioniamo dal menu a tendina Create a new project e clicchiamo su Continue
  2. Dalla dashboard attiviamo le APIs
  3. Dalle liste delle API di Google scegliamo la voce Google Places API Web Services (la trovate sotto il gruppo Google Maps APIs)  e poi abilitiamo le API cliccando su Enable
  4. Ora andiamo sul menu Credentials: scegliamo dal menu API Key e poi Server Key.
    Diamo un nome alla nostra chiave e clicchiamo Create
  5. Annotiamoci  la nostra API key
La API key ci autorizza a fare richieste API a Google
La API key ci autorizza a fare richieste API a Google

Lo script PHP

Ora possiamo aprire una pagina PHP vuota (che chiameremo recensioni.php) e cominciare ad associare il nostro Place ID e la nostra API key a due variabili:

$id = 'incollateQuiLaPlaceId';
$key = 'incollateQuiLaApiKey';

Associamo ora a un’altra variabile PHP l’url per interrogare le API di Google e concateniamo le nostre due variabili create precedentemente

$api = 'https://maps.googleapis.com/maps/api/place/details/json?placeid='.$id.'&key='.$key;
echo $api;

Ora la nostra pagina visualizza la nostra URL compilata. Copiamola e incolliamola nella barra degli indirizzi e otterremo il nostro file JSON.

Il file JSON con le recensioni (visualizzato con Online JSON Viewer)
Il file JSON con le recensioni (visualizzato con Online JSON Viewer)

Vediamo che ci sono molte informazioni della nostra attività  (il nome, l’indirizzo, gli orari di apertura, insomma, tutte le informazioni che abbiamo inserito nella pagina di gestione della nostra attività). Quello che a noi interessa però sono le recensioni, qui chiamate reviews.

Ora prima di cominciare a stampare a schermo le informazioni che vogliamo, usiamo due funzioni di PHP:  file_get_contentsche legge il contenuto di un file e lo restituisce sotto forma di stringa, in questo caso una stringa formattata in JSON e la funzione json_decodeche decodifica la stringa json in un oggetto rendendo ogni attributo più facile da gestire.


$feed = json_decode(file_get_contents($api));

Ora che abbiamo tutto quello che ci serve cominciamo a manipolare le informazioni: cominciamo con un semplice ciclo che ci stampi ogni recensione


foreach ($feed->result->reviews as $current) :
// qui inseriremo i dati della recensione
endforeach;

Stampiamo gli elementi che compongono la recensione

Stampiamo tutte (o quasi) le informazioni della recensione: cominciamo con l’avatar dell’autore (se presente) appendendo anche la risoluzione (?size=) che preferiamo.


if ( isset ($current->profile_photo_url)) :
echo '<img alt="" src="'.$current->profile_photo_url.'?size=48" />';
endif;

Ora stampiamo il nome dell’autore

 echo '<h2>'.$current->author_name.'</h2>'; 

Successivamente cicliamo tante volte una stella quante ne ha inserite l’autore


for ($i=0;$i<$current->rating;$i++)
echo '&star;';
endfor;

Infine il testo della recensione, se presente


if ( isset($current->text) ) :
echo '<p>'.$current->text.'</p>';
endif;

Il codice completo

Mettiamo un po’ di ordine, aggiungendo qualche ulteriore tag html. Usiamo anche l’url del profilo dell’autore come link per visualizzare la pagina google+ associata.

Ecco il codice completo


<?php

$id = 'incollateQuiLaPlaceId';
$key = 'incollateQuiLaApiKey';
$api = 'https://maps.googleapis.com/maps/api/place/details/json?placeid='.$id.'&key='.$key;
$feed = json_decode(file_get_contents($api));

if ($feed->status=='OK') {
foreach ($feed->result->reviews as $current) {
echo '<div class="review">';

if ( isset($current->profile_photo_url) ) :
echo '<a href="'.$current->author_url.'" target="_blank">';
echo '<img src="'.$current->profile_photo_url.'?size=48" />';
echo '</a>';
endif;

echo '<h2><a href="'.$current->author_url.'" target="_blank">';
echo $current->author_name;
echo '</a></h2>';

for ($i=0;$i<$current->rating;$i++):
echo '&star;';
endfor;

if ( isset($current->text) ) :
echo '<p>'.$current->text.'</p>';
endif;

echo '</div>';
}

} else {
echo 'Non sono riuscito a caricare le recensioni';
}

?>

Se abbiamo fatto tutto nel modo giusto,  ora dovremmo vedere una lista delle recensioni con l’avatar dell’utente linkato al profilo google+ dell’autore, il nome dell’autore (anch’esso linkato al profilo google+ dell’autore), le valutazione espressa con le stelle e il testo della recensione.

Carichiamo le recensioni sul nostro sito

Come ultimo passaggio andiamo a inserire il contenuto di questa pagina in un div contenitore nella pagina dove vogliamo visualizzare le recensioni (ad esempio nella pagina contatti, o nel footer del nostro sito). Lo possiamo fare con la funzione include di PHP:


<h1>Recensioni</h1>
<div id="reviews">
<?php include ('recensioni.php'); ?>
</div>

In questo modo però se Google ci mettesse un po’ a restituirci le recensioni la pagina rimarrebbe in attesa: decidiamo quindi che le recensioni vengono caricate alla fine, quando il sito è stato caricato completamente. Per fare questo usiamo jQuery (una libreria Javascript) e la sua funzione load.

Appena prima del tag di chiusura del body carichiamo innanzitutto la libreria dal CDN di Google. Diciamo poi a jQuery di caricare (load) la pagina delle recensioni (recensioni.php) e di inserirlo nel dom all’interno del div con id reviews (#reviews).


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#reviews').load('recensioni.php');
});
</script>
</body>

All’interno del nostro div che ospiterà le recensioni inseriamo un semplice loader, così diremo all’utente di attendere il caricamento delle recensioni


<h1>Recensioni</h1>
<div id="reviews">
<img alt="" src="images/loading.gif" /> Caricamento recensioni in corso...
</div>

Ora non vi resta che utilizzare qualche regola CSS per dare il giusto stile alle recensioni.


Immagine di copertina: PatternPictures
Annunci

7 pensieri su “Le recensioni Google sul nostro sito

  1. Paolo

    Salve, prima di tutto vorrei complimentarmi per l’ottima guida!
    Il metodo descritto funziona bene, però l’interrogazione mi tira fuori solo 5 delle 13 recensioni dei miei clienti. Come posso estrapolarle tutte?
    Grazie in anticipo.

    Mi piace

    1. Flavio

      Ciao Paolo. Grazie per i complimenti: sono contento che ti sia servita e che funzioni.
      Purtroppo di default restituisce un array json fino a 5 elementi come scritto nella documentazione: reviews[] a JSON array of up to five.
      https://developers.google.com/places/web-service/details

      Il mio consiglio è estrapolarne 5 e poi magari creare un link verso la tua pagina Google+ scrivendo ad esempio “Leggi tutte le [user_ratings_total] recensioni”

      Mi piace

      1. Paolo

        Grazie! Anche questa soluzione mi sembra buona.
        Solo non riesco a capire come estrapolare il numero di recensioni totali.
        Vedo che nella risposta di cui sopra è riportato: [user_ratings_total]
        E’ per caso un dato ottenuto dal file JSON?!?

        Mi piace

      2. Hai ragione. Da quando ho scritto l’articolo hanno eliminato la chiave “user_ratings_total” (aggiungendo però la chiave “rating”: la media delle recensioni).

        Un metodo alternativo non semplice sarebbe prendere il contenuto (file_get_contents) della pagina maps dell’attività e fare una regExp: ovvero trovare dove c’è scritto recensioni e prendere il numero che c’è davanti. L’alternativa semplice (fintanto che – spero – google ritorni sui suoi passi) è inserire manualmente nel codice html il numero di recensioni e ogni qualvolta ricevi una recensione andare ad aggiornare quel numero.

        Mi piace

  2. gabriele

    Fantastico, ma attenzione che nella prima parte dove spieghi ( non nel codice completo ) hai messo la url dentro una variabile chiamata $url e poi richiami $api che non esiste

    Mi piace

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...