Facebook分享，拇指显示而不是大图像

Question

我已经举办了比赛，要求参赛者在facebook上分享他们的成绩。

我有以下按钮来分享结果：

print('<a class="facebook stemspeler" style="color:#eec920; margin-right:15px;" target="_blank" onclick="return !window.open(this.href, \'Facebook\', \'width=1200,height=300\')" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.***.com%2Fallstars&picture=http%3A%2F%2Fwww.***.com%2Ftypo.php?id='.$makeUniq.'&title=tet&caption=test&quote=test&description=test">‌​Share</a>');

$ makeUniq确保facebook获取结果而不是第一次缓存结果（当链接保持相同时它缓存，现在它不会因为链接更改每个请求）。

typo.php是存放图像的文件。它需要一个标准模板，并将比赛输入转换为图像叠加。

<?php
session_start();
header("Cache-Control: no-store, no-cache, must-revalidate,    max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);

header("Pragma: no-cache");

// Output to browser
header('Content-Type: image/png');

// Create a 300x150 image

//WHITE BACKGROUND COLOR
$im = imagecreatetruecolor(1000, 1000);

$im = imagecreatefrompng("images/test.png");

$black = imagecolorallocate($im, 0, 0, 0);
$white = imagecolorallocate($im, 255, 255, 255);
$test = imagecolorallocate($im, 255, 255, 0);

// Set the background to be white
imagefilledrectangle($im, 0, 0, 900, 990, $test);

// Path to our font file
$font       = 'fonts/DINPro-Medium.ttf';
$fontSize   = 24;
$angle      = 0;

$x = 80;
$y = 150;
// Write it
imagettftext($im, $fontSize, $angle, $x, $y, $white, $font, ' : n');

$x = 80;
$y = 200;
// Write it
imagettftext($im, $fontSize, $angle, $x, $y, $white, $font, 'k : ');


$x = 80;
$y = 250;
// Write it
imagettftext($im, $fontSize, $angle, $x, $y, $white, $font, 'Ler :n');


$x = 80;
$y = 300;
// Write it
imagettftext($im, $fontSize, $angle, $x, $y, $white, $font, 'Mouwer : ');

$x = 80;
$y = 350;
// Write it
imagettftext($im, $fontSize, $angle, $x, $y, $white, $font, 'Rwer n');

$x = 80;
$y = 400;
// Write it
imagettftext($im, $fontSize, $angle, $x, $y, $white, $font, 'Rechtk : ');

$x = 80;
$y = 450;
// Write it
imagettftext($im, $fontSize, $angle, $x, $y, $white, $font, 'Cir : ');
imagepng($im);
imagedestroy($im);

?>

直到这里，一切都像预期的那样。

问题是，当facebook共享功能打开时，facebook会一直将图像显示为缩略图而不是大图像。

我的目标是大图像：

我曾尝试多次更改分辨率，并且互联网上有几个帖子即将描述此问题。 任何人都知道如何解决这个问题？

提前致谢！

Answer 1

Facebook上共享链接的推荐图片尺寸为1200x630。如果图片太小，Facebook会将其裁剪为中心并仅显示图片的缩略图。我认为最小尺寸为600x315，但结果可能不如高分辨率设备好。如果您希望它看起来很好并在所有设备上显示完整尺寸的图片，请使用1200x630像素图片。

您可以找到对这些最佳做法的参考 here

修改

您的问题可能是因为Facebook抓取工具缓存了其抓取的信息，因此即使您修复了分辨率，您的旧图片仍可能被FB使用。确保转到here，强制Facebook抓取工具重新抓取您的网站并获取新数据，或者只是清空其特定网址的缓存，以强制它在您下次共享链接时重新抓取您的网站。否则FB可能仍然使用它已经在其缓存中的旧图片。

Answer 2

您可以尝试指定这些OG元素：

og:image:width 
og:image:height

这些标记可帮助抓取工具在下载之前获取图像大小。也许你正在获得一个较小的图像预览，因为爬虫最初没有获得正确的大小，现在你正在从缓存中进行预览。

修改 当然，您应该确保使用的图像至少为1200 x 630像素