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

StackOverflow https://stackoverflow.com/questions/689295

  •  22-08-2019
  •  | 
  •  

Вопрос

Я пытаюсь реализовать этот метод.Я использую код следующим образом

http://www.facebook.com/share.php?u=my_website_url

Теперь, когда Facebook показывает, слева отображаются миниатюры.Эти изображения взяты с моего сайта.Как я могу выбрать конкретное изображение в качестве миниатюры или хотя бы остановить его отображение?

Вы можете проверить это у меня адрес блога.

Это было полезно?

Решение

Кажется, в этом сообщении блога есть ваш ответ:http://blog.capstrat.com/articles/facebook-share-thumbnail-image/

В частности, используйте тег, подобный следующему:

<link rel="image_src" 
      type="image/jpeg" 
      href="http://www.domain.com/path/icon-facebook.gif" />

Имя изображения должно быть таким же, как в примере.

Нажмите «Убедиться, что предварительный просмотр работает».

Примечание:Теги могут быть правильными, но, согласно их документации, Facebook сканирует информацию только каждые 24 часа.Используйте страницу Facebook Lint, чтобы загрузить изображение в Facebook.

http://developers.facebook.com/tools/lint/

Другие советы

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

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

Источник: Поделиться в Фейсбуке

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

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

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

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

В 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 Linter Отладчик Facebook...

Я вижу, что все предоставленные ответы верны.Однако была упущена одна важная деталь:Размер изображения ДОЛЖЕН быть не менее 200 X 200 пикселей, в противном случае Facebook заменит миниатюру первым доступным изображением, соответствующим критериям на странице.Другой факт заключается в том, что минимумом является включение 3 мета-меток, которые требуются 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

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

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

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

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

  2. Вам необходимо добавить эти метатеги HTML на страницу в формате .Это не будет работать, если вы поместите его в файл .Обязательно настройте а) изображение, б) описание, в) URL-адрес и г) заголовок.

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

<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 одинаковы (они должны выглядеть как две прямые отметки без кривых… иногда программы меняют их на разные шрифты, и это портит код.

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

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

  • Заголовок
  • Краткое описание
  • Изображение

Это достигается с помощью следующего, помещенного в тег «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.Надеюсь, вы нашли это полезным.

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

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

Я перепробовал все и пришел к выводу, что каждая реализация кнопки «Мне нравится» кэшируется.Допустим, вы нажимаете кнопку «Мне нравится» на URL-адресе A, затем указываете изображение в заголовке и проверяете его, снова нажав кнопку «Люк» на URL-адресе A.Вы не увидите изображение, поскольку страница кэширована.Изображение появится, когда вы нажмете кнопку «Мне нравится» на странице 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;

В заголовке будут размещены мета-теги с подробностями из текущей статьи.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top