При использовании Facebook Sharer Facebook предложит пользователю использовать 1 из нескольких изображений, извлеченных из источника, в качестве предварительного просмотра для их ссылки. Как эти изображения выбраны и как я могу гарантировать, что любое конкретное изображение на моей странице всегда включено в этот список?
Как Facebook Sharer выбирает Изображения и другие метаданные при совместном использовании моего URL?
Ответ 1
Как сообщить Facebook, какое изображение использовать, когда моя страница будет доступна?
В Facebook есть набор метатег открытых графиков, на котором можно решить, какое изображение будет показано.
Ключом для изображения Facebook являются:
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
и он должен присутствовать внутри тега <head></head> в верхней части страницы.
Если эти теги отсутствуют, он будет искать свой более старый метод указания изображения: <link rel="image_src" href="/myimage.jpg"/>. Если ни один из них не присутствует, Facebook будет просматривать содержимое вашей страницы и выбирать изображения со своей страницы, соответствующие критериям его общего изображения: Изображение должно быть не менее 200 пикселей на 200 пикселей, иметь максимальный формат изображения 3: 1 и в формате PNG, JPEG или GIF.
Можно ли указать несколько изображений, чтобы пользователь мог выбрать изображение?
Да, вам просто нужно добавить несколько метатег изображений в том порядке, в котором вы хотите, чтобы они появились. Затем пользователь будет представлен диалоговое окно выбора изображения: 
Я указал соответствующие метатеги изображений. Почему Facebook не принимает изменения?
Как только URL будет открыт, сканер Facebook, имеющий пользовательский агент facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php), получит доступ к вашей странице и кеширует метаинформацию. Чтобы заставить Facebook-серверы очистить кеш, используйте Facebook Url Debugger/Linter Tool, что они запущенный в июне 2010 года, чтобы обновить кеш и устранить любые проблемы с метатегами на вашей странице.
Кроме того, изображения на странице должны быть общедоступны для искателя Facebook. Вы должны указать абсолютный url как http://example.com/yourimage.jpg вместо просто /yourimage.jpg.
Могу ли я обновить эти метатеги с помощью кода на стороне клиента, например Javascript или jQuery? Нет. Подобно поисковым роботам, скребок Facebook не выполняет сценарии, поэтому любые метатеги присутствуют при загрузке страницы - это метатеги, которые используются для выбора изображения.
Добавление этих тегов заставляет мою страницу больше не проверять. Как я могу это исправить?
Вы можете добавить необходимые теги имен Facebook в свой тег, и ваша страница должна пройти проверку:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
Ответ 2
Когда вы делитесь Facebook, вы должны добавить свой html в раздел заголовка следующих метатег:
<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />
И что это!
Добавьте кнопку, как вам следует, в соответствии с тем, что вам сообщает FB.
Вся необходимая информация находится в www.facebook.com/share/
Ответ 3
Начиная с 2013 года, если вы используете facebook.com/sharer.php(PHP), вы можете просто сделать любую кнопку/ссылку, например:
<a class="btn" target="_blank" href="http://www.facebook.com/sharer.php?s=100&p[title]=<?php echo urlencode(YOUR_TITLE);?>&p[summary]=<?php echo urlencode(YOUR_PAGE_DESCRIPTION) ?>&p[url]=<?php echo urlencode(YOUR_PAGE_URL); ?>&p[images][0]=<?php echo urlencode(YOUR_LINK_THUMBNAIL); ?>">share on facebook</a>
Параметры запроса связи:
p[title] = Define a page title
p[summary] = An URL description, most likely describing the contents of the page
p[url] = The absolute URL for the page you're sharing
p[images][0] = The URL of the thumbnail image to be used as post thumbnail on facebook
Это просто: вам не нужны никакие js или другие настройки. Это всего лишь HTML-ссылка. Создайте тег A любым способом, который вы хотите.
Ответ 4
Поместите следующий тег в head:
<link rel="image_src" href="/path/to/your/image"/>
От http://www.facebook.com/share_partners.php
Насколько он выбирает значение по умолчанию при отсутствии этого тега, я не уверен.
Ответ 5
По моему опыту, http://www.facebook.com/sharer.php не использует метатеги. Он использует строку, которую вы передаете. См. Ниже.
http://www.facebook.com/sharer.php?s=100&p[title]=THIS IS MY TITLE & p [summary] = ЭТО МОЕ РЕЗЮМЕ & p [url] = http://www.MYURL.com&&p[images][0]=http://www.MYURL.com/img/IMAGEADDRESS
Мета-теги работают с кнопками разработчика Facebook, такими как /send, как и другая информация Open Graph. Поэтому, если вы используете один из реальных элементов Facebook, таких как комментарии и т.д., Все это будет связано с материалом Open Graph.
UPDATE: существует два способа использования разделителя * отметить значение s по сравнению с значением? u в строке запроса
1 == > STRING: http://www.facebook.com/sharer.php?s + контент сверху |
~~ > Извлечет информацию из строки.
2 == > URL: http://www.facebook.com/sharer.php?u=url, где url равен фактическому URL-адресу
~~ > Сгладит страницу, указанную в значении URL-адреса
~~ > Вы можете проверить тестовые значения здесь: https://developers.facebook.com/tools/debug
Ответ 6
Старый способ, больше не работает:
<link rel="image_src" href="http://yoururl/yourimage"/>
Сообщить о новом способе, также не работает:
<meta property="og:image" content="http://yoururl/yourimage"/>
Он был случайным образом отработан и включен в первый день, когда я его реализовал, с тех пор не работал.
Страница входа в Facebook, утилита, которая проверяет вашу страницу, сообщает, что все правильно, и отображает эскиз, который я выбрал... просто, что сама страница share.php не работает. Должен быть ошибкой в Facebook, по-видимому, они не хотят исправлять, поскольку каждый отчет об ошибке, касающийся этой проблемы, которую я видел в их системе, все говорят, что разрешено или исправлено.
Ответ 7
Чтобы изменить заголовок, описание и изображение, нам нужно добавить некоторые метатеги под заголовком head.
ШАГ 1:
Добавить метатеги под заголовком
<html>
<head>
<meta property="og:url" content="http://www.test.com/" />
<meta property="og:image" content="http://www.test.com/img/fb-logo.png" />
<meta property="og:title" content="Prepaid Phone Cards, low rates for International calls with Lucky Prepay" />
<meta property="og:description" content="Cheap prepaid Phone Cards. Low rates for international calls anywhere in the world." />
СЛЕДУЮЩИЙ ЭТАП:
Нажмите ниже ссылку
https://developers.facebook.com/tools/debug
Добавьте свой URL в текстовое поле (например, http://www.test.com/), где вы упомянули теги. Нажмите кнопку DEBUG.
Сделано.
Здесь вы можете проверить https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/
В приведенном выше URL-адресе u = ссылка на ваш сайт
НАСЛАЖДАЙТЕСЬ!!!!
Ответ 8
Для безопасного HTTPS
<meta property="og:image:secure_url" content="https://image.path.png" />
Ответ 9
Это то, что сработало для меня: я разместил желаемое уменьшенное изображение на странице сразу после тега и сделал его слишком маленьким, чтобы видеть.
<img src="imagename.jpg" width="1" height="1" />
Я не тестировал его с высотой 0 и шириной 0, но он, вероятно, будет работать. Это не гарантирует, что пользователь выберет это изображение.
ТАКЖЕ похоже, что Facebook кэширует миниатюры на вашей странице и не всегда проверяет их на новые. попробуйте добавить это на другую страницу своего сайта, и вы увидите, что она работает.
Ответ 10
У меня была эта проблема и она была исправлена с помощью manuel-84. Использование изображения 400x400px отлично поработало, в то время как мое меньшее изображение никогда не появлялось в раздаче.
Обратите внимание, что Facebook рекомендует минимальное изображение размером 200 пикселей в качестве тега og: image: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/#tags
Ответ 11
Я не мог заставить Facebook выбрать правильный образ из определенного сообщения, поэтому я сделал то, что описано на этой странице:
https://webapps.stackexchange.com/questions/18468/adding-meta-tags-to-individual-blogger-posts
Другими словами, что-то вроде этого:
<b:if cond='data:blog.url == "http://urlofyourpost.com"'>
<meta content='http://urlofyourimage.png' property='og:image'/>
</b:if>
В принципе, вы намерены скопировать код if в свой HTML-код сайта, чтобы заставить его изменить мета-контент для того, что вы изменили для этого сообщения. Это грязное решение, но оно работает.
Ответ 12
Используйте диалоговое окно фида facebook вместо диалога совместного использования, чтобы отображать пользовательские изображения
Пример:
https://www.facebook.com/dialog/feed?app_id=1389892087910588
&redirect_uri=https://scotch.io
&link=https://scotch.io
&picture=http://placekitten.com/500/500
&caption=This%20is%20the%20caption
&description=This%20is%20the%20description