HTML-tabel scrapen met Google Sheets en op eigen site publiceren
Informatie uit een tabel op een andere site plaatsen kan door een kopie te maken. Als dit statische informatie is die niet meer wordt bijgewerkt dan is die kopie voldoende. Meestal wordt informatie handmatig overgezet. Dit kan natuurlijk slimmer. Een tabel die telkens wordt bijgewerkt kan ook worden doorgeplaatst. Hoe kan de html-tabel worden gekopieerd en continu worden geupdatet? Dat wordt in dit artikel uitgelegd. In 10 stappen html scrapen met Google Sheets en op je eigen site publiceren.
Normaalgesproken is er voor scrapen van een webpagina kennis nodig van HTTP, parsers, headers, HTML, etc. Hiervoor is een aantal programmeertalen beschikbaar. Met Python kan dit bijvoorbeeld worden gedaan. Ook dan is er kennis nodig van websites, ontwerpen, html, navigatie en opbouw. Niet iedereen heeft die vaardigheden en kennis.
Geen programmeerskills, toch scrapen
Als die programmeerskills niet aanwezig zijn is er toch een manier om sites te scrapen. Niet programmeren, toch scrapen. Dit kan met Google Sheets. In deze post leg ik uit hoe je dat kan doen.
De manier die hieronder wordt uitgelegd gaat uit van:
- een site met een tabel in html,
- Google Sheets om te scrapen en
- een andere site waarop informatie kan worden geëmbed.
Met deze stappen kan je informatie uit een tabel op je eigen site plaatsen. Zorg er natuurlijk wel voor dat je toestemming hebt om de tabel over te nemen. Bij opensourceinformatie is het helder. Niet alle informatie mag zo worden overgenomen.
Scraping met ImportHTML in Google Sheets in 10 stappen.
ImportHTML is een functie in Google Sheets. Hiermee importeer je een tabel of lijst van een website. Voorbeelden zijn uitslagen van wedstrijden, wikipediaoverzichen en beurskoersen.
In deze 10 stappen werken we met dit voorbeeld
Voor de site van Zeilteam Liberum Venti is een pagina met uitslagen gemaakt. Liberum Venti zeilt mee met de Berenburgcup. Deze uitslagen van de cup worden gepubliceerd op de site van de organisatie van de wedstrijd. De cup is onderverdeeld in drie wedstrijdweekenden met in totaal zes wedstrijddagen. De uitslagen worden dan ook zes keer bijgewerkt.
Om de uitslagen op de teamsite up to date te houden is gebruikgemaakt van Google Sheets en de ImportHTML functie.
Hoe dat is gedaan wordt in onderstaande tien stappen uitgelegd.
1) de URL
Het begint met de URL van de pagina waarop de tabel staat. Op de Berenburgcupsite staan meerdere tabellen met uitslagen. Ook de eerdere edities zijn te vinden. De site zoals die nu gebruikt wordt is nog ouderwets opgezet met frames. Het openen van de uitslagen in een nieuwe tab is daarom aan te raden.
2) ImportHTML in Google Sheets
De URL die nodig is is http://bbcup.nl/Uitslagen.php?Serie=21. Daarbij moet vermeld worden om welke tabel het gaat. In dit geval gaat het om de enige tabel op de pagina.
Zet dit in cel A1 van een Google Sheet:
=IMPORTHTML(“http://bbcup.nl/Uitslagen.php?Serie=21″;”table” ;1)
Door vervolgens op enter te drukken wordt de tabel geïmporteerd. Eventueel kunnen op een andere tab nog berekeningen worden toegevoegd.
3) Publicatieinstellingen in Google Sheets
Ga naar bestand (of file) en klik op publiceren op internet. Hiermee ga je naar een scherm waarop je de deelinstellingen kan aangeven. In dit geval willen we alleen de eerste tab publiceren. Geef dat aan in de dropdown.
Zet het vinkje aan bij automatisch opnieuw publiceren na wijzigingen.
Kopieer de link of, in dit geval, ga naar invoegen en kopieer de code.
4) Plaats de code op je website
Plaats een nieuw html-blok of zorg dat je kan bewerken in html. Gebruik niet de visuele modus. Hieronder plaats ik de code en de tabel verschijnt.
5) Bewerk de tabel
De tabel ziet er nu uit als een klein scherm, waarbij er naar beneden en opzij moet worden gescrolld. Bewerk daarom de HTML, zodat de breedte automatisch wordt aangepast. De hoogte kan in dit geval worden vastgezet. Voeg hiervoor deze parameters toe: width=”100%” height=”500“. Hierbij wordt de breedte aangepaast een het scherm van de gebruiker en is de hoogte 500 pixels. Dat is voldoende om de volledige uitslag onder elkaar weer te geven.
6) Mooier embedden
In plaats van het embedden van de Google Sheet kan de sheet ook als html-tabel worden ingevoegd. Hiervoor moet een aantal stappen worden doorlopen.
- De URL van de sheets heb je nodig.
- Deze code heb je nodig: /gviz/tq?tqx=out:html&tq&
- Onthoud welke tab gepubliceerd moet worden. Deze wordt aangegeven met gid.
7) Voorbeeld
- Dit is de URL: https://docs.google.com/spreadsheets/d/e/2PACX-1vSuw2aufdKnElRKXPpNkTeA8Kscl8Ux7e7ccC2tNMfw2JvRinVtmrhnWJVwYoWWY4y-c1hZlfvJ62dc/pubhtml?gid=0&single=true
- Kijk naar de URL en zie dat de eerste tab van de sheet wordt gebruikt. Dit is aangegeven met gid=0
- Haal alles achter de laatste weg: https://docs.google.com/spreadsheets/d/e/2PACX-1vSuw2aufdKnElRKXPpNkTeA8Kscl8Ux7e7ccC2tNMfw2JvRinVtmrhnWJVwYoWWY4y-c1hZlfvJ62dc/
8) Voeg deze code toe
- Zet nu deze code erachter: /gviz/tq?tqx=out:html&tq&
Let op dat er maar een slash staat. - Je hebt dan deze link: https://docs.google.com/spreadsheets/d/e/2PACX-1vSuw2aufdKnElRKXPpNkTeA8Kscl8Ux7e7ccC2tNMfw2JvRinVtmrhnWJVwYoWWY4y-c1hZlfvJ62dc/gviz/tq?tqx=out:html&tq&
9) Overige code toevoegen
- Voeg nu nog de juiste tab toe voorafgegaan door een en-teken/ampersand: &gid=0
- Zet de tabel in de juiste verhouding en voeg ook de andere html toe uit het iframe van stap 4 of 5.
- Plaats vervolgens een html-blok en plaats de html in het iframe. Hieronder staan ook de andere html-elementen:
<iframe src=”https://docs.google.com/spreadsheets/d/1_6dtuFa3Pexf54kwr5jRcFAxMUdMlwugp1uRgA7pptk/gviz/tq?tqx=out:html&tq&gid=0&single=true&widget=true&headers=false” width=”100%” height=”500″> </iframe>
10) Tadaa
Resultaat: live-tabel op eigen website
Het resultaat is de dat de originele tabel nu op de eigen site staat. Als de bron niet verandert en de tabel wordt bijgewerkt, wordt deze tabel ook in Google Sheets en dus op de plek waar die is ingevoegd bijgewerkt. In plaats van programmeren kan er dus met simpel knippen en plakken en het toevoegen van de juiste code snel een tabel worden toegevoegd aan de eigen site.
Succes.
Leave a Reply