Правки иконок соцсетей на Битриксе: почему админка не всегда помогает
Лид: Бывает так: заходишь в админку 1С-Битрикс, меняешь ссылки в настройках, а на сайте... ничего не происходит. Рассказываю на примере реального кейса, как найти «спрятанные» кнопки мессенджеров и привести их в порядок.
Проблема: Невидимые настройки
Ко мне пришла популярная в наши дни задача для сайта крупного хлебозавода: заменить иконки WhatsApp и Telegram на Max. Казалось бы, дело на 5 минут: зайти в контентный инфоблок и поправить пару полей.
Но не тут-то было. В админке (Контент — Служебные — Соцсети) были только VK и OK, а мессенджеры на сайте преспокойно отображались.
Где искать, если в админке пусто?
В Битриксе есть три «темных угла», где разработчики любят прятать такие вещи:
- Включаемые области (Include Areas): папка /include/ в корне.
- Компоненты с жестким кодом: когда ссылки зашиты прямо в template.php.
- Шаблон сайта (Footer/Header): «хардкод» в общих файлах.
В моем случае «виновником» оказался файл local/templates/footer.php. Разработчики просто вставили HTML-код кнопок рядом с динамическим циклом вывода соцсетей.
Решение: Делаем «чисто»
Просто вставить ссылку — мало. Чтобы блок выглядел профессионально, я применил три правила:
1. Инлайновый SVG вместо картинок Вместо того чтобы тянуть лишний файл .png или .svg, я вставил код иконки прямо в HTML. Это ускоряет загрузку и позволяет легко управлять цветом через CSS. Важно: Чтобы иконка Max не выбивалась из ряда, я привел её viewBox и width/height к общему стандарту с остальными кнопками (24x24px).
2. Безопасность (rel="noopener") Многие забывают, что target="_blank" без атрибута noopener — это дыра в безопасности. Новая вкладка получает доступ к объекту window.opener, что может быть использовано для фишинга. Добавил: rel="nofollow noopener". Теперь и SEO-вес не утекает, и пользователь в безопасности.
3. Очистка от лишнего В коде нашел «хвосты» от старых версий (img скрытые через display: none; ;( ). Я вычистил блок .social__groups, оставив только чистую разметку.
Итог
Даже такая простая задача, как замена ссылки, требует внимания к деталям.