Правки иконок соцсетей на Битриксе: почему админка не всегда помогает

Правки иконок соцсетей на Битриксе: почему админка не всегда помогает

Лид: Бывает так: заходишь в админку 1С-Битрикс, меняешь ссылки в настройках, а на сайте... ничего не происходит. Рассказываю на примере реального кейса, как найти «спрятанные» кнопки мессенджеров и привести их в порядок.

Проблема: Невидимые настройки

Ко мне пришла популярная в наши дни задача для сайта крупного хлебозавода: заменить иконки WhatsApp и Telegram на Max. Казалось бы, дело на 5 минут: зайти в контентный инфоблок и поправить пару полей.

Но не тут-то было. В админке (Контент — Служебные — Соцсети) были только VK и OK, а мессенджеры на сайте преспокойно отображались.

Где искать, если в админке пусто?

В Битриксе есть три «темных угла», где разработчики любят прятать такие вещи:

  1. Включаемые области (Include Areas): папка /include/ в корне.
  2. Компоненты с жестким кодом: когда ссылки зашиты прямо в template.php.
  3. Шаблон сайта (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, оставив только чистую разметку.

Итог

Даже такая простая задача, как замена ссылки, требует внимания к деталям.

2 комментария