How-to build a livescore website
Welcome to our how-to guide about building a livescore website. Livescore websites are one of the most popular applications for sports data. But, what exactly is a livescore website?
As its name suggests, livescore websites are website applications primarily focused on showing the livescores of sports matches.
Furthermore, livescores are updated in real-time. So, a football livescore website should, for instance, tell you the real-time live score, minute of the match, current score, and its starting time.
You are going to need the following tools:
- Sportmonks API token
- Code editor (Visual studio used in examples)
- Postman (optional)
You can find a link to another article where we discuss the tools in-depth in our Developer Tools Guide.
Now that we have all our tools, we can start planning what we want to show our audience.
Which leagues pique your interest? Do you want to show as many leagues as possible? Or do you only want to show specific leagues, like the English Premier League?
These are all things to consider, but you have to make sure that the leagues you choose are available in your plan. See our coverage page to see which leagues are included per plan. You can request all the leagues in your current plan via our get all leagues endpoint.
If there are no ongoing matches in your plan, the livescore API will return nothing back.
Now that you have decided on which leagues you would like to show, the next step is to choose what data would be useful to offer.
Most livescore websites show:
- Date of the match
- What time the match starts
- The home and away teams
- Status of the game: first half, half time, match has ended, minute by minute, etc.
- Live score
- Events such as goals, cards
- Team logos, league logos, country flag
All of this seems like a lot of data to request but fear not because our livescore API will be able to return all of that data in a speedy and accurate manner. Moreover, the API is highly flexible, since it only returns the data you requested.
If you require more match data such as lineups and match statistics, please refer to the how-to build a match page with events and statistics.
Our API 2.0 has two endpoints for getting livescores:
- 1.
The first request will give you all the fixtures of the current day. While the second one will provide you with all the fixtures that are currently in-play.
In the livescores/now endpoint, the fixtures will be available 15 mins before the match has started and 15 mins after it has ended.
https://soccer.sportmonks.com/api/v2.0/livescores/now?api_token={API_TOKEN}
Now that we have the request ready, it’s time to enrich the URL with various includes, based on the choices you made in step 3.
An example of a very common request is to include home and visitor teams, goals scored, substitutions, and yellow/red cards.
For convenience’s sake, we have assembled these three includes into one include called
events. However, if you only want to show goals and cards, you can simply replace events with goals and cards. Request with events include
Request with just goals and cards
https://soccer.sportmonks.com/api/v2.0/livescores/now?api_token={API_TOKEN}&include=localTeam,visitorTeam,events
https://soccer.sportmonks.com/api/v2.0/livescores/now?api_token={API_TOKEN}&include=localTeam,visitorTeam,goals,cards
Ultimately, you will be the one to build the livescore website, so feel free to add whatever includes you want. You can add as many or as little as you would like.
For example, we’ll analyze a match (fixture id: 16475287) in the Scottish Premiership between Celtic (team id: 53) and Hamilton Academical (team id: 338). Below you can find the response with its events.
We used the livescore request at the time, but you can refer to the fixture by id request for the same output:
Request livescore
Request fixture by id
Response
https://soccer.sportmonks.com/api/v2.0/livescores/now?api_token={API_TOKEN}&include=localTeam,visitorTeam,events
https://soccer.sportmonks.com/api/v2.0/fixtures/16475287?api_token={API_TOKEN}&include=localTeam,visitorTeam,events
"events": {
"data": [
{
"id": 16475287001,
"team_id": "338",
"type": "yellowcard",
"var_result": null,
"fixture_id": 16475287,
"player_id": 174161,
"player_name": "S. Martin",
"related_player_id": null,
"related_player_name": null,
"minute": 17,
"extra_minute": null,
"reason": null,
"injuried": null,
"result": null
},
{
"id": 16475287002,
"team_id": "53",
"type": "goal",
"var_result": null,
"fixture_id": 16475287,
"player_id": 96792,
"player_name": "O. Édouard",
"related_player_id": 173080,
"related_player_name": "G. Taylor",
"minute": 20,
"extra_minute": null,
"reason": null,
"injuried": null,
"result": "1-0"
},
{
"id": 16475287003,
"team_id": "53",
"type": "goal",
"var_result": null,
"fixture_id": 16475287,
"player_id": 8403182,
"player_name": "J. Frimpong",
"related_player_id": 173080,
"related_player_name": "G. Taylor",
"minute": 31,
"extra_minute": null,
"reason": null,
"injuried": null,
"result": "2-0"
},
{
"id": 16475287004,
"team_id": "338",
"type": "own-goal",
"var_result": null,
"fixture_id": 16475287,
"player_id": 32761,
"player_name": "C. Jullien",
"related_player_id": null,
"related_player_name": null,
"minute": 34,
"extra_minute": null,
"reason": null,
"injuried": null,
"result": "2-1"
},
{
"id": 16475287005,
"team_id": "338",
"type": "yellowcard",
"var_result": null,
"fixture_id": 16475287,
"player_id": 173774,
"player_name": "R. Callachan",
"related_player_id": null,
"related_player_name": null,
"minute": 36,
"extra_minute": null,
"reason": null,
"injuried": null,
"result": null
},
{
"id": 16475287006,
"team_id": "338",
"type": "substitution",
"var_result": null,
"fixture_id": 16475287,
"player_id": 111635,
"player_name": "M. Ogkmpoe",
"related_player_id": 173093,
"related_player_name": "R. Hughes",
"minute": 42,
"extra_minute": null,
"reason": null,
"injuried": null,
"result": null
Events will show all the goals, cards, and substitutions. Here we can see that player S. Martin got a yellow card in the 17th minute and that the first goal was made by O. Edouard in the 20th minute for Celtic.
Let's say, we want to make a dedicated page just for the English Premier League (league id: 8) on our livescore website, but our plan has over 600 different leagues.
On Saturdays, there are a lot of active games. However, we only want the data pertaining to the English Premier League (league id: 8), so we can filter out everything else. We have discussed filtering in a previous tutorial. An example of such a request with filter:
https://soccer.sportmonks.com/api/v2.0/livescores/now?api_token={API_TOKEN}&include=localTeam,visitorTeam,events&leagues=8
In the example above, we request all the livescores that are in play, but only for the English Premier League (league id: 8). The main advantage is that the return of data is many times faster than when you request everything available in your plan.
By the same logic, you can also specify specific fixtures:
https://soccer.sportmonks.com/api/v2.0/livescores/now?api_token={API_TOKEN}&include=localTeam,visitorTeam,events&fixtures=16475285
Now, it will only show the fixture with fixture id 16475285.
Showing the national flag of a league is always handy. You can request the country flag with a nested include:
https://soccer.sportmonks.com/api/v2.0/livescores/now?api_token={API_TOKEN}&include=localTeam,visitorTeam,events,league.country
Last modified 2yr ago