Log in
Foto's aanbieden
Foto's zoeken
HomeFoto's aanbiedenTips & trucshelpdeskOypo op je eigen website in 3 stappen

Oypo op je eigen website in 3 stappen

De informatie op deze pagina is verouderd. De nieuwe methode om Oypo te integreren in uw website vindt u op deze pagina

Met basiskennis van HTML integreer je de webwinkel van Oypo in je eigen website. De afmetingen en de kleurstelling van de webwinkel kun je zelf aanpassen.
Download hier de voorbeeldbestanden en volg de volgende stappen.

Stap 1 

Upload uw foto's naar Oypo

Meer informatie hierover op deze pagina (eerst inloggen).

Stap 2 

Maak de pagina voor de webwinkel

Maak een normaal html-document en zet in de body op de plaats waar de webwinkel moet verschijnen de onderstaande code.
Of gebruik de HTML-GENERATOR om de juiste code voor een frameset of iframe te generen (vernieuwd!).

<iframe 
 src="http://www.oypo.nl/pixxer/api/templates/0801.asp?id=[mapid]&wl=[wlnaam]&css=[url]&nonav=[status]&opties=[optie]"
 name="pixxerframe" id="pixxerframe" 
 width="100%" height="400" 
 marginwidth="0" marginheight="0" 
 frameborder="0" 
 scrolling="auto">
</iframe>
<!-- verwijder de regel hieronder indien je de hoogte van het iframe handmatig instelt -->
<script src="http://www.oypo.nl/pixxer/api/iframeheight.js" type="text/javascript" language="javascript"></script>


[mapid]
verplicht
De mapid van de fotomap of de hoofdmap. Deze kunt u vinden door in Beheer fotomappen van je Oypo-account op de hoofdmap of een specifieke fotomap te klikken.
Voorbeeld: EDDBCD0DD2DFC1AE

[wlnaam] optioneel
Via deze optie geeft u de naam van de whitelabel-instellingen door. Dit is alleen van toepassing indien Oypo de bestellingen onder uw naam en logo afhandelt. Let op! U krijgt deze code van ons als u gebruik maakt van de whitelabel-optie . Als u hier geen gebruik van maakt, laat deze parameter dan weg.

[url] optioneel
De url van de stylesheet op uw eigen webserver. Zie ook stap 3.
Voorbeeld: http://www.oypo.nl/pixxer/api/css/0801.css
Als er geen url voor de stylesheet is ingevuld, wordt de standaardkleurstelling gebruikt.

[status] optioneel
Met deze optie kunt u de navigatie voor de fotomappen uitzetten. Dit is vooral handig als u zelf een alternatieve navigatie voor de fotomappen maakt. Er zijn 3 waardes die u kunt gebruiken:
0: navigatie-elementen tonen (standaard)
1: navigatie-elementen niet tonen
2: navigatie-elementen niet tonen en de eerste foto van de fotomap direct laden. Deze waarde niet gebruiken indien de fotomap is afgeschermd met een wachtwoord.
Als geen status wordt aangegeven wordt de waarde 0 gebruikt.

[optie] optioneel
opties=fotomail
Met deze optie kunnen bezoekers van de fotomap een verkleinde foto verzenden naar bekenden. De e-mail bevat behalve het fotootje een directe link naar de foto op uw website.

afmetingen
De afmetingen van het iframe past u aan met de opties width en height. Behalve relatieve afmetingen, zoals in het voorbeeld, kunt u ook absolute afmetingen te gebruiken. Verwijder in dat geval de laatste regel met de verwijzing naar iframeheight.js uit het voorbeeldscript.
Voorbeeld: width="760" height="450"

Noot: Heeft u een Wordpress website?
OYPO ook is prima te integreren op websites die gebruik maken van het Wordpress CMS.
Voer de HTML-code in, in een document terwijl je het document in HTML-view bewerkt.
Belangrijk: De door ons verstrekte HTML-code bevat meerdere regels. Hier heeft Wordpress problemen mee. Haal alle 'enters' uit de code voordat je deze in Wordpress invoert, dus vanaf '<iframe' t/m '</iframe>' dient alles op 1 regel te staan.

Stap 3 

Kleurstelling aanpassen

De kleurstelling van de webwinkel past u aan met behulp van een eigen stylsheet. Gebruik een van de css-bestanden van de voorbeeldbestanden als uitgangspunt voor de stylesheet. Upload het css-bestand naar een webserver en zorg dat [url] in stap 2 overeenkomt met de url van het css-bestand.

NB. U kunt de webwinkel uiteraard ook laden in een frame als onderdeel van een frameset of de fotomap rechtstreeks aanroepen.
Voorbeeld:
http://www.oypo.nl/pixxer/api/templates/0801.asp?id=EDDBCD0DD2DFC1AE&css=http://www.oypo.nl/pixxer/api/css/0801.css&nonav=0&opties=fotomail

Voorbeelden