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

Question 1

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

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

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

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

Question 2

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

Question 3

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

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

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

Question 4

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

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

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

Question 5

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

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

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

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

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

Question 6

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

Question 7

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

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

Question 8

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

Вам нужна возможность доступа к HTML на конкретной веб-странице, которой вы делитесь. Это, вероятно, будет работать и на всем сайте, если вы используете общий файл заголовка. Я не пробовал, но должно работать. Если вы сделаете это, вы просто получите одно и то же изображение для всех страниц.
Вам необходимо добавить эти метатеги 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" />

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

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

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

Question 9

Публикация в 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. Надеюсь, они вам пригодились.

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

Question 10

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

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

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

Question 11

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

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