ВКонтакте: красивый репост для Simpla

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

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

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

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

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

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

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

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

Нам понадобится:
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}» />

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>