randen van foto afgesneden bij link-url in Facbook
Ik heb met behulp van open graph een image en tekst gedefinieerd voor een Facebook-share-button van één van de pagina's van m'n website. Wanneer ik op deze share-button druk, verschijnt het "delen in facebook"-scherm in de layout zoals ik hem verwacht:
Wanneer vervolgens op de knop "plaatsen op Facebook" wordt gedrukt en de link wordt echt in Facebook geplaats, dan ontbreken van de image de linker en rechter rand, volgens mij ter grootte van de witte rand die Facebook daar zelf neerzet:
De image afmeting die ik gebruik is 1200x628 en de open graph coding is als volgt:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<?php
<link rel="canonical" href="http://menselijkeeconomie.nl/playIntroMedia8.php" />
<meta property="fb:app_id" content="966242223397117" /> <!-- default app-ID want ik heb geen app-->
<meta property="og:url" content="http://menselijkeeconomie.nl/playIntroMedia8.php" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Een video die wakker schudt" />
<meta property="og:description" content="Korte onthutsende en soms schokkende video-fragmenten van journalisten, hoogleraren en klokkenluiders." />
<meta property="og:image" content="http://menselijkeeconomie.nl/afbeeldingen/mediaBetrFaceb.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="628" /> ?>
<link rel="canonical" href="http://menselijkeeconomie.nl/playIntroMedia8.php" />
<meta property="fb:app_id" content="966242223397117" /> <!-- default app-ID want ik heb geen app-->
<meta property="og:url" content="http://menselijkeeconomie.nl/playIntroMedia8.php" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Een video die wakker schudt" />
<meta property="og:description" content="Korte onthutsende en soms schokkende video-fragmenten van journalisten, hoogleraren en klokkenluiders." />
<meta property="og:image" content="http://menselijkeeconomie.nl/afbeeldingen/mediaBetrFaceb.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="628" /> ?>
Omdat de layout wel goed is in het "delen in facebook" scherm en de randen pas mist bij het plaatsen in Facebook, heb ik geen idee waar ik moet zoeken.
Het lijkt erop dat FB resized en daarbij een gedeelte afsnijdt. Je zou kunnen proberen het originele plaatje minder breed te maken en kijken wat FB ervan maakt (?).
Ik ga het zo proberen, maar ik verwacht geen succes, omdat 1200X628 exact de door FB aangeraden afmetingen zijn.
In dat geval zou ik zorgen dat tekst en mircofoons kleiner en meer centraal op het plaatje komen te staan, zodat bijsnijden door FB niet al te grote impact heeft op datgene wat je wilt overbrengen met het plaatje.
Ik heb het zelfde plaatje als uitgangspunt genomen, maar de breedte van 1200 iets ingedrukt tot 1100. Nu staan de randen er inderdaad wel op.
Hoe is het mogelijk dat ik van de door FB aangeraden afmetingen moet afwijken om dit te bereiken ?
In ieder geval erg bedankt voor de tip, Nick.
Gewijzigd op 02/01/2018 17:17:24 door Richard Peelen
Ja, dat laatste is bijzonder van FB. Wat je nog zou kunnen doen, is kijken op welke wijze de CSS van FB de betreffende image beïnvloedt. Dit om zeker te zijn dat het op ieder apparaat (op ieder beeldscherm) goed uitpakt.
Wat bedoel je met de CSS van FB ? Ik heb natuurlijk wel een eigen CSS voor mijn website, maar is er zoiets als een CSS van FB waar ik naar kan kijken ?