Create a Property Web Application with the Zoopla API

1. Set Up Zoopla Developer API Account

The first port of call is to get set up with a Zoopla Developer account, which we will use to collect data from the API. Go to ‘Applications’ and click ‘Create a New Application’ and then enter your details about the project you are creating. There is a temptation to only provide the basic details, but the more information you provide at this stage will make it easier to get the application up and running and avoid any unexpected issues further down the line.

Zoopla Developer Account

Be sure to select ‘JSON’ in the ‘Preferred Output Format’ field, so you can follow on with this tutorial. Once created, be sure to take note of the API key, as this will be used to get authenticated access to the data from Zoopla.

It is at this point, we will run into the first issue that we will need to resolve. For unexplained reasons, Zoopla will deactivate your application after 24 hours. It will remain switched off indefinitely unless we carry out some preventative actions. You will need to contact Zoopla and explain the application that you are building and why they should switch it back on. It usually helps if you have a client that is paying them a monthly fee, for the reactivation process to go more smoothly. Depending on the volume of requests that Zoopla are dealing with, you should have access again within five working days.

In terms of getting set up, I wanted to quickly mention that there is documentation on the Zoopla Developer website, which covers the data requests that can be made. Sadly, the Zoopla Forum is no longer in use, however, Stack Overflow is available, if you want to see some historical questions on the subject. Also, be sure to give the Zoopla API ‘User Requirements’ a read so you are up to speed with the conditions that Zoopla asks developers to comply with. For example, Zoopla asks for a small ‘Powered by Zoopla’ image to appear beside your property listings.

2. Making API Requests & Collecting Data

Looking at the documentation, Zoopla has a vast array of data that can get retrieved such as average house prices in a specific area, as well as local information such as population, and crime stats. We will focus on getting listings for specific properties that are available for rent.

The request can be made in the form of a URL, which we enter into the address bar and receive data in return. Looking at the Property Listings example on the documentation, the URL begins: “https://api.zoopla.co.uk/api/v1/property_listings.js”, then followed by any parameters that we need to narrow the search down to specific listings.

There are 20 different parameters to choose from, so I would recommend having a look over the available key names and making a plan of the ones that will be needed. In our example, we have:

1. ‘order_by’ set to “age” so it shows the newest listings first.
2. ‘listing_status’ set to “rent”, so we retrieve the rental properties.
3. ‘branch_id’ set to “54584”, as it is the ID used on the agent’s Zoopla profile page.
4. ‘page_size’ set to “50” so we can retrieve a maximum of 50 properties.
5. Lastly, we have the API key.

We can then add our list of parameters to the request URL using a question mark at the beginning and an ampersand between each parameter. For example, the request URL could be “http://api.zoopla.co.uk/api/v1/property_listings.js?order_by=age&listing_status=rent&branch_id=54584&page_size=50&api_key=API_KEY_GOES_HERE”.

When running the request URL in the browser, you can preview the data that you get. Feel free to test out the various parameters, so they are all clear in their purpose and you are happy with the data you are getting. You could also use the JSON Formatter, so you can preview the data in more detail.

Whilst the number of credits Zoopla offers is unclear, it is generally good practice to be as efficient as possible with API credits when collecting the data. Generally, it is best to collect as much data as possible in one go, rather than collecting smaller amounts across several requests. I will go into more detail on effective ways of using the API later in section four.

3. Creating the Property Web Application

In the following example, we will create a solution that pulls in the raw API data and insert it into some custom HTML. Please note, this will be a simple example, with slimmed-down HTML and no CSS. This is because the objective of the tutorial is to focus on creating a simple interface with the API data. However, it is not in the scope of the lesson to give a specifically-styled solution, as I feel this distracts from the main offering.

With that disclaimer out of the way, one method of starting is by creating a static version with dummy HTML and the finalised CSS. This way, you can display the content on the page and have it styled the way you would like. From there, we can use the static version as a base and plug in the API data to make it a dynamic final solution.

Once your static version is complete, the next step is to use a couple of simple PHP functions. The first function that we will use is ‘file_get_contents’, which allows us to collect data from our Zoopla API request URL. Second, we will use ‘json_decode’, which converts the JSON data into a PHP object.

