Facebook sharer, thumb отображается вместо большого изображения

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, но результат может быть не так хорош на устройствах с высоким разрешением. Если вы хотите, чтобы он выглядел хорошо и показывал изображение полного размера на всех устройствах, используйте изображения 1200x630px.

Вы можете найти ссылки на эти лучшие практики here.

EDIT:

Ваша проблема может быть из-за того, что гусеничный Facebook кэширует информацию он ползает, так что ваша старая картина все еще может быть использован FB, даже если вы зафиксировали его разрешение. Обязательно пойдите here, чтобы заставить искателя Facebook повторно обходить ваш сайт и получать новые данные или просто очистить свой кеш для определенного URL-адреса, чтобы заставить его повторно развернуть свой сайт при следующей ссылке. В противном случае FB, вероятно, все еще использует старое изображение, которое оно уже имеет в кеше.

Answer 2

Вы можете попробовать определить эти О.Г. элементы:

og:image:width 
og:image:height 

эти теги помогают сканерам получить вам размер изображения перед Dowload его. Возможно, вы получаете меньший предварительный просмотр изображения, потому что искатель сначала не получил нужный размер, и теперь вы получаете предварительный просмотр из кеша.

EDIT: Конечно, вы должны быть уверены, что вы используете изображение, которое по меньшей мере, 1200 х 630 точек