Как показать конкретное изображение в виде миниатюры при реализации общего доступа на Facebook? - PullRequest
Новая
       10

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

98 голосов
/ 27 марта 2009

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

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

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

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

Ответы [ 10 ]

98 голосов
/ 21 января 2011

В спецификации Facebook используйте код, подобный следующему: 

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

Источник: Facebook Поделиться

80 голосов
/ 27 марта 2009

В этом сообщении блога, кажется, есть ваш ответ: 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/

34 голосов
/ 14 декабря 2010

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

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

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

22 голосов
/ 17 января 2012

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

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

  • заголовок страницы
  • Тип страницы
  • URL
  • Название сайта
  • Описание страницы
  • Facebook user_id администраторов страницы (на фейсбуке)

Вот пример (взятый из документации на 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 Debugger . Инструмент отладчика также подсвечивает любые проблемы, которые он обнаруживает с og:tags на странице или их отсутствие.

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

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

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

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

11 голосов
/ 16 сентября 2013

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

2 голосов
/ 02 ноября 2016

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

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

2 голосов
/ 20 сентября 2010

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

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

1 голос
/ 24 мая 2011

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

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

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

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

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

0 голосов
/ 15 июля 2015

Самый простой способ установить открытый график Facebook для каждой статьи 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;

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

0 голосов
/ 17 января 2012

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

Я перепробовал все и пришел к выводу, что каждая реализация кнопки «Нравится» кэшируется. Допустим, вы нажимаете кнопку «Мне нравится» на URL-адресе A, затем указываете изображение в заголовке и проверяете его, снова нажимая кнопку «Luke» на URL-адресе A. Вы не увидите изображение, поскольку страница кэшируется. Изображение появится, когда вы нажмете кнопку «Мне нравится» на странице B.

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

...