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

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

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

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

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

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

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

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

Источник: Facebook Share

Обмен на Facebook: Как улучшить свои результаты с помощью Настройки изображения, заголовок и текст

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

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

Это достигается с помощью следующих, помещенной внутри «головы» тега вашего HTML:

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

Если веб-сайт является статической HTML, вы должны сделать это для каждой страницы, используя редактор HTML.

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

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

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

Я перепробовал все, и пришел к выводу, что кэшируется каждый реализация кнопки как. Так скажем, у вас часы единомышленниц кнопки на URL-адрес А, то указать изображение в заголовке и протестировать его еще раз нажав кнопку Люка на URL-адрес А. Вы не видите изображение, страница кэшируются. Изображение будет отображаться при нажатии на кнопку Like на странице Б.

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

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

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

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

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

Для изменения , которые будут отражены на Facebook, вы должны заставить вашу страницу быть Царапины. Страница Царапины , когда администратор для страницы нажмет кнопку Like или когда URL вводится в Facebook URL ЛИНТЕР Facebook Debugger ...

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

Самый простой способ я нашел, чтобы установить Facebook Open Graph для каждой статьи Joomla, было поместить в следующий код com_content / статьи / 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 в голове детали из текущей статьи.

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

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" />

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

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

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