Widget quotazioni immobiliari

L'utilizzo del widget è ancora del tutto GRATUITO, ma necessita di un'apposita registrazione ed è limitato alle agenzie e ai portali partner

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

Aggiornamento del widget: versione 2.0

È online un aggiornamento del widget, con alcune modifiche:

  • Nuove librerie per il disegno del grafico
  • Maggiore flessibilità nella selezione della città
  • Possibilità di visualizzare l'andamento degli affitti (€ / m² mese)

Il widget nel proprio sito

Grazie a mercato-immobiliare.info e a Caasa, è 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.

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.

E' necessario utilizzare un apposito codice di autentificazione ed inserire lo script su un dominio autorizzato.

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="https://www.caasa.it/milano/milano/appartamento/in-vendita.html">Appartamenti in vendita a Milano</a>

<script src="https://www.mercato-immobiliare.info/widget2.js?aid=YOURPARTNERID&widgetID=milano31&province=MI&city=Milano&type=appartamento" type="text/javascript"></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 5 parametri:

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

Il codice della provincia è utile in caso di omonimia. E' possibile (anzi, suggerito) utilizzare il codice ISTAT (in forma numerica, senza 0 o altri simboli nella parte iniziale), anziché il nome della città, specie nel caso di nomi con spazi o di grafia dubbia.

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 src="https://www.mercato-immobiliare.info/widget2.js?aid=YOURPARTNERID&widgetID=misel&width=350&height=160&days=180" type="text/javascript"></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ò 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)
  • Una funzione javascript che inserirà i valori desiderati
  • 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

Ecco il codice:

<a id="roma60" title="Quotazione Ville a Roma negli ultimi 60 giorni" href="https://www.mercato-immobiliare.info/lazio/roma.html"> Quotazioni ville a Roma negli ultimi 2 mesi </a>

Differenza: <span id="diff"></span>

<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>
<script type="text/javascript">
function miComplete(data){
   jQuery("#diff").text(data.pdiff.toFixed(2));
   if ( data.pdiff < 0 ) jQuery("#diff").addClass("neg"); 
   else jQuery("#diff").addClass("pos"); 
} 
jQuery(document).ready(function(){ 
   jQuery.ajax({
      "url":"https://www.mercato-immobiliare.info/widget2.js", 
      "data": {widgetID:"roma60", aid:"YOURPARTNERID", 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:

  • aid: obbligatorio - è il partnerid che vi è stato assegnato; è associato ad uno o più domini "autorizzati"
  • 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 (-)
  • contract: "R" per affitto o "S" per vendita. E' opzionale e il default è "S"
  • 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