Постим иллюстрированные статьи Joomla-сайта на Facebook, используя OG-тегиОпубликовано: 13.09.2015 13:06 Автор: Ogri Просмотров: 10222
Некоторое время назад я написал цикл статей о внедрении кнопок социальных медиа в сайт на 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-теги
Популярные
-
60530
Редактирование анимированных GIF-имиджей в Photoshop CS3 -
47654
Миграция с Joomla 1.5 на Joomla 2.5. Ч.2-1. Перенос jDownloads и jComments -
44933
Joomla: Интегрируем reCAPTCHA v2 (NO CAPTCHA) в JComments -
33032
Единая фильтрация вывода модуля mod_jcomments_latest -
31622
Joomla: как добавить свои языковые константы или переопределить существующие
Авторизация
Гитара
Гостевая колонка
Последние комментарии
-
Joomla: Интегрируем reCAPTCHA v2 (NO CAPTCHA) в JComments
-
Daewoochem.com 04.02.2023 18:45
%% Also visit my web site ... semi truck accident claim (Daewoochem.com ...
-
Car Key Cut Henlow 04.02.2023 18:44
%% My web page; Car Key Cut Henlow ...
-
misted 04.02.2023 18:42
%% Here is my web site - misted ...
-
-
Joomla: Сливаем два сайта в один при помощи компонента J2XML
-
www.heejinpl.com 04.02.2023 18:45
%% My web site; door specialists croydon (www.heejinpl.com ...
-
-
Joomla: как добавить свои языковые константы или переопределить существующие
-
48.1stn.kr 04.02.2023 18:44
%% Review my homepage - leader Avon - 48.1stn.kr ...
-
-
Миграция с Joomla 1.5 на Joomla 2.5. Ч.2-1. Перенос jDownloads и jComments
-
avon how to join 04.02.2023 18:44
%% My page avon how to join: http://www.diyyourcar.co.kr/bbs/board.php?bo_table=free&wr_id=24386
-
Bonnie 04.02.2023 18:44
%% my web site electrical repair service (Bonnie ...
-
Www.Heejinpl.Com 04.02.2023 18:43
%% Feel free to surf to my website: Workers Compensation Claim - Www.Heejinpl.Com ...
-
-
Структура внутренних ссылок сайта на Joomla
-
Lamont 04.02.2023 18:42
%% Also visit my webpage - lottery singapore - Lamont ...
-
-
Цифровые коды WEB (веб) цветов для сайта
-
Hwagyesa.org 04.02.2023 18:45
%% Feel free to surf to my website :: Tech (Hwagyesa.org ...
-
Комментарии
site, thanks aemin of this weeb page.