Як Facebook Sharer вибирає Зображення та інші метадані під час обміну моєю URL-адресою?

393

Використовуючи Facebook Sharer, Facebook запропонує користувачеві можливість використовувати 1 з кількох зображень, витягнутих з джерела, як попередній перегляд їх посилання. Як вибираються ці зображення та як я можу забезпечити, щоб якесь конкретне зображення на моїй сторінці завжди було включене до цього списку?

facebook facebook-opengraph facebook-sharer

— Сампсон
джерело

Це дійсно працює при використанні мета-властивості, але це недійсний html, що мені здається дуже дивним! Спробуйте запустити його через валідатор, і ви побачите. Мене бентежить, чому на землі вони не можуть змусити це працювати з дійсним html ??

1

див. Developers.facebook.com/docs/opengraph <html xmlns: og = " opengraphprotocol.org/schema " ...

— cope360

3

Порада - після внесення змін. Запустіть свою сторінку через лінк, і Facebook оновить ескізи тощо для цієї сторінки developers.facebook.com/tools/lint

Наступна стаття також виявилася дуже корисною: Як налаштувати URL, текст та IMG для спільного доступу

— J0ANMM

593

Як я можу повідомити 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="https://stackoverflow.com/myimage.jpg"/> . Якщо жодна з них не присутня, Facebook перегляне вміст вашої сторінки та вибере зображення зі сторінки, які відповідають її критеріям спільного зображення. Формат JPEG або GIF.

Чи можна вказати кілька зображень, щоб дозволити користувачеві вибрати зображення?

Так, вам просто потрібно додати кілька метатегів зображень у тому порядку, у якому вони з'являться. Користувачеві буде представлено діалогове вікно вибору зображення:
Facebook Image Selector

Я вказав відповідні метатеги зображення. Чому Facebook не приймає зміни?

Після того, як URL-адресу буде надано спільним, сканер Facebook, у якого є користувальницький агент facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php), отримає доступ до вашої сторінки та кешує мета-інформацію. Щоб змусити сервери Facebook очистити кеш-пам'ять, скористайтеся інструментом відлагодження URL-адреси / лінеру Facebook , запущеним у червні 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">

— bkaid
джерело

1

Ще одне місце, на яке вона виглядає: <link rel="apple-touch-icon" href="...">(Ось так він отримує образ SO)

— Ярин

2

@Ярин Я не впевнений, що це правда. StackOverflow має набір властивостей image_src, який саме використовується. Назва файлу для яблучного сенсорного значка інша і не використовується.

— bkaid

3

Чи можу я вибрати порядок зображення? У моєму випадку перед зображенням метатегів з’являються інші зображення.

— vicenrele

23

Мінімальний розмір зображення зараз 200x200px.

— Tr1stan

1

Вуто! Я встановив розмір img на 300px, тепер він, здається, працює. Дякую @ Tr1stan

— Urs

37

Коли ви ділитесь у 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/

— Матіас
джерело

28

Станом на 2013 рік, якщо ви використовуєте facebook.com/sharer.php (PHP), ви можете просто зробити будь-яку кнопку / посилання, наприклад:

<a class="btn" target="_blank" href="http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo urlencode(YOUR_TITLE);?>&amp;p[summary]=<?php echo urlencode(YOUR_PAGE_DESCRIPTION) ?>&amp;p[url]=<?php echo urlencode(YOUR_PAGE_URL); ?>&amp;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. Стилюйте тег будь-яким способом.

— Антоніо Макс
джерело

p[images][0]було саме те, що мені було потрібно. ogтеги працюють для спільного використання одного зображення, але мені потрібно ділитися кількома зображеннями з однієї сторінки.

— thekingoftruth

4

Це має бути нова «прийнята відповідь» - така проста і зрозуміла. Дякую за це, друже.

— Майк

Антоніо, чи є у вас посилання на джерело про те, що ви показали вище? Я намагаюся розглянути це на developers.facebook.com, але не можу знайти нічого, крім цього . Будь ласка, допоможіть.

— Mr_Green

@Mr_Green про це. Ця функція була "застарілою", але тепер повернулася до офіційних документів. У будь-якому випадку, я вважаю, що моя відповідь охоплює основні налаштування, щоб вона працювала.

— Антоніо Макс

@AntonioMax, будь ласка, поясніть, що є s=100у вашому дописі?

— Mr_Green

13

Помістіть такий тег у head:

<link rel="image_src" href="/path/to/your/image"/>

З http://www.facebook.com/share_partners.php

Щодо того, що він вибирає за замовчуванням за відсутності цього тегу, я не впевнений.

