ADBLOCK_MSG
Постим иллюстрированные статьи Joomla-сайта на Facebook, используя OG-тегиОпубликовано: 13.09.2015, 13:06 Автор: Ogri Просмотров: 14062
Некоторое время назад я написал цикл статей о внедрении кнопок социальных медиа в сайт на Joomla 2.5. Перейдя на 3.x (на момент написания этот сайт работает под 3.4.4), я продолжал держать на страницах статей кнопки от share42, интегрированные по той же методике, и до определенного времени их функционал работал на ура. Однако с некоторых пор начались определенные глюки при расшаривании статей в некоторых соцсетях. В частности, раньше при попытке поделиться в Facebook давалась возможность выбрать одну из картинок, имеющихся на странице. Теперь же такая опция пропала, картинка выбиралась самим скриптом Фейсбука, причем отфонарно. Пришлось разобраться, что изменилось в политике Закерберга, и под эти изменения подстроиться. Результатам этого исследования данная статья и посвящена.
Но прежде всего я обновил скрипт от share42 и обнаружил, что он теперь датируется маем 2014-го. Я на тот момент использовал версию от октября 2013-го. Заменил скрипт на более свежий, но проблема осталась. Найдя в коде событие клика по кнопке FB, открывающее окно "Поделиться", обнаружил, что вызывается сервис sharer.php. Перед его вызовом формируется строка запроса, состоящая из нескольких параметров: url, title, summary (description)
и массив images[]
. Последний параметр-массив и формировал выбор картинок в диалоге.
С некоторых пор Facebook изменил набор параметров sharer.php. Собственно, все кроме ссылки на расшариваемую страницу были попросту уволены. Нынешний вид обработки события клика по кнопке должен выглядеть так:
onclick="window.open('http://www.facebook.com/sharer.php?u=' + encodeURIComponent([url веб-страницы]) + ')"'
Все остальные параметры теперь вытаскиваются из мета-тегов раздела <head></head>
html-маркапа страницы. Закомментировав пару строк в js-файле, я убрал из строки запроса все устаревшие параметры.
Также я выяснил, что Мордокнига уже пару лет как имеет свои собственные мета-теги - Facebook Open Graph. Их синтаксис:
<meta property="og:[имя тега]" content="[значение тега]" />
Снабжает sharer значениями тегов-параметров специальный бот-спайдер, называемый Facebook Crawler. Набор тегов с описанием приводится в руководстве по расшариванию для веб-мастеров в разделе Фейсбука, предназначенном для разработчиков. Помимо того, что наличие Open Graph мета помогает грамотно сформировать диалог расшаривания страницы, оно еще и повышает рейтинг сайта в Фейсбуке и положительно влияет на трафик из него. Так что стоит озаботиться их генерацией на страницах сайта. Как - будет ниже, а пока закончу тему картинок.
Навести crawler на правильную картинку можно, введя в head страницы следующий тег:
<meta property="og:image" content="[url правильной картинки]" />
Попробовал добавить его в одну из статей, которую перед этим выложил на ленте с неправильной картинкой, а затем удалил. Неправильная картинка не поменялась на правильную. Открыв код страницы на сервере, убедился, что тег там присутствует. Погуглив, нашел и устранил причину.
Оказалось, что Фейсбук сохранил настройки предыдущего расшаривания где-то в своем кэше. При последующих вызовах диалога "Поделиться" использовались те же устаревшие настройки, включая URL на неправильную картинку, сгенерированный до введения в код страницы тега og:image
. В фейсбучной терминологии это называется scrape - соскоб. (В русском варианте они обогатили Великий и Могучий словом "скрапинг".) То есть, "соскоблив" раз значения параметров-тегов, они продолжают их использовать, что целиком и полностью оправдано: экономятся время отклика и трафик. А уж с учетом количества клиентов (и спонсоров) Закерберга - так и вовсе очень резонно.
К счастью, нас снабдили инструментом-отладчиком, позволяющим сбросить старые установки. Он носит имя Отладчик объектов Open Graph | Open Graph Object Debugger и доступен по адресу https://developers.facebook.com/tools/debug/og/object. Введя линк страницы в поле ввода Введите URL | Input URL и нажав на кнопку Получить новую информацию об URL | Fetch new scrape information,..
... вы сделаете свежий "соскоб" og-тегов и тут же получите его результаты. В конце результирующей страницы - в разделе При перепосте это будет включено | When shared, this is what will be included - выводится кликабельная превьюшка диалога расшаривания. Можно прямо оттуда запостить статью на Timeline.
Ну и теперь - о главном: как генерить в коде страниц Джумла-сайта опен-графовские мета-теги.
Среди множества платных и бесплатных расширений, связывающих Joomla-сайт с социальными медиа, я выбрал плагин plg_fblinkcontentimage. Он имеет платную версию (стоящую всего 7 Евро) и бесплатную, с усеченным функционалом. Для моих текущих целей вторая подошла с лихвой. В этом варианте плагин внедряет в страницы материалов четыре og-тега: title, type
(значение - всегда article
), url
и site_name
. При наличии в статье картинок, удовлетворяющих стандартам фейсбуковского бота (минимальный размер - 200x200px, и для краулера доступны), добавляется также тег og:image
, ссылающийся на первую подходящую картинку из имеющихся в тексте статьи. Настройки в админке для бесплатного варианта почти все неактивны, достаточно просто установить плагин через Менеджер расширений и включить его в Менеджере плагинов. Теперь, обновив страницу материала в браузере и вытащив ее код, можно увидеть в разделе head искомые теги.
В платной версии доступны дополнительные функции, которые также могут быть полезны. Вот сравнительный функционал обоих вариантов:
Думаю потратиться на полную версию в ближайшем будущем. Как любитель ковыряться в кодах, мог бы с легкостью включить платные опции ручками и сам, но зачем лишать разработчиков скромного вознаграждения за их труд? Сильно не обеднею, да и время сэкономлю, оно зачастую дороже стоит.
На данный же момент я получил ровно то, к чему и стремился: Open Graph теги в статьях и возможность постить их описание в ленте Facebook с первой картинкой из самой статьи. Она, первая картинка, в 90% случаев выбиралась мною и раньше.
В заключение хочу призвать вас, уважаемый читатель, не повторять моих ошибок и реагировать на важные изменения в политике компаний, связанных с продвижением вашего ресурса, оперативно. Соцсети в наше время - важная составляющая раскрутки сайтов. Вы можете не любить их, как не люблю их я, но отмахнуться от факта, что они могут добавить сайту существенную долю трафика, невозможно.
Кстати, свои собственные мета-теги первой начала использовать вовсе не Facebook. Пример ей подал Твиттер, введя свои Twitter Cards. Их я тоже в самое ближайшее время добавлю на страницы сайта и сразу же поделюсь опытом. Ждите отчета!
Новые
-
20.07.2020, 00:53
Joomla 3: Перенаправление на ту же страницу после авторизации -
13.02.2017, 14:09
Joomla: как добавить свои языковые константы или переопределить существующие -
13.02.2017, 13:23
Joomla: Интегрируем reCAPTCHA v2 (NO CAPTCHA) в JComments -
23.06.2016, 10:48
Единая фильтрация вывода модуля mod_jcomments_latest -
13.09.2015, 13:06
Постим иллюстрированные статьи Joomla-сайта на Facebook, используя OG-теги
Популярные
-
118347
Миграция с Joomla 1.5 на Joomla 2.5. Ч.2-1. Перенос jDownloads и jComments -
87537
Joomla: Интегрируем reCAPTCHA v2 (NO CAPTCHA) в JComments -
63821
Редактирование анимированных GIF-имиджей в Photoshop CS3 -
61135
Joomla: как добавить свои языковые константы или переопределить существующие -
44831
Цифровые коды WEB (веб) цветов для сайта
Авторизация
Гитара
Гостевая колонка
Последние комментарии
-
Joomla: Интегрируем reCAPTCHA v2 (NO CAPTCHA) в JComments
- Тест 25.08.2020 11:37
-
Николай3333
05.08.2020 07:55
Неужели работает?
-
Дарья Смирнова
29.07.2020 06:02
Здравствуйте, все вроде сделала по инструкции, но точно так же никаких изменений. Разве что теперь ...
-
ТвойБро
24.03.2020 03:42
Огромное спасибо, помогло. Странно, что по дефолту в jcomments предлагает в настройках выбрать ...
-
Валерий
21.02.2020 03:25
Проверка
-
Денис
02.01.2020 21:21
УРАААА! Заработало после очистки кэша сайта! Спасибо!
-
Денис
02.01.2020 20:56
Забыл сказать, что этот вариант установился на сайт, но по-прежнему при использовании reCAPTCHA ...
-
Вованя
25.12.2019 18:31
12345
-
Вованя
25.12.2019 18:31
Проверка, просто проверяю. раз раз раз)
-
Миграция с Joomla 1.5 на Joomla 2.5. Ч.2-1. Перенос jDownloads и jComments
-
Андрей67
11.08.2020 16:54
У меня такая же картина, нет кнопки Импорт. как быть?
-
Андрей67
11.08.2020 16:54
Подробнее...