kimonniez Опубликовано 20 сентября, 2013 Жалоба Поделиться Опубликовано 20 сентября, 2013 На днях столкнулся с проблемой некорректного отображения информации, которая постится в социальные сети при помощи виджета Яндекса. На моем сайте при попытке запостить страницу в социальную сеть отображалося довольно непрезентабельное сообщение – 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}" /> Вот и все. Посмотреть, как это работает можно на моем сайте Корпоративных подарков. Если есть какие-то вопросы – задавайте. Цитата Ссылка на сообщение Поделиться на другие сайты
Danya Опубликовано 20 сентября, 2013 Жалоба Поделиться Опубликовано 20 сентября, 2013 в 5 пункте нет кода, который нужно выложить в index.tpl Цитата Ссылка на сообщение Поделиться на другие сайты
kimonniez Опубликовано 20 сентября, 2013 Автор Жалоба Поделиться Опубликовано 20 сентября, 2013 в 5 пункте нет кода, который нужно выложить в index.tplСпасибо, не доглядел. Добавил в пятый пункт. Цитата Ссылка на сообщение Поделиться на другие сайты
Danya Опубликовано 20 сентября, 2013 Жалоба Поделиться Опубликовано 20 сентября, 2013 Выложите код в первом сообщении, т.к на вашем блоге код битый! Цитата Ссылка на сообщение Поделиться на другие сайты
kimonniez Опубликовано 20 сентября, 2013 Автор Жалоба Поделиться Опубликовано 20 сентября, 2013 Выложите код в первом сообщении, т.к на вашем блоге код битый!Действительно были нестыковки из-за преобразования символов в WYSIWYG редакторе.Изменил все, проверил - теперь норм. Цитата Ссылка на сообщение Поделиться на другие сайты
Решение osben Опубликовано 28 сентября, 2013 Решение Жалоба Поделиться Опубликовано 28 сентября, 2013 Автор, ОМГ почему в 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} ??? Цитата Ссылка на сообщение Поделиться на другие сайты
Rash Опубликовано 28 сентября, 2013 Жалоба Поделиться Опубликовано 28 сентября, 2013 kimonniez, много букоф и ненужного кода ради одной картинки, трудно было на форуме найти готовое решение, причем все делается в одну строчку! Решение osben`a хорошее тем, что если нет картинки товара, берется логотип сайта. Цитата Ссылка на сообщение Поделиться на другие сайты
kimonniez Опубликовано 2 октября, 2013 Автор Жалоба Поделиться Опубликовано 2 октября, 2013 2 osben:Логика в отображении это какбы не очень хорошо. Хотя геморроя реально в сто раз меньше. Особенно в будущем при обновлении проблем не будет. 2 Rash:Вообще - в моем примере если нет картинки товара, то подставляется лого сайта. По поводу много буков - изначально пост содержал пару строк, а все описалово было в блоге. Описание в этот пост перенесли модераторы. И насчет готового решения - я лично не нашел. Если можно, скиньте ссылку на решение, которое "я не нашел". Цитата Ссылка на сообщение Поделиться на другие сайты
Dr_Brown Опубликовано 3 октября, 2013 Жалоба Поделиться Опубликовано 3 октября, 2013 Я вот не пойму, зачем придумывать велосипед сюда ? Есть сервис share42, подключите скрипт оттуда и закройте эту тему.Виджет от Яндекса такой убогий, что просто противно его ставить. Допотопные иконки....... Но всеравно автору спасибо. Цитата Ссылка на сообщение Поделиться на другие сайты
osben Опубликовано 3 октября, 2013 Жалоба Поделиться Опубликовано 3 октября, 2013 2 osben:Логика в отображении это какбы не очень хорошо. Хотя геморроя реально в сто раз меньше. Особенно в будущем при обновлении проблем не будет. 2 Rash:Вообще - в моем примере если нет картинки товара, то подставляется лого сайта. По поводу много буков - изначально пост содержал пару строк, а все описалово было в блоге. Описание в этот пост перенесли модераторы. И насчет готового решения - я лично не нашел. Если можно, скиньте ссылку на решение, которое "я не нашел".поправьте меня, а что в моей логике не хорошего? Цитата Ссылка на сообщение Поделиться на другие сайты
osben Опубликовано 3 октября, 2013 Жалоба Поделиться Опубликовано 3 октября, 2013 Я вот не пойму, зачем придумывать велосипед сюда ? Есть сервис share42, подключите скрипт оттуда и закройте эту тему.Виджет от Яндекса такой убогий, что просто противно его ставить. Допотопные иконки....... Но всеравно автору спасибо. а у Вас всегда определяет правильный рисунок к посту? или я что то не знаю, возможно там можно указать рисунок и данные ? Цитата Ссылка на сообщение Поделиться на другие сайты
Dr_Brown Опубликовано 3 октября, 2013 Жалоба Поделиться Опубликовано 3 октября, 2013 Рисунок можно выбрать наводишь и там стрелочки и выбираешь, можете у меня в магазине потестить, отображает или логотип, или картинку главную товара, описание берет только из титла, в принципе больше и не надо: Попробуйте http://share42.com/ru на четырех проектах стоит, норм. Цитата Ссылка на сообщение Поделиться на другие сайты
mustang75 Опубликовано 15 ноября, 2017 Жалоба Поделиться Опубликовано 15 ноября, 2017 У меня почему-то вместо лого показывает картинки из слайдера Цитата Ссылка на сообщение Поделиться на другие сайты
magicwd Опубликовано 17 ноября, 2018 Жалоба Поделиться Опубликовано 17 ноября, 2018 (изменено) Автор, ОМГ почему в 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,проверил на ВК и Одноклассники, но не хочет на ФБ работать. Изменено 17 ноября, 2018 пользователем magicwd Цитата Ссылка на сообщение Поделиться на другие сайты
fuckmoney Опубликовано 17 ноября, 2018 Жалоба Поделиться Опубликовано 17 ноября, 2018 Ваше решение на моем шаблоне работает только для товара, но для главной и для страниц категорий, картинка не постится к сожалению. Хотя нет, подтягивается подставная картинка /logo.png,проверил на ВК и Одноклассники, но не хочет на ФБ работать. https://developers.facebook.com/tools/debug/ Цитата Ссылка на сообщение Поделиться на другие сайты
magicwd Опубликовано 17 ноября, 2018 Жалоба Поделиться Опубликовано 17 ноября, 2018 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Возможно, какие то записи в БД остались? Не пойму, где их искать? Цитата Ссылка на сообщение Поделиться на другие сайты
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.