— Метт Мости
джерело

12

З мого досвіду, http://www.facebook.com/sharer.php не використовує метатеги. Він використовує рядок, який ви передаєте. Дивись нижче.

http://www.facebook.com/sharer.php?s=100&p evidencetitleember = ЦЕ МОЙ НАЗВ & p [резюме] = ЦЕ МОЕ РЕЗЮМЕ & p [url] = http: //www.MYURL.com&&p [образи] [ 0] = http: //www.MYURL.com/img/IMAGEADDRESS

Метатеги працюють з розробником Facebook, як кнопки / надсилання, як і інша інформація про відкритий графік. Тож якщо ви використовуєте один із фактичних елементів Facebook, як-от коментарі та подібні, це все буде зв’язано з матеріалами Open Graph.

ОНОВЛЕННЯ: Існує два способи використання спільного доступу * відмітити значення? 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

— Джейсон Лідон
джерело

Дуже корисний. Дякую! : D

— Аарон Грей

Чи є законний спосіб використовувати цього спільного користувача на іншому веб-сайті, щоб отримати вміст із URL-адреси? Я мало знаю про API та інше у Facebook ...

— Літ

Спробуйте скористатися параметром URL. Якщо на сторінці є теги OG, ФБ їх викреслить. Тестуйте сторінку, яку ви хочете використовувати тут: developers.facebook.com/tools/debug

— Jason Lydon

11

Старий шлях, вже не працює:

<link rel="image_src" href="http://yoururl/yourimage"/>

Повідомлений новий спосіб, також не працює:

<meta property="og:image" content="http://yoururl/yourimage"/>

Він випадково спрацьовував, і протягом першого дня, коли я його застосував, з тих пір не працює.

Сторінка лінійки Facebook, утиліта, яка перевіряє вашу сторінку, повідомляє, що все правильно, і відображає вибране мною мініатюру ... лише те, що сама сторінка share.php, здається, не працює. Повинно бути помилкою у Facebook, яку вони, мабуть, не хочуть виправити, оскільки кожен звіт про помилки щодо цієї проблеми, який я бачив у їхній системі, все кажуть, що це вирішено чи виправлено.

— тео
джерело

У мене теж є ця проблема. Лінійка повідомляє про помилки та показує моє зображення правильно, але коли я натискаю кнопку спільного доступу на своєму веб-сайті, в інтерфейсі спільного доступу абсолютно немає зображення.

— Люк Гріффітс

image_src більше не працює для Facebook, але деякі сервіси все ще користуються ним (клієнти Telegram тощо)

— Andres SK

10

Щоб змінити заголовок, опис та зображення, нам потрібно додати кілька метатегів під заголовком тегу.

КРОК 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 = посилання на ваш веб-сайт

ПРАВИТИ !!!!

— Gaurav123
джерело

Відладчик був корисним.

— konsolebox

2

Для безпечного HTTPS

<meta property="og:image:secure_url" content="https://image.path.png" />

— Стефан Мічев
джерело

1

У мене була ця проблема і виправлено її за допомогою пропозиції manuel-84. Використання зображення розміром 400x400px чудово працювало, тоді як мої менші зображення ніколи не з'являлися у спільному користувачі.

Зауважте, що Facebook рекомендує мінімум 200 пікселів квадратного зображення як тег зображення:: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/#tags

— Вільям
джерело

1

Це для мене спрацювало: я розмістив потрібне мініатюрне зображення на сторінці відразу після тегу і зробив його занадто малим, щоб побачити ..

<img src="imagename.jpg" width="1" height="1" />

Я не тестував його з висотою 0 і шириною 0, але, ймовірно, все одно буде працювати .. Це не гарантує, що користувач вибере це зображення ..

ТАКОЖ здається, що Facebook кешує мініатюри на вашій сторінці і не перевіряє їх на нові.

— Даніель Бернал
джерело

1

після тегу - ви маєте на увазі: "після тегу BODY"?

— Алексіс Вілке

Так, я вважаю, що саме вони означають. Я робив це на сайті давно, але використовував style="display:none;"замість того, щоб встановити його на 1х1 піксель.

— Майк

1

Використовуйте діалогове вікно фейсбуку замість діалогу спільного доступу, щоб відображати власні зображення

Приклад:

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

— кошеня
джерело

0

Я не міг змусити Facebook вибрати потрібне зображення з певного допису, тому я зробив те, що було викладено на цій сторінці:

/webapps/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 вашого сайту, щоб змусити його змінити мета-вміст на все, що ви змінили для цього одного повідомлення. Це безладне рішення, але воно працює.

— Мішель Глаузер
джерело