Widget quotazioni immobiliari

ATTENZIONE: dal prossimo 31 Gennaio 2017 sarà necessaria una registrazione per utilizzare il widget

Per continuare ad utilizzare il widget sul vostro sito sarà necessario chiedere la registrazione e ottenere dei codici accesso. Utilizzate il form dei contatti per ricevere ulteriori informazioni.


Aggiornamento del widget: versione 1.1

È online un aggiornamento del widget, con alcune modifiche:
  • Supporto SSL: ora il widget può essere caricato sia in http che in https
  • Parametri dell'onComplete: ora viene passata tra le altre cose la differenza percentuale, ma non più i valori puntuali

Il widget nel proprio sito

Grazie a mercato-immobiliare.info è ora possibile inserire nel proprio sito il grafico dell'andamento delle quotazioni immobiliari in una qualsiasi città italiana. Gratuitamente e semplicemente.

E' anche possibile ottenere (e visualizzare quindi in qualunque modo) l'elenco delle quotazioni stesse, il valore massimo e quello minimo e la variazione percentuale tra il primo e l'ultimo giorno.

Vedi come inserire il widget, leggi la documentazione di dettaglio oppure prova il generatore di codice.

Se hai comunque dei problemi contattaci, vedremo di darti una mano.


Come inserire il widget

