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

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

og:image:width 
og:image:height

这些标签可帮助爬虫在下载之前获取您的图像大小。也许你得到一个更小的图像预览，因为爬虫一开始没有得到正确的大小，现在你从缓存中得到预览。

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

Answer 2

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

您可以找到这些最佳做法的参考资料 here.

编辑：

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