Application Programming Interface - Dierenpension Review

Wat is een API?

API staat voor Application Programming Interface en dient als een interface tussen verschillende softwareapplicaties. Hiermee is het mogelijk via een andere website gegevens op te halen en te gebruiken. Om gebruik te maken van onze API heb je alleen de link naar je pension nodig, deze staat in je adresbalk en kan je ook in je controlepanel vinden bij jouw pension.

Op dit moment zitten er nog maar een paar functies in de api, vooral om te zien wat de huidige score is en daar de sterren bij laten zien. Het is goed mogelijk dat er in de toekomst nog veel meer functies bijgemaakt worden. Maar dit is een beetje afhankelijk van de wens.
Heb je hulp nodig bij het gebruik? Neem dan contact met ons op via het contactformulier.

Via een plaatje

De meest eenvoudige manier is om gebruik te maken van een plaatje. Je kiest zelf waar het plaatje op jouw website komt en indien er een review voor jouw pension geplaatst wordt, zal het aantal sterren vanzelf veranderen.

De volgende HTML code kan je op jouw website plaatsen: (Vergeet niet de link naar je pension te vervangen!)

<a href="https://dierenpensionreview.be/" title="Dierenpension Review">
<img src="https://dierenpensionreview.be/Provincie/Plaatsnaam/Pension.png" alt="Dierenpension Review" style="width:600px;height:315px;">
</a>

Het is ook mogelijk kleinere of grotere sterren te laten zien, dat kan door: size=small, size=medium of size=large.

<a href="https://dierenpensionreview.be/" title="Dierenpension Review">
<img src="https://dierenpensionreview.be/Provincie/Plaatsnaam/Pension.png?size=small" alt="Dierenpension Review">
</a>

Tip: De url in de link kan je aanpassen naar de pagina van jouw pension. bv: https://dierenpensionreview.be/Noord-Holland/Amsterdam/Naam-van-uw-pension

Voorbeeld klein (300x157):
Dierenpension Review

Voorbeeld middel (400x210):
Dierenpension Review

Voorbeeld groot (600x315):
Dierenpension Review

Het is ook mogelijk niet gebruik te maken van de standaard foto, maar alleen de sterren te laten zien. Dit kan door: size=starsonly.

<a href="https://dierenpensionreview.be/" title="Dierenpension Review">
<img src="https://dierenpensionreview.be/Provincie/Plaatsnaam/Pension.png?size=starsonly" alt="Dierenpension Review">
</a>

Voorbeeld alleen sterren (200x60):
Dierenpension Review

Via een iframe

Met een iframe is het mogelijk een klein stukje webpagina op jouw eigen website te plaatsen. Op deze manier kan er meer informatie op het scherm komen dan alleen maar het aantal sterren. De link "Lees hier alle reviews" zal automatisch naar jouw pension gaan.

De url die je hier voor kan gebruiken is: https://dierenpensionreview.be/Provincie/Plaatsnaam/Pension.iframe

De volgende HTML code kan je op jouw website plaatsen: (Vergeet niet de link naar je pension te vervangen!)

<iframe src="https://dierenpensionreview.be/Provincie/Plaatsnaam/Pension.iframe" style="width:200px;height:340px;border:1px solid #ccc"></iframe>

Voorbeeld iframe:

Andere kleuren

Standaard zal de achtergrondkleur wit zijn, met donkergrijze letters, net als op onze website. Maar je kan dit geheel aanpassen, zodat het goed bij jouw website past.
Dit kan je doen door de volgende extra parameters mee te geven: color=[kleurcode] en backgroundcolor=[kleurcode]. De kleurcodes zijn standaard html RGB codes, dus bijvoorbeeld voor rood is dat: ff0000 of f00.

Hier een voorbeeld voor een donkere achtergrond met lichte letters:

<iframe src="https://dierenpensionreview.be/Provincie/Plaatsnaam/Pension.iframe?backgroundcolor=333&color=fff" style="width:200px;height:340px;border:1px solid #333"></iframe>

Voorbeeld andere kleur:

Andere opties

Het kan zijn dat je wel de sterren wilt zien, maar niet de cijfers met de reviews, deze kan je uitzetten door review=0in de url te plaatsen. Wil je wel de cijfers, maar niet de sterren, dan kan je deze uitzetten door gebruik te maken van star=0. Het is ook mogelijk kleinere of grotere sterren te laten zien, dat kan door: star=small, star=medium of star=large. Standaard wordt voor medium gekozen.

HTML code zonder cijfers:

<iframe src="https://dierenpensionreview.be/Provincie/Plaatsnaam/Pension.iframe?review=0" style="width:200px;height:70px;border:1px solid #ccc"></iframe>

Voorbeeld zonder cijfers:

HTML code zonder sterren:

<iframe src="https://dierenpensionreview.be/Provincie/Plaatsnaam/Pension.iframe?star=0" style="width:200px;height:290px;border:1px solid #ccc"></iframe>

Voorbeeld zonder sterren:

Via json

JSON staat voor JavaScript Object Notation. Dit is een eenvoudige manier om data uit te wisselen tussen de client en de server. Door gebruik te maken van deze optie heb je de volledige controle hoe je de gegevens laat zien. Javascript kennis is wel vereist om hier gebruik van te maken. Ik ga dus ook niet in op de details hoe je de informatie op het scherm laat zien.
Voor de voorbeelden maak ik gebruik van jQuery. Dit is niet noodzakelijk, het maakt het alleen eenvoudiger.

De url die je hier voor kan gebruiken is: https://dierenpensionreview.be/Provincie/Plaatsnaam/Pension.json (Vergeet niet de link naar je pension te vervangen!)

De volgende Javascript code maakt een ajax call naar de api en haalt de gegevens op:

<script>
  $.ajax({
    url: 'https://dierenpensionreview.be/Provincie/Plaatsnaam/Pension.json',
    type: 'POST',
    dataType: 'JSON',
    success: function(data) {
      // Doe iets met de data
      console.log(data);
    },
  });
</script>

Voorbeeld JSON output:

{
  "name": "Test pension",
  "url": "https://dierenpensionreview.be/Provincie/Plaatsnaam/Pension",
  "score": 69,
  "review": {
    "aantal": 47,
    "totaal": 69,
    "algemeen": 94,
    "klant": 65,
    "dier": 76,
    "binnen": 65,
    "buiten": 80,
    "hygiene": 66,
    "ligging": 50,
    "prijs": 54
  }
}

Het is ook mogelijk om via de post parameters review op false zetten als je niet de review informatie met de cijfers wilt hebben.

<script>
  $.ajax({
    url: 'https://dierenpensionreview.be/Provincie/Plaatsnaam/Pension.json',
    type: 'POST',
    dataType: 'JSON',
    data: {review:false},
    success: function(data) {
      // Doe iets met de data
      console.log(data);
    },
  });
</script>

Via xml

XML staat voor Extensible Markup Language. Dit werkt volgens hetzelfde principe als JSON. Zie vorige punt voor meer informatie.

De url die je hier voor kan gebruiken is: https://dierenpensionreview.be/Provincie/Plaatsnaam/Pension.xml (Vergeet niet de link naar je pension te vervangen!)

Voorbeeld XML output:

<dpr>
  <name>Test pension</name>
  <url>https://dierenpensionreview.be/Provincie/Plaatsnaam/Pension</url>
  <score>72</score>
  <review>
    <aantal>39</aantal>
    <totaal>72</totaal>
    <algemeen>71</algemeen>
    <klant>75</klant>
    <dier>74</dier>
    <binnen>83</binnen>
    <buiten>55</buiten>
    <hygiene>93</hygiene>
    <ligging>65</ligging>
    <prijs>62</prijs>
  </review>
</dpr>

Welkom bij de Dierenpension Review API