Как Facebook Sharer выбирает изображения и другие метаданные при совместном использовании моего URL-адреса?
при использовании Facebook Sharer, Facebook предложит пользователю возможность использовать 1 из нескольких изображений, извлеченных из источника в качестве предварительного просмотра для их ссылки. Как эти изображения выбраны, и как я могу гарантировать, что любое конкретное изображение на моей странице всегда входит в этот список?
12 ответов:
как я могу сказать 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 будет смотреть на содержание вашей страницы и выбирать изображения с вашей страницы, которые соответствуют его критериям share image: изображение должно быть не менее 200px на 200px, иметь максимальное соотношение сторон 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">
когда Вы делитесь для Facebook, вы должны добавить в свой html в раздел head следующие мета-теги:
<meta property="og:title" content="title" /> <meta property="og:description" content="description" /> <meta property="og:image" content="thumbnail_image" />и это все!
добавить кнопку, как вы должны в соответствии с тем, что FB говорит вам.
вся необходимая информация находится в www.facebook.com/share/
по состоянию на 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-ссылка raw. Стиль тега в любом случае вы хотите.
поместите следующий тег в
head:<link rel="image_src" href="/path/to/your/image"/>от http://www.facebook.com/share_partners.php
что касается того, что он выбирает по умолчанию в отсутствие этого тега, я не уверен.
по моему опыту,http://www.facebook.com/sharer.php не использует мета-теги. Он использует строку, которую вы передаете. Увидеть ниже.
http://www.facebook.com/sharer.php?s=100&p[title]=THIS is MY TITLE&p[summary]=THIS Is MY SUMMARY&p[url]=http://www.MYURL.com&&p[images][0]=http://www.MYURL.com/img/IMAGEADDRESS
мета-теги работают с кнопками разработчика Facebook like/send, как и другая информация об открытом графике. Так что если вы используете один из фактических элементов Facebook, таких как комментарии и т. д., которые будут связаны с открытым графом.
обновление: есть два способа использовать sharer * обратите внимание ?ы против ?значение U в строке запроса
1 ==> строку: 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
старый способ больше не работает:
<link rel="image_src" href="http://yoururl/yourimage"/>сообщается новый способ, также не работает:
<meta property="og:image" content="http://yoururl/yourimage"/>он случайно сработал и включился в течение первого дня, когда я его реализовал, с тех пор не работал вообще.
страница Facebook linter, утилита, которая проверяет вашу страницу, сообщает, что все правильно и отображает миниатюру, которую я выбрал... просто поделиться.сама php-страница, похоже, не работает. Должно быть, ошибка в Facebook, одна из них по-видимому, не нужно исправлять, так как каждый отчет об ошибке, касающийся этой проблемы, я видел в их системе, все говорят, что они разрешены или исправлены.
чтобы изменить название, описание и изображение, нам нужно добавить некоторые мета-теги под тегом head.
Шаг 1 :
Добавить мета-теги под тегом head<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/), где вы упомянули теги. Нажмите на кнопку отладки.
его сделали.
вы можете проверить здесь https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/
в приведенном выше url, u = ссылка на ваш сайт
наслаждайтесь !!!!
У меня была эта проблема, и я исправил ее с предложением Мануэля-84. Использование изображения 400x400px отлично работало, в то время как мое меньшее изображение никогда не появлялось в sharer.
обратите внимание, что Facebook рекомендует минимальное квадратное изображение 200px в качестве тега og:image: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/#tags
Это то, что сработало для меня: я поместил нужное изображение миниатюры на страницу сразу после тега и сделал его слишком маленьким, чтобы видеть..
<img src="imagename.jpg" width="1" height="1" />Я не тестировал его с высотой 0 и шириной 0, но он, вероятно, все равно будет работать.. Это не гарантирует, что пользователь выберет это изображение..
также кажется, что Facebook кэширует миниатюры на Вашей странице и не всегда проверяет их на наличие новых.. попробуйте добавить это на другую страницу вашего сайта, и вы увидите, что это завод.
использовать 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
Я не мог заставить 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 вашего сайта, чтобы заставить его изменить мета-контент для всего, что вы изменили для этого сообщения. Это грязное решение, но оно работает.
Comments