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

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

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

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)

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_contents – che 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_decode – che 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