Per utilizzare il widget è necessario inserire un piccolo frammento di codice che richiama uno script (in javascript) che si occupa di generare il grafico desiderato. Allo script devono essere passati alcuni parametri (la città, la tipologia, etc), mentre altri sono opzionali (l'altezza e larghezza, il numero di giorni, etc).

Il widget può essere utilizzato su QUALSIASI SITO, indipendentemente dal linguaggio col quale è realizzato (PHP, ASP, JAVA, etc); è necessario solo che possa essere inserito uno script.

L'esempio più semplice

Per visualizzare il widget nel modo più semplice, bastano solo 2 righe di codice. Supponiamo di voler visualizzare il grafico della quotazione degli appartamenti a Milano negli ultimi 30 giorni:

Basterà inserire il codice seguente:

<a id='milano31' href='http://www.mercato-immobiliare.info'>
Quotazione appartamenti a Milano negli ultimi 31 giorni
</a>

<script type="text/javascript"
src="http://www.mercato-immobiliare.info/widget.js?widgetID=milano31&amp;province=MI&amp;city=Milano&amp;type=appartamento">
</script>

N.B. Per i siti che utilizzano una connessione sicura (https) come questo blog è possibile scaricare il widget in https:

<a id='milano31' href='http://www.mercato-immobiliare.info'>
Quotazione appartamenti a Milano negli ultimi 31 giorni
</a>

<script type="text/javascript"
src="https://www.mercato-immobiliare.info/widget.js?widgetID=milano31&amp;province=MI&amp;city=Milano&amp;type=appartamento">
</script>

Come prima cosa va inserito un link (tag html <a>), esattamente nel punto in cui si desidera che venga inserito il grafico. Tale link dovrà necessariamente puntare ad una pagina di www.caasa.it o di www.mercato-immobiliare.info e dovrà necessariamente contenere un testo non vuoto (anche se tale testo verrà sostituito dal grafico stesso).

Al link dovrà anche essere associato un id, in modo da permettere allo script di inserire il grafico nel punto giusto ed/o di inserire più grafici in punti diversi. Inserito il link, dev'essere inserito nella pagina anche uno script (a partire dalla riga 4 nel codice). Tale script può essere inserito ovunque (nel tag <head> della pagina, immediatamente prima o dopo il link, subito prima della fine del tag <body>). Allo script vanno passati (come parametri della query string) almeno 4 parametri obbligatori:

  • widgetID: l'id del link <a> inserito
  • city: il nome della città della quale si vogliono visualizzare le quotazioni
  • province: il codice (2 lettere) della provincia nella quale si trova la città
  • type: la tipologia d'immobile di cui si desiderano le quotazioni

Selezione manuale

Nel caso in cui non siano indicati la città o la tipologia, verrà visualizzato un form che consentirà all'utente finale di effettuare la selezione e di visualizzare quindi il grafico desiderato.

L'utilizzo è del tutto analogo al caso precedente e ( a parte città e tipologia ) possono essere indicati tutti gli altri parametri. Un esempio è il seguente:

Basterà inserire il codice seguente:

<a id="misel" href="http://www.mercato-immobiliare.info/">Quotazioni Immobiliari</a>
<script type="text/javascript" src="http://www.mercato-immobiliare.info/widget.js?widgetID=misel&amp;width=350&amp;height=160&amp;days=180"></script>
 

jQuery

Il widget delle quotazioni immobiliari fa uso internamente di jQuery. Non è però indispensabile che jQuery sia caricato esternamente, visto che nel caso in cui non sia presente viene caricato automaticamente. Il widget che consente la selezione utilizza anche jQueryUI e anche in questo caso è in grado di caricarlo automaticamente se non è già in uso. Potrebbero però potrebbero esserci dei problemi di compatibilità se sono utilizzate delle librerie "personalizzate" che non contengono tutti i widget utilizzati. Si consiglia quindi di utilizzare la versione completa per evitare incompatibilità.

Il widget delle quotazioni immobiliari è compatibile con jQuery 1.5 o superiore.

Un esempio più complesso

Il widget associa al grafico un titolo appropriato (provate a passare sopra al grafico con il mouse), ma è anche possibile ricevere dal widget informazioni più dettagliate sulle quotazioni ed utilizzarle per mostrarle come si vuole. Consideriamo di essere interessati alla quotazione delle ville a Roma negli ultimi 2 mesi e di voler anche mettere in evidenza la variazione percentuale:

Quotazioni ville a Roma negli ultimi 2 mesi

Differenza:

Niente di più facile: il widget consente di utilizzare una funzione che viene chiamata al completamento della visualizzazione alla quale viene passato un oggetto contenente informazioni aggiuntive sulle quotazioni, compreso il valore massimo e minimo del periodo e la variazione percentuale.

Bisognerà quindi inserire:
  • Il link che conterrà il grafico ed i "segnaposto" per le informazioni aggiuntive con un eventuale foglio di stile (per la formattazione):
    <style type="text/css"><!--
     .value, .neg, .pos { font-size: 16px; font-weight: bold; }
     .value:after { content:" €/m²" }
     .neg:after, .pos:after { content:" %" }
     .neg { color:red; }
     .pos { color: green; }
    --></style>
    <a id="roma60" title="Quotazione Ville a Roma negli ultimi 60 giorni" href="http://www.mercato-immobiliare.info/lazio/roma.html"> Quotazioni ville a Roma negli ultimi 2 mesi </a>
    Differenza: <span id="diff"></span>
    
  • Una funzione javascript che inserirà i valori desiderati:
    <script type="text/javascript">// <![CDATA[
    function miComplete(data){
                        jQuery("#diff").text(data.pdiff.toFixed(2));
                        if ( data.pdiff < 0 )
                           jQuery("#diff").addClass("neg");
                        else
                           jQuery("#diff").addClass("pos");                   
    }               
    // ]]></script>
    
  • A questo punto basta inserire il widget con i parametri appropriati (compreso il nome della funzione da richiamare). Tale operazione può essere compiuta ad esempio nel ready del document, tramite la funzione ajax di jQuery:
    <script type="text/javascript">// <![CDATA[
    jQuery(document).ready(function(){                 
           jQuery.ajax({"url":"http://www.mercato-immobiliare.info/widget.js",
                        "data":{widgetID:"roma60", province:"RM", city:"Roma", type:"villa", onComplete:"miComplete", width:"500", height:"220",days:"60"},
                        "dataType": "script"});
    });
    // ]]></script>
    

Documentazione

Il link

Dev'essere inserito in un punto qualsiasi della pagina un link con le seguenti caratteristiche:
  • Deve avere un attributo href che inizi con "http://www.mercato-immobiliare.info" o con "http://www.caasa.it"
  • Deve avere un testo NON VUOTO
  • Deve avere un attributo id valido

Parametri del widget

Per visualizzare il widget è necessario inserire nella pagina lo script "http://www.mercato-immobiliare.info/widget.js" (anche accessibile in https) a cui vanno passati i seguenti parametri in get:
  • widgetID: obbligatorio - è l'ID del link (tag <a>) che conterrà il grafico
  • province: obbligatorio, se non si vuole che appaia il form di selezione - è il codice (2 lettere) della provincia nella quale si trova. ATTENZIONE dev'essere il codice ufficiale ISTAT corrente!
  • city: obbligatorio, se non si vuole che appaia il form di selezione - è il nome del comune d'interesse. Eventuali spazi o caratteri speciali possono essere URLencodati (UTF-8) o sostituiti da un trattino (-)
  • type: obbligatorio, se non si vuole che appaia il form di selezione - è la tipologia di immobile cui si è interessati. Dev'essere una tra le seguenti:
    • appartamento
    • attico
    • bifamiliare
    • bivano
    • capannone
    • caposchiera
    • casa-indipendente
    • casa-semindipendente
    • casale
    • esavano
    • locale-commerciale
    • loft
    • mansarda
    • monolocale
    • pentavano
    • quadrivano
    • trivano
    • ufficio
    • villa
    • villetta-a-schiera
  • days: opzionale - è il numero di giorni (rispetto alla data attuale) a cui si deve riferire il grafico. Se non indicato viene utilizzato il valore 31. Il valore massimo è 180 giorni, quello minimo 31.
  • width: opzionale - è la largezza (in pixels) del grafico; se non indicato verrà usato il valore 220
  • height: opzionale - è l'altezza (in pixels) del grafico; se non indicato verrà usato il valore 150
  • onComplete: opzionale - è il nome di una funzione che verrà richiamata al termine del caricamento del grafico. A tale funzione verrà passato un oggetto con le seguenti proprietà:
    • province: il codice a 2 lettere della provincia
    • city: il nome (ufficiale ISTAT) per esteso (con eventuali spazi e/o caratteri speciali) della città
    • type: il nome per esteso della tipologia (con eventuali spazi)
    • days: il numero di giorni cui il grafico si riferisce
    • pdiff: la differenza percentuale tra valore finale e valore iniziale
    • min: la quotazione minima nel periodo in esame
    • max: la quotazione massima nel periodo in esame

Generatore di codice

Share This