Як показати певний образ як ескіз при здійсненні спільного використання у Facebook?

Я намагаюся реалізувати цей метод. Я використовую код наступним чином

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

Зараз, коли Facebook показує, на ній показані ескізи зліва. Ці зображення вибрані з мого веб-сайту. Як я можу вибрати конкретне зображення як мініатюру або принаймні зупинити його, показуючи мініатюру?

Ви можете перевірити це за допомогою моєї адреси блогу .

Здається, ця публікація в блозі відповідає: 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/

З специфікації Facebook використовуйте такий код:

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

Джерело: Facebook Share

Мої теги були правильними, але Фейсбук чинить лише кожні 24 години, відповідно до їх документації. За допомогою сторінки Facebook Lint отримав зображення у Facebook.

Введіть тут свою URL-адресу, і FB оновить метадані з вашої сторінки:

https://developers.facebook.com/tools/debug (оновлене посилання)

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, ви повинні змусити скребкувати свою сторінку. Сторінка викреслюється, коли адміністратор сторінки натискає кнопку "Подобатися" або коли URL-адреса вводиться в URL-адресу Facebook Linter Facebook Debugger ...

Я бачу, що всі надані відповіді правильні. Однак, одна важлива деталь була помічена: розмір зображення ПОВИНЕН бути не менше 200 X 200 px, інакше 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

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

Ось як я виправив свій сайт http://gnorml.com/blog/facebook-link-thumbnails/

Ось як це все працює:

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 (вони повинні мати вигляд двох прямих позначок і без кривих ... інколи програми змінюють їх на різні шрифти, і це зменшує код.

Спільний доступ у Facebook: як покращити результати, налаштовуючи зображення, заголовок та текст

За посиланням вище. Для найкращого доступу можна запропонувати 3 фрагменти даних у своєму HTML:

• Назва
• Короткий опис
• Зображення

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

Нарешті, ви завжди можете вручну редагувати свої спільні публікації. Дивіться цей приклад з ілюстраціями .

Також у мене виникла проблема на сайті, над яким я працював минулого тижня. Я реалізував подібну коробку і протестував подібну коробку. Потім я продовжував додавати зображення до свого заголовка (мета: ob: image). Але правильне зображення не з’явилось у моєму повідомленні у Facebook.

Я спробував усе, і дійшов висновку, що кожна реалізація подібної кнопки є кешованою. Скажімо, ви натискаєте кнопку Like на url A, потім вказуєте зображення в заголовку і тестуєте його, натискаючи кнопку Luke знову на URL-адресу A. Ви не побачите зображення під час кешування сторінки. Зображення з’явиться, коли натиснути кнопку Подобається на сторінці B.

Щоб скинути кеш-пам'ять, ви повинні використовувати інструмент налагодження ворсинок, про який було сказано вище, та перевірити всі URL-адреси для кешованих ... Це єдине, що працювало для мене.

Найпростіший спосіб, який я встановив, щоб встановити Facebook Open Graph на кожну статтю Joomla, було розмістити в 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;

Це помістить мета-теги в голову з деталями з поточної статті.