The next step is to create a foreach loop, so we can cycle through each of the property listings we get in the results. When inside the loop, we access specific data by referencing the designated key names. For instance, the number of bedrooms key name is “num_bedrooms”. You can view the full list of the key names on the Zoopla documentation in the ‘Generated Output’ section. I would recommend looking at the full list and getting inspired by all the options, as the list will likely contain data that you did not previously consider. Be sure to assign each key name to a variable, so the data can get used multiple times within the loop.

The next step is to transfer your static grid item solution to the PHP loop. Please note that we want the container elements to be outside the loop. However, any repeated element for each property listing should be inside the loop. From there, it is a case of plugging the dynamic variable values in to replace your static example – painting by numbers. An example of a basic solution is below:

Now that the basic content grid is created, the other thing that you may want to create is a form to search for specific listings. One way this could be done is to create a form with some dropdowns. When submitted, it displays the data in the URL. From there, you could use the PHP GET superglobal to process the content accordingly. For example, if you had a bedrooms filter, you could have an if statement around the loop saying only show the listing if the current property bedrooms total is greater than or equal to the value selected in the filter.

If you do use GET, be sure to follow the necessary guidance to ensure your application is secure. Also, be sure to use a ‘noindex’ tag on your search page, when the form variables are in the URL. This way, you can remove the dud pages from appearing in your analytics reports.

4. Zoopla API Credit Considerations

When using an API, the limitation of the offering is the credit limits that are in place. With any API, it is generally a good rule of thumb to be as efficient as possible when collecting the data. The limitation with the previous example we made, is that the data is being collected directly from the API every time the page is loaded. It also uses credits every time a dropdown filter is applied, for every user on the website. As you could imagine, this burns a large number of credits pretty quickly.

With this in mind, a better solution would be to create a script that collects all the available data from the API and saves the data to a file on your server. Then, the web page could load the data from the file, rather than from the API directly. This way, we can greatly reduce credit usage. Additionally, we would use a CRON Job to periodically run the script, to automatically update the listings on your website, for instance, once per hour.

The first task is to create a script that will collect the data from the Zoopla API. You want it to collect all the data in one go, so all the property listings are collected using one credit. First, store the JSON data in a variable using the Zoopla API URL and the ‘file_get_contents’ function.

Then, create a variable that defines the location of your file on your server. To point to a specific location, you will need to use the ‘dirname‘ function. This part can take some trial and error, as everybody’s server folder structure is slightly different. To test this, I would create a dummy data file and access it using the method above. Once this is working, we will use the PHP file functions: fopen (to open or create a new file), fwrite (to put the JSON into the file) and fclose (to close the file). Please note, we will open the file in write mode.

I like to create a new file for each day, so I have a backup of any legacy data that is no longer live. I did this using the PHP date function, so it creates the file name using the current date, a sample format could be: “file-name-YYYYMMDD.json”.

It is important to note that the page that contains the script should not be accessible by the general public. As each time the page is accessed, an API credit is used. This means that the page should only be accessed by the developer and the client. The page should not be linked to any other page on the website and the page should have a ‘noindex’ tag to ward off search engines. You could also use an unusual page slug in the URL so users do not land on the page by mistake.

The second task is to update the live website to point to the JSON file that your script created, rather than connecting to the Zoopla API directly. Largely, the process is unchanged, because the webpage is still loading an external resource and then processing the data that it collects. The only change is to remove the direct link to Zoopla and change it to point to the file your script has created.

The third and final task is then to automate the collection of the data from Zoopla. This is desirable because the data will change whenever a property is added/removed or any property details are changed. The updating of the data is achieved using a CRON Job, which essentially allows a file on your server to run at specific intervals. The regularity of the intervals is a mixture of your preference and the options provided by your hosting company.

We will look at using cPanel to create the CRON Job, as it is a common interface used by the big hosting companies. On the cPanel interface, go to the ‘Advanced’ section and then click ‘Cron Jobs’. In the next screen, we want to pick how regularly we want to run the script. Handily, cPanel allows you to pick common settings (such as once per minute, hour, day) and populate the fields for you. For example, “0 * * * *” is the values for once per hour.

Next, we need to enter the command so we can point the task to our script we created. So in the command field, type “wget https://your-website.com/url-path-to-your-script > /dev/null 2>&1”. Wget is the function that retrieves your file and then you want to specify the URL where your script lives. Without getting too technical, the part after the URL discards the data after the task is finished and will provide an error when required. Then click the ‘Add New Cron Job’ button to complete the action.