Постим иллюстрированные статьи Joomla-сайта на Facebook, используя OG-тегиОпубликовано: 13.09.2015 13:06 Автор: Ogri Просмотров: 12166
Некоторое время назад я написал цикл статей о внедрении кнопок социальных медиа в сайт на 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-теги
Популярные
-
101687
Миграция с Joomla 1.5 на Joomla 2.5. Ч.2-1. Перенос jDownloads и jComments -
73896
Joomla: Интегрируем reCAPTCHA v2 (NO CAPTCHA) в JComments -
61619
Редактирование анимированных GIF-имиджей в Photoshop CS3 -
38278
Joomla: как добавить свои языковые константы или переопределить существующие -
34464
Единая фильтрация вывода модуля mod_jcomments_latest
Авторизация
Гитара
Гостевая колонка
Последние комментарии
-
Joomla: Интегрируем reCAPTCHA v2 (NO CAPTCHA) в JComments
-
스웨디시 09.06.2023 22:20
-
-
Как отцентрировать контент в блоке по вертикали
-
crypto casino no kyc 10.06.2023 10:28
View a invigorated broad of gaming with Crypto Gambling cassino. Find in the lead large with our ...
-
-
Кнопки социальных сетей в Joomla 2.5. Плавающая панель от Share42
-
водка казино 10.06.2023 02:55
Howdy would you mind letting me know which web host you're working with? I've loaded your blog in ...
-
-
Миграция с Joomla 1.5 на Joomla 2.5. Ч.2-1. Перенос jDownloads и jComments
-
canada drugs cialis 09.06.2023 22:30
buy cialis from europe buy cialis sweden canada drugs cialis: https://fforhimsvipp.com/ buy cialis ...
-
lordfilm 09.06.2023 21:30
lordfilm: https://wbw.lordfilmof.com/
-
-
Структура внутренних ссылок сайта на Joomla
-
Sofia Weaver 10.06.2023 05:04
We absolutely love your blog and find most of your post's to be exactly I'm looking for. Do you offer ...
-
-
Цифровые коды WEB (веб) цветов для сайта
-
Gnometopia.Org 10.06.2023 04:04
I'd like to find out more? I'd care to find out some additional information. Here is my web blog ...
-
cheapest 09.06.2023 23:46
Howdy exceptional website! Does running a blog like this require a large amount of work? I have ...
-
스웨디시 09.06.2023 23:00
The tool is gently (or vigorously) scraped and rubbed over the skin. Feel free to visit my site : ...
-
滷味 09.06.2023 22:35
With that in thoughts, you are absolutely entitled to want an outfit that lives up to the special ...
-
Подробнее...