Перейти к публикации
View in the app

A better way to browse. Learn more.

Дизайн и модификация Invision Community

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Фейсбук не ищет картинки в теме

Опубликовано:

То есть...

 

Когда открываешь тему и добавляешь картинки в виде:

 

[img=http://site.com/image.jpg]

или

 

[img=http://site.com/image.jpg]

А потом делишься ссылкой темы или поста на фейсбук, он (фейсбук) не видит картинку из темы и отображает стандартную картинку og:image

 

Но если добавляешь картинку через стандартную функцию "Attachment" тогда фейсбук видит и загружает картинку в диалоговом окне.

 

Как эту проблему решит?

Рекомендованные сообщения

Опубликовано:
  • Автор

Но если устанавливаю это hook

bim_image_meta_tag_hook.rar

тогда фейсбук находит картинку, но из первого поста. А бывает что в первом посте только текст написано :(

 

Hook details:

Automatically retrieve the first image from the article (including the attached image) and then add it to the meta tag "og: image". So when you share posts on facebook or other social networks it will have that screenshots instead of the fixed meta_image.png image of the IPB.

https://ipsviet.com/topic/35915-bim34-image-meta-tag-101/

Опубликовано:

FB и не должен картинки искать.

Зайдя на страница, он ищет теги Open Graph.

 

Для изображения это og:image.

 

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

Опубликовано:
  • Автор

Тогда как добавить картинки в og:image которые вставлены через bbcode?

 

[img=http://site.com/image.jpg]

или

 

[img=http://site.com/image.jpg]

 

 

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

Конечно есть, но не добавляется.

 

Например... Из одной темы с форума, где точно вставлены картинки, В FireBug видно картинка который задан для og:image

<meta property="og:image" content="http://site.com/fb_600_315.jpg"/>

В https://developers.facebook.com/tools/debug/ & https://developers.facebook.com/tools/debug/og/object/ тоже самое.

Опубликовано:
  • Автор

Кстати, тоже самое с G+ один в один.

Опубликовано:

Точно. Аналогичная проблема.

 

Стоит: <meta property="og:image" content="{$this->settings['meta_imagesrc']}" />

Опубликовано:
  • Автор

В моем случае проблема в системе форума, он скрывает картинки для фейсбука и G+ которые вставлены с помощью bbcode.

Опубликовано:

В моем случае проблема в системе форума, он скрывает картинки для фейсбука и G+ которые вставлены с помощью bbcode.

Форум и не должен их показывать.

Когда Вы добавляете аттачмент в виде картинки, то при отображении страницы темы добавляется тег og:image в код страницы.

Если нужен такой же трюк с обычными картинками, вставленными при помощи бибикода img, то нужно из постов вытаскивать изображения и добавлять og:image

Опубликовано:
  • Автор

@newbie

то нужно из постов вытаскивать изображения и добавлять og:image

Понятно. Как это сделать?

Опубликовано:

Понятно. Как это сделать?

 

Например, добавить в шаблон post

preg_match('~<img[^>]*?src="([^"]*)"[^>]*>~i', $post['post']['post'], $matches); 
if ($matches[1])
{
$this->registry->output->addMetaTag('og:image', $matches[1], false);
}

Опубликовано:
  • Автор

@newbie

Супер! Работает! Спасибо большое!

Опубликовано:
  • Автор

Сделал так:

 

1) С globalTemplate убрал и вставил в boardIndexTemplate:

<meta property="og:image" content="{$this->settings['meta_imagesrc']}"/>

Можно делать условие и оставить в globalTemplate:

<if this not a topick>
<meta property="og:image" content="{$this->settings['meta_imagesrc']}"/>
</if>

 

2) В шаблоне post:

preg_match('~<img[^>]*?src="([^"]*)"[^>]*>~i', $post['post']['post'], $matches); 
if ($matches[1])
{
   $this->registry->output->addMetaTag('og:image', $matches[1], false);
} else if ($matches[0]) {
$this->registry->output->addMetaTag('og:image', str_replace("\r", "", $this->settings['meta_imagesrc'] ), FALSE );
}

 

Сделал так потому что фейсбук сначало видел стандартную meta_imagesrc и брал его в кэш.

Щас когда нажимаю поделиться в окно показывается информация без картинки, закрываю окно и заново нажимаю поделиться, в открытом окне все показывается нормально. Или просто F5.

Это можно исправить?

  • 1 год спустя...
Опубликовано:
  • Автор

Здравствуйте

 

<php>
if (preg_match('~<img[^>]*(bbc[^>]*img*)[^>]*src="([^"]*)"[^>]*?>~i', $post['post']['post'], $matches, PREG_OFFSET_CAPTURE, 0))
{ 
   print_r($matches[2]);
   $this->registry->output->addMetaTag('og:image', $matches[2]);
} else {
   print_r($matches[2]);
   echo 'Not found'; 
   $this->registry->output->addMetaTag('og:image', $this->settings['meta_imagesrc']);
}
</php>

 

Если картинка найдена выводит:

Not foundNot foundArray
(
   [0] => https://site.com/uploads/1.jpg
   [1] => 3240
)
Array
(
   [0] => https://site.com/uploads/2.jpg
   [1] => 1064
)
Not foundNot foundNot foundArray
(
   [0] => https://site.com/uploads/3.jpg
   [1] => 3185
)
Not foundNot foundNot foundNot foundNot foundArray
(
   [0] => https://site.com/uploads/4.jpg
   [1] => 1084
)
Not found

 

Не понимаю что ему не нравится :(

Опубликовано:

Вам newbie написал другой вариант preg_match, зачем надо было менять формат?

else там явно лишний, потому что по умолчанию и так будет дефолтная картинка.

Этот код также отрабатывает для всех сообщений в теме, не только первой. Возможно имеет смысл ограничить только первым сообщением, или первой найденной картинкой.

Опубликовано:
  • Автор
Вам newbie написал другой вариант preg_match, зачем надо было менять формат?

Буду использовать.

else там явно лишний, потому что по умолчанию и так будет дефолтная картинка.

Дефолтный отключен в темах, потому что в первым фейсбук все равно берет его.

https://developers.facebook.com/tools/debug/og/object/ показывается и найденный картинка и дефолтная. В окне "Поделиться" показывается только дефолтная.

 

post-43613-0-30938200-1553680267_thumb.png

Создайте аккаунт или войдите в него для комментирования

Сейчас на странице 0

  • Нет пользователей, просматривающих эту страницу.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.