Facebook open graph og:image

ProefWijnProefWijn Member Berichten: 4

De beste wensen voor alle lezers van dit bericht;)

Ik heb een vraag m.b.t. Facebook en afbeeldingen. Wanneer ik een categorielink of een productlink kopieer t.b.v. een FB post dan komt hier niet de juiste foto bij, er komt steeds een "standaard" foto bij van een banner maar geen categorie of productfoto?

Iemand een idee hoe ik dit kan oplossen?? De og:image verwijst naar een banner in het thema.

11 reacties

  • Hielke BrandsmaHielke Brandsma Member Berichten: 25

    Hoi ProefWijn,

    Wanneer je de Thema editor geactiveerd hebt, kun je onderstaande code gebruiken:

    <meta property="og:title" content="{{ page.title }}">
    <meta property="og:type" content="website">
    <meta property="og:description" content="{{ shop.description }}">
    <meta property="og:site_name" content="{{ shop.name }}">
    <meta property="og:url" content="{{ shop.domain }}">
    { % if product.image % }
    <meta property="og:image" content="{{ product.image | url_image }}">
    <meta property="og:image:width" content="1000" />
    <meta property="og:image:height" content="525" />
    { % elseif collection.image % }
    <meta property="og:image" content="{{ collection.image | url_image }}">
    <meta property="og:image:width" content="200" />
    <meta property="og:image:height" content="200" />
    { % elseif catalog.image % }
    <meta property="og:image" content="{{ catalog.image | url_image }}">
    <meta property="og:image:width" content="200" />
    <meta property="og:image:height" content="200" />
    { % else % }
    <meta property="og:image" content="alternatieve-afbeelding.png">
    <meta property="og:image:width" content="200" />
    <meta property="og:image:height" content="200" />
    

    Het was voor mij ook even puzzelen, maar dit zou moeten werken. De 'og:image:width' en 'og:image:height' kun je naar wens aanpassen.

    Ik hoop je op deze manier wat geholpen te hebben

  • JohanJJohanJ Member Berichten: 247 
  • Hielke BrandsmaHielke Brandsma Member Berichten: 25

    @JohanJ Dit kun je toevoegen / aanpassen in je custom.rain

    Ik ben geen developer, dus ik weet niet 100% zeker of elk thema zo opgebouwd is. Kijk gewoon even waar je andere META-Data geladen wordt, dan heb je de juiste locatie te pakken.

    Succes!

  • ProefWijnProefWijn Member Berichten: 4

    @Hielke Brandsma dank voor je bericht ik ga het in gang zetten. Hoop dat het allemaal gaat lukken;)

  • JohanJJohanJ Member Berichten: 247 

    Bij mij werkt het niet. Ik krijg een deel van de code boven in beeld. Ik dacht dat er een {% endif %} ontbrak maar dan ontstaan er nog meer problemen.

    We hebben een maatwerk site, dat zal er misschien mee te maken hebben.

  • YouckeYoucke Lightspeed Staff Berichten: 20 Lightspeed
    augustus 2020 aangepast

    De code die hier is gepost mist een aantal dingetjes. Ik heb dit nog even wat verder bewerkt en hieronder staat de code die zonder problemen moet werken :)

    <meta property="og:title" content="{{ page.title }}">
    <meta property="og:type" content="website">
    <meta property="og:description" content="{{ shop.description }}">
    <meta property="og:site_name" content="{{ shop.name }}">
    <meta property="og:url" content="{{ shop.domain }}">
    {% if template == 'pages/index.rain' %}
    <meta property="og:image" content="PLAATS LINK NAAR EIGEN AFBEELDING HIER" />
    {% elseif product.image %}
    <meta property="og:image" content="{{ product.image | url_image }}">
    <meta property="og:image:width" content="1000px" />
    <meta property="og:image:height" content="525px" />
    {% elseif collection.image %}
    <meta property="og:image" content="{{ collection.image | url_image }}">
    <meta property="og:image:width" content="200px" />
    <meta property="og:image:height" content="200px" />
    {% elseif catalog.image %}
    <meta property="og:image" content="{{ catalog.image | url_image }}">
    <meta property="og:image:width" content="200px" />
    <meta property="og:image:height" content="200px" />
    {% else %}
    <meta property="og:image" content="PLAATS LINK NAAR EIGEN AFBEELDING HIER">
    <meta property="og:image:width" content="200px" />
    <meta property="og:image:height" content="200px" />
    {% endif %}
    

    Bij 'PLAATS LINK NAAR EIGEN AFBEELDING HIER' kun je zelf een afbeelding neerzetten die moet worden getoond als je bijvoorbeeld de homepage deelt. De afbeelding kun je uploaden onder Tools - Bestanden in je backoffice, waarna je de link die je daar ziet op die plek neer zet.

    Bij de tweede 'PLAATS LINK NAAR EIGEN AFBEELDING HIER' kun je een andere afbeelding plaatsen die bijvoorbeeld wordt getoond op inhoudspagina's en dergelijke.

    Post edited by Youcke on



    Youcke Laven

    Lightspeed Support, Team lead

    Lightspeed HQ

  • Hielke BrandsmaHielke Brandsma Member Berichten: 25

    Goeie aanvulling Youcke!

    Ik weet zeker dat mensen hier iets aan gaan hebben :)

  • SharonVanRieSharonVanRie Member Berichten: 6

    Goedemiddag,

    Waar kan ik bovenstaande tekst plaatsen? Als ik naar Thema editor ga, zie ik thema aanpassen of geavanceerd -> hieronder zie ik CSS aanpassen of Code bewerken.

    En moet er nog iets aan veranderd worden voordat ik deze plaats?

    mvg Sharon

  • SharonVanRieSharonVanRie Member Berichten: 6

    @Youcke kan je me hier mee helpen, met mijn bovenstaande vraag?

    mvg sharon

  • PaulaPaula Member, Beta tester Berichten: 1,383 

    @SharonVanRie Mocht je echt een specifieke vraag voor support hebben dan kun je het best even een ticket inschieten. Lightspeed komt hier wel, maar een ticket lezen ze sneller dan een berichtje hier op het forum.

    www.devrolijkeengel.nl
    "voor Hemelse geschenken met een vleugje Mysterie"
  • SharonVanRieSharonVanRie Member Berichten: 6
Log In of Registreer om te reageren.