Как добавить на Blogger кнопки шаринга Facebook и Twitter

Зачем добавлять кнопки шаринга

Простые публикации в блоге уже не достаточно — важно, чтобы контент легко делился в соцсетях. Стандартные кнопки Blogger включить просто, но они ограничены: нельзя выбрать конкретные сети и часто отсутствуют привычные Facebook “Like” и Twitter “Tweet”.

Важно: если вам нужно простое решение без внешнего кода — используйте встроенные кнопки Blogger. Для гибкости и аналитики выбирайте сервис вроде AddThis.

Короткий обзор вариантов

• Встроенные кнопки Blogger — быстро, минимум настроек.
• Официальные виджеты Facebook/Twitter — прямые функции, но требуют интеграции от каждой сети.
• Сервисы агрегации (AddThis и аналоги) — больше настроек, единый код, дополнительные сети и аналитика.

Включение встроенных кнопок Blogger

1. Откройте панель управления Blogger.
2. Перейдите в «Design» → под блоком “Blog Posts” нажмите “Edit”.
3. В появившемся окне включите опцию “Show Share Buttons” и нажмите “Save” в попапе, затем “Save” на главной странице дизайна.

После этого рядом с заметкой появятся стандартные кнопки шаринга.

Почему я рекомендую AddThis

AddThis прост в установке, гибок в настройке и поддерживает множество сервисов. Это удобно, если вы хотите контролировать точный набор кнопок, внешний вид и поведение при шаринге (например, указывать ваш Twitter-аккаунт).

Регистрация и базовая настройка AddThis

1. Зарегистрируйтесь на AddThis и войдите в аккаунт.
2. Нажмите “Get AddThis” (Получить AddThis) и выберите шаблон.

3. Если хотите тонкую настройку — выберите “Customize”.

4. В поле “Platform” выберите “Website” вместо “Blogger”, чтобы получить полный HTML-код, который можно править.

5. Нажмите “Grab It” и скопируйте код.

Вставка кода в шаблон Blogger

1. В панели Blogger перейдите в «Design» → «Edit HTML».
2. Нажмите “Expand Widget Templates”.

3. Найдите место, где хотите отобразить кнопки. Я предпочитаю под текстом записи — поэтому вставляю код AddThis сразу после основного блока статьи.

4. Вставьте код и сохраните шаблон (Save Template). Просмотрите блог, чтобы убедиться, что кнопки отображаются корректно.

Как настроить поведение и данные, которые передаёт AddThis

В HTML-коде AddThis есть атрибуты, которые отвечают за заголовок и URL при шаринге. Пример общего блока с ключевыми атрибутами:

Объяснение в одну строку: expr:addthis:title подставляет заголовок поста, expr:addthis:url — URL поста.

Пример: как будет выглядеть твит

Если вы нажмёте кнопку Tweet, Twitter автоматически подставит заголовок поста и ссылку. Пример форматирования твита:

Название статьи http://example.com/ ссылка via @ваш_ник

Где сначала отображается заголовок, затем URL, затем ваш ник (если вы его указали в tw:via).

Добавление конкретных кнопок

Список поддерживаемых сервисов доступен в документации AddThis. Чтобы добавить, например, кнопку Tweet и Like, используйте соответствующие элементы:

Здесь tw:via указывает, от чьего имени будет оформлен твит (ваш аккаунт вместо @AddThis).

Мой готовый код (пример)

Ниже — скомплексированный пример кода, который я использую. Настройте классы и атрибуты под свои нужды:

Частые ошибки и как их избегать

• Не вставляйте код в неправильное место шаблона — кнопки могут не отображаться.
• Если используете expr:addthis:… убедитесь, что шаблон Blogger поддерживает такие выражения; тестируйте на превью.
• Помните о политике приватности: добавление внешних виджетов может отправлять данные в сторонние сервисы.

Важно: перед массовой установкой виджетов проверьте, как они влияют на скорость загрузки сайта.

Короткие методологии и чек-листы

Мини-SOP: установка AddThis в 6 шагов

1. Зарегистрироваться в AddThis и выбрать стиль.
2. Скопировать код для “Website”.
3. Открыть Blogger → Design → Edit HTML → Expand Widget Templates.
4. Найти точку вставки (после контента записи) и вставить код.
5. Указать expr:addthis:title и expr:addthis:url для корректных метаданных.
6. Сохранить шаблон и протестировать на нескольких постах.

Ролевые чек-листы

• Автор контента: проверить отображение заголовка и ссылки при шаринге.
• Администратор блога: протестировать кроссбраузерность и мобильный вид.
• Разработчик: оптимизировать загрузку скриптов (асинхронно) и кешировать статические части.

Критерии приёмки

• Кнопки отображаются в целевых записях.
• При нажатии формируется корректный заголовок и ссылка.
• Tweet содержит ваш tw:via, Facebook Like работает.

Когда это не подойдёт (контрпримеры)

• Если ваша политика конфиденциальности запрещает сторонние скрипты — используйте серверные решения или официальный код каждой соцсети с учётом соглашений.
• Если важна максимальная скорость — рассмотрите лёгкие кастомные кнопки без внешних библиотек.

Быстрый план отката (rollback)

1. Откатить изменения шаблона через резервную копию (Blogger автоматически сохраняет резерв).
2. Удалить скрипт AddThis из шаблона.
3. Очистить кеш CDN (если есть) и проверить отображение.

Короткий словарь

• AddThis: сервис для создания и управления кнопками шаринга.
• expr:addthis:title / expr:addthis:url: шаблонные атрибуты для подстановки заголовка и URL поста.

Итог

AddThis — удобный способ добавить гибкие кнопки шаринга в Blogger и получить доступ к большему количеству сетей и настройкам. Для простых сайтов хватит встроенных кнопок, для профессионального продвижения и аналитики лучше использовать внешние сервисы и настраивать параметры (tw:via, title, url).

Основные действия: регистрируйтесь в AddThis → возьмите код для Website → вставьте в шаблон Blogger после контента → настройте атрибуты и проверьте.

Дополнительно: протестируйте на настольных и мобильных устройствах и убедитесь, что внешние скрипты не нарушают правила конфиденциальности вашего проекта.