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

Ответ 1

У этого сообщения в блоге есть свой ответ: 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/

Ответ 2

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

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

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

Ответ 3

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

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

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

Ответ 4

Facebook использует og:tags и Open Graph Protocol, чтобы расшифровать информацию, отображаемую при просмотре вашего URL-адреса в share диалог или в ленте новостей на 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 Debugger. Инструмент отладчика также будет выявлять любые проблемы, которые он обнаруживает, с og:tags на странице или отсутствовать там.

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

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

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

Чтобы изменения отражались на Facebook, вы должны вынудить свою страницу быть очищенным. Страница соскабливается, когда администратор нажимает на страницу Кнопка "Избранное" или когда URL-адрес введен в URL-адрес Facebook Linter Отладчик Facebook...

Ответ 5

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

<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

Ответ 6

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

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

Ответ 7

Обмен на 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 в качестве ориентира. Надеюсь, вы нашли их полезными.

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

Ответ 8

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

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

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

Ответ 9

Самый простой способ установить 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 в голову с деталями из текущей статьи.

Ответ 10

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

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

• Вам нужно добавить эти метатеги HTML на страницу в. Это не сработает, если вы поместите его в. Удостоверьтесь, что вы настроили на свой а) образ, 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" />

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

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

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