Как показать конкретное изображение в виде миниатюры при реализации share на Facebook?

из спецификации Facebook, используйте такой код:

<meta property="og:image" content="http://siim.lepisk.com/wp-content/uploads/2011/01/siim-blog-fb.png" />

источник: Facebook Share

мои теги были правильными, но Facebook только царапает каждые 24 часа, согласно их документации. С помощью страницы Facebook Lint получил изображение в Facebook.

введите свой URL Здесь, и FB обновит метаданные с вашей страницы:

https://developers.facebook.com/tools/debug (обновленная ссылка)

Facebook использует og:tags и Open Graph Protocol чтобы расшифровать, какую информацию отображать при предварительном просмотре URL-адреса в share dialog или в ленте новостей на facebook.

The og:tags содержат такую информацию, как:

• название страницы
• тип страница
• URL
• название сайтов
• описание страница
• Facebook user_id администраторов страницы (на facebook )

вот пример ( взятый из документация на facebook ) некоторых og:tags

<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>

после того, как вы осуществили правильную разметку og:tags и установите их значения, вы можете проверить, как facebook будет просматривать ваш URL с помощью Facebook Отладчик. Отладчик также поможет выявить проблемы, которые он находит с og:tags на странице или отсутствие там-из.

Одна вещь, чтобы иметь в виду, что facebook тут сделайте некоторое кэширование в отношении этой информации, поэтому для того, чтобы изменения вступили в силу, ваша страница должна быть выгребали как указано в документации:

Редактирование Метатегов

вы можете обновить атрибуты вашей страницы путем обновления вашей страницы метить. Обратите внимание, что og: title и og:type доступны только для редактирования изначально - после того как ваша страница получает 50 лайков названии будет исправлена, и после того, как ваша страница получает 10 000 лайков, тип становится фиксированным. Эти свойства исправлены, чтобы избежать удивления пользователей, которые понравились страница уже готова. Изменение тегов заголовка или типа после этих ограничений достигаются ничего не делает, ваша страница сохраняет оригинальное название и тип.

для изменения, которые будут отражены на Facebook, вы должны заставить свою страницу чтобы его поскребли. Страница очищается, когда администратор для страницы щелкает кнопка Like или когда URL-адрес вводится в Facebook URL ЛинтерFacebook Debugger...

Я вижу, что все указанные ответы правильные. Однако была упущена одна важная деталь: размер изображения должен быть не менее 200 X 200 px, иначе Facebook заменит миниатюру первым доступным изображением, которое соответствует критериям на странице. Еще один факт заключается в том, что минимальный необходимый для включения 3 metas, которые Facebook требует для og:image вступит в силу:

<meta property="og:title" content="Title of the page" />
<!-- NEXT LINE Even if page is dynamically generated and URL contains query parameters -->
<meta property="og:url" content="http://yoursite.com" />
<meta property="og:image" content="http://convertaholics.com/convertaholics-og.png" />

отладьте свою страницу с помощью отладчика Facebook и исправьте все предупреждения и его должно работать как шарм! https://developers.facebook.com/tools/debug

У меня были те же проблемы, и я считаю, что решил ее. Я использовал метатег link, как упоминалось здесь, чтобы указать на изображение, которое я хотел, но ключ в том, что если вы это сделаете, FB не будет тянуть никаких других изображений в качестве выбора. Кроме того, если ваш образ слишком большой, у вас не будет никакого выбора вообще.

вот как я исправил мой сайт http://gnorml.com/blog/facebook-link-thumbnails/

обмен на Facebook: Как улучшить свои результаты, настроив изображение, заголовок и текст

по ссылке выше. Для лучшего возможного обмена вы хотите предложить 3 части данных в своем HTML:

• Title
• краткое описание
• изображения

Это достигается следующим, помещенным внутри тега "head" вашего HTML:

• название: <title>INSERT POST TITLE</title>
• изображение: <meta property=og:image content="http://site.com/YOUR_IMAGE.jpg"/>
• описание: <meta name=description content="INSERT YOUR SUMMARY TEXT"/>

Если ваш сайт является статическим HTML, вам придется сделать это для каждой страницы с помощью редактора HTML.

Если вы используете CMS как Drupal, вы можете автоматизировать много (см. ссылку выше). Если вы используете wordpress, вы, вероятно, можете реализовать что-то подобное, используя пример Drupal в качестве руководства. Я надеюсь, что вы нашли это полезным.

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

вот как это работает:

1. вам нужна возможность доступа к HTML на конкретной веб-странице, которую вы разделяете. Вероятно, он также будет работать на сайте, если вы используете общий файл заголовка. Я не пробовал это, но это должно работать. Вы просто получите одно и то же изображение для всех страниц, если вы это сделаете.

2. вам нужно добавить эти HTML мета-теги в страницу . Это не будет работать, если вы поместите его в . Убедитесь в том, чтобы настроить для вашего a) изображение, B) описание, C) URL, и D) название.

Реальный Пример.

<meta property="og:image" content="http://www.coachesneedsocial.com/wp-content/uploads/2014/12/BannerWCircleImages-1.jpg" />

<meta property="og:description" content="Coaches share their secrets to success so you can rock 2015." />

<meta property="og:url"content="http://www.coachesneedsocial.com/coacheswisdomtelesummit/" />

<meta property="og:title" content="Coaches Wisdom Telesummit" />

1. сохранить
2. откройте свежий пост на Facebook и повторите попытку открыть страницу, которой вы хотели поделиться.
3. если у вас возникли проблемы... вы можете отладить его с помощью этого инструмента Facebook. Это выглядит более вызывающе, чем есть на самом деле. Он говорит вам, что Facebook видит, когда вы публикуете в URL-адрес делиться.

https://developers.facebook.com/tools/debug/og/object/

Большой Совет.. убедитесь, что" кавычки " одинаковы в вашем HTML (они должны выглядеть как 2 прямые метки и никаких кривых... иногда программы меняют их на разные шрифты, и это искажает код.

У меня также была проблема на сайт Я работал на прошлой неделе. Я реализовал и проверил, как коробка. Затем я пошел вперед, чтобы добавить изображение в свой заголовок (OB: image meta). Тем не менее, правильное изображение не появилось в моем уведомлении facebook.

Я перепробовал все, и пришел к выводу, что каждая отдельная реализация кнопки like кэшируется. Итак, допустим, вы нажимаете кнопку Like на url A, затем вы указываете изображение в заголовке и тестируете это, нажав кнопку Luke снова на url A. Вы не увидите изображение, как страница кэшируется. Изображение появится, когда вы нажмете на кнопку Like на странице B.

чтобы сбросить кэш, вы должны использовать инструмент отладчика lint, упомянутый выше, и проверить все URL-адреса для тех, которые кэшируются... Это единственное, что сработало для меня.

самый простой способ, который я нашел, чтобы установить Facebook Open Graph для каждой статьи Joomla, было разместить в com_content / article / default.переопределение php, следующий код:

$app    = JFactory::getApplication();
$path   = JURI::root();

$document = JFactory::getDocument();
$document->addCustomTag('<meta property="og:title" content="YOUR SITE TITLE" />');
$document->addCustomTag('<meta property="og:name" content="YOUR SITE NAME" />');
$document->addCustomTag('<meta property="og:description" content="YOUR SITE DESCRIPTION" />');
$document->addCustomTag('<meta property="og:site_name" content="YOUR SITE NAME" />');
if (isset($images->image_fulltext) and !empty($images->image_fulltext)) : 
    $document->addCustomTag('<meta property="og:image" content="'.$path.'<?php echo htmlspecialchars($images->image_fulltext); ?>" />');
else :
    $document->addCustomTag('<meta property="og:image" content="'.$path.'images/logo.png" />');
 endif;

это разместит теги meta og в голове с подробностями из текущей статьи.