Перейти к содержанию
Официальный форум поддержки Simpla

Репост в соц сетях с картинкой


Перейти к решению Решено osben,

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

На днях столкнулся с проблемой некорректного отображения информации, которая постится в социальные сети при помощи виджета Яндекса. На моем сайте при попытке запостить страницу в социальную сеть отображалося довольно непрезентабельное сообщение – title и немного сопроводительного текста. Без картинки.
Было принято решение как-то это дело поправить.

В ходе расследования я узнал, что основное, чего не хватает социальным сетям для понимания, какую картинку нужно вставлять в сообщение – прямого указания на эту картинку в специальном мета-теге open graph protocol.

Сначала я пытался решить проблему при помощи javascript, a точнее при помощи jQuery и при загрузке страницы просто аппендить кнужный мета тег, но то ли яндексовский виджет грузился еще раньше $(document).ready() и $(window).load(), то ли информация о мета-тегах на странице собиралась каким-то внешним инструментом, который не ждал отработки скриптов на странице, но факт – яваскрипт проблему не решил. 

Тогда я пошел смотреть в код.
В контроллере товара ProductView.php я встретил то, как забирается из БД картинка товара, но сформировать урл из одного только названия слету не вышло, т.к. нужно для картинки иметь токен, разбираться в генерации которого никакого желания не было и я решил упростить себе жизнь.

Т.к. вся задача сводится к тому, чтобы поставить вмета тег примерно такого содержания:

То нужно просто взять готовый ПУТЬ_К_КАРТИНКЕ и передать его в шаблон, где его просто разместить в нужном теге.

Сильно не ковыряясь в коде, я решил просто вытащить нужную нам ссылку картинку из $content, в которой содержится html готовой страницы, который будет подставляться в шаблон index.tpl.

В общем, ниже сам мануал, как сделать, чтобы в сообщении на стене отображалась картинка с сайта:

Нам понадобится:
1. Залить логотип на сервер, чтобы мы его могли подставлять в пост на страницах, отличных от страницы товаров. В итоге нам нужен будет урл этой картинки. Что-то, типа:

http://exapmle.com/logo.png

2. Открыть файл шаблона товара. Он находится в папке:

design/ВАШ_ШАБЛОН/html/product.tpl

В этом файлике нужно найти что-то, типа:

<img src="{$product->image->filename|resize:300:300}" alt="{$product->product->name|escape}" />

И сразу после

<img 

Перед

src="{$product->image->filename|resize:300:300}"

Вставить следующее:

soc_src="" 

Далее в наш новый атрибут soc_src нужно скопировать содержимое старого src. В итоге должно получиться следующее:

<img soc_src="{$product->image->filename|resize:300:300}" src="{$product->image->filename|resize:300:300}" alt="{$product->product->name|escape}" />

Для чего это нужно – чтобы потом проще выпарсить нужный нам тег.

3. Нужно отредактировать файл:

view/IndexView.php

Нужно после того, как мы получили основной блок страницы вытащить нашу ссылку.

Так что после следующих строк:

// Создаем основной блок страницы
if (!$content = $this->main->fetch())
{
return false;
}

Добавить это:

preg_match('/soc_src=([\'"])?((?(1).+?|[^\s>]+))(?(1)\1)/', $content, $matches);
$ogImage = $matches[2]?$matches[2]:'http://'.$_SERVER['HTTP_HOST'].'/source/logo.png';

Обратите внимание, что вот в этом месте мы генерируем ссылку на ваш логотип, который вы получили в шаге 1 данного мануала.

И если у вас ссылка на логотип выглядит как

http://exapmle.com/logo.png

То строку:

$ogImage = $matches[2]?$matches[2]:'http://'.$_SERVER['HTTP_HOST'].'/source/logo.png';

Вам надо изменить на

$ogImage = $matches[2]?$matches[2]:'http://'.$_SERVER['HTTP_HOST'].'/logo.png';

В примере так, потому что у себя я положил логотип в папку source в корне сайта.

И в двух словах объяснение того, что делает этот код. В первой строке с помощью регулярных выражений мы получаем ссылку на изображение товара, а во второй строке в переменную $ogImage кладем ссылку на изображение товара или, если у нас страница отличная, от страницы товара и по понятным причинам нет нужной нам картинки, кладем ссылку на залитый ранее логотип. Это нужно для того, чтобы на всех страницах у нас была какая-то картинка при репосте в соц сети.

4. Сразу после добавленных строк в шаге 3 добавляем следующее:

$this->design->assign('og_image', $ogImage);

Таким образом мы передаем в шаблон переменную, в которой содержится нужная нам ссылка на картинку.

5. И последнее – в шаблон, который лежит тут

design/ВАШ_ШАБЛОН/html/index.tpl

в соответствующий раздел вверху страницы, где описываются мета теги добавляем следующее:

<meta property="og:image" content="{$og_image}" />

Вот и все. Посмотреть, как это работает можно на моем сайте Корпоративных подарков. Если есть какие-то вопросы – задавайте.

Ссылка на сообщение
Поделиться на другие сайты

Выложите код в первом сообщении, т.к на вашем блоге код битый!

Действительно были нестыковки из-за преобразования символов в WYSIWYG редакторе.

Изменил все, проверил - теперь норм.

Ссылка на сообщение
Поделиться на другие сайты
  • 2 недели спустя...
  • Решение

Автор, ОМГ 

почему в head нельзя вставить что типо такого:

		{if $product->image}
		<meta property="og:image" content="{$product->image->filename|resize:310:310}" />
		{else}
		<meta property="og:image" content="{$config->root_url}/design/{$settings->theme|escape}/img/logo.png" />
		{/if}

???

Ссылка на сообщение
Поделиться на другие сайты

kimonniez, много букоф и ненужного кода ради одной картинки, трудно было на форуме найти готовое решение, причем все делается в одну строчку! Решение osben`a хорошее тем, что если нет картинки товара, берется логотип сайта.

Ссылка на сообщение
Поделиться на другие сайты

2 osben:

Логика в отображении это какбы не очень хорошо. Хотя геморроя реально в сто раз меньше. Особенно в будущем при обновлении проблем не будет. 

 

2 Rash:

Вообще - в моем примере если нет картинки товара, то подставляется лого сайта. По поводу много буков - изначально пост содержал пару строк, а все описалово было в блоге.  Описание в этот пост перенесли модераторы. 

И насчет готового решения - я лично не нашел. Если можно, скиньте ссылку на решение, которое "я не нашел".

Ссылка на сообщение
Поделиться на другие сайты

Я вот не пойму, зачем придумывать велосипед сюда ? Есть сервис share42, подключите скрипт оттуда и закройте эту тему.

Виджет от Яндекса такой убогий, что просто противно его ставить. Допотопные иконки.......

 

Но всеравно автору спасибо.

Ссылка на сообщение
Поделиться на другие сайты

2 osben:

Логика в отображении это какбы не очень хорошо. Хотя геморроя реально в сто раз меньше. Особенно в будущем при обновлении проблем не будет. 

 

2 Rash:

Вообще - в моем примере если нет картинки товара, то подставляется лого сайта. По поводу много буков - изначально пост содержал пару строк, а все описалово было в блоге.  Описание в этот пост перенесли модераторы. 

И насчет готового решения - я лично не нашел. Если можно, скиньте ссылку на решение, которое "я не нашел".

поправьте меня, а что в моей логике не хорошего?

 

 

Ссылка на сообщение
Поделиться на другие сайты

Я вот не пойму, зачем придумывать велосипед сюда ? Есть сервис share42, подключите скрипт оттуда и закройте эту тему.

Виджет от Яндекса такой убогий, что просто противно его ставить. Допотопные иконки.......

 

Но всеравно автору спасибо.

 

а у Вас всегда определяет правильный рисунок к посту? или я что то не знаю, возможно там можно указать рисунок и данные ?

Ссылка на сообщение
Поделиться на другие сайты

Рисунок можно выбрать наводишь и там стрелочки и выбираешь, можете у меня в магазине потестить, отображает или логотип, или картинку главную товара, описание берет только из титла, в принципе больше и не надо:

 

Попробуйте http://share42.com/ru на четырех проектах стоит, норм.

Ссылка на сообщение
Поделиться на другие сайты
  • 4 года спустя...
  • 1 год спустя...

Автор, ОМГ 

 

почему в head нельзя вставить что типо такого:

		{if $product->image}
		<meta property="og:image" content="{$product->image->filename|resize:310:310}" />
		{else}
		<meta property="og:image" content="{$config->root_url}/design/{$settings->theme|escape}/img/logo.png" />
		{/if}

???

Ваше решение на моем шаблоне работает только для товара, но для главной и для страниц категорий, картинка не постится к сожалению. Хотя нет, подтягивается подставная картинка /logo.png,проверил на ВК и Одноклассники, но не хочет на ФБ работать.

Изменено пользователем magicwd
Ссылка на сообщение
Поделиться на другие сайты

Ваше решение на моем шаблоне работает только для товара, но для главной и для страниц категорий, картинка не постится к сожалению. Хотя нет, подтягивается подставная картинка /logo.png,проверил на ВК и Одноклассники, но не хочет на ФБ работать.

 

https://developers.facebook.com/tools/debug/

Ссылка на сообщение
Поделиться на другие сайты

Спасибо большое, ситуация начинает проясняться, к одному из товаров, вот такая ссылка на изображение

og:image - http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg

а с главной, как ни странно, но ссылка ведет на изображение из старого шаблона, который уже не существует

design/racing_1/images/slide_00.jpg

Возможно, какие то записи в БД остались? Не пойму, где их искать?

Ссылка на сообщение
Поделиться на другие сайты

Присоединяйтесь к обсуждению

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

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

Загрузка...
×
×
  • Создать...