Делаем кнопки соц сетей для сайта на WordPress с плагинами и без

Приветствую, вас уважаемые читатели и гости моего блога. Сегодня я расскажу вам, как сделать и установить кнопки социальных сетей на блог, чтобы читатели делились ссылкой на статьи в соц. сетях со своими друзьями. Я расскажу вам не о простых кнопках, которые есть у всех, а помогу сделать уникальные кнопочки.

Думаю о пользе этих кнопок говорить даже нет смысла. Социальные сети, это мощный инструмент продвижения.

У меня такие кнопки вы можете видеть в конце каждой статьи:

Я расскажу вам несколько способов, а какой выбрать, решайте сами.

Кнопки социальных сетей на блог с помощью плагина

На самом деле, это не самый лучший вариант. Обычно подобные плагины весят очень много и создают приличную нагрузку. Конечно, если ваш блог легок, то это практически незаметно. Я таким способом тоже пользовался долгое время.

Выбор плагинов огромен, установка и настройка тоже стандартная. Поэтому не вижу смысла делать пошаговую инструкцию по установке.

Вот несколько плагинов с примерами подобных кнопок:

Juiz Social Post Sharer – простой русскоязычный плагин с широким выбором всевозможных настроек. Доступны самые популярные соц. сети мира. Можно настроить отображение кнопок перед и после статей, а так же вид кнопок.

Social Share Buttons for WordPress – русскоязычный плагин, который поддерживает почти все русскоязычные кнопки. Установка и настройка стандартная. Вот как выглядят такие кнопки:

Они закрыты в nofollow, поэтому на скринщоте обведены красной рамкой, это сработало расширение у меня в браузере.

Кнопки социальных сетей на блог с помощью сторонних сервисов

Этот способ используют многие. Принцип здесь прост, сервис генерирует код, который вы затем можете вставить себе на блог в любое удобное место. Но у такого способа есть один существенный минус, большинство подобных кодов содержат открытую ссылку на сам сервис или обработка кода идет через этот сервис, что заставляет браузер делать 2 HTTP запроса , что увеличивает нагрузку на блог.

Кроме того новичкам сложно закрывать внешние ссылки в таком коде. И, тем не менее, этот способ используют многие.

Сервис uptolike.ru. Мне он очень понравился, код чистый. Но конечно, используется дополнительный HTTP запрос на сам сервис.

Вам нужно просто, ввести свой e-mail и доменное имя блога, а затем скопировать сгенерированный код и вставить в шаблон блога. Вот как такие кнопки выглядели у меня:

Сервис pluso.ru – отличный генератор кнопок соц. сетей. Многие успешно им пользуются. Принцип работы кнопок как и в предыдущем примере. Вам нужно скопировать предоставляемы код и вставить в шаблон страницы, на WordPress это файл single.php

Вот таким образом выглядят кнопки сгенерируемые этим сервисом:

Кнопки социальных сетей на блог при помощи кода

Это мой самый любимый способ. Именно им я пользуюсь. Преимущество этого способа:

• Кнопки внедряются непосредственно в шаблон блога;
• Нет открытых ссылок на сторонние сайты;
• Нет дополнительной нагрузки на блог из-за сомнительных скриптов сторонних сервисов;
• Вы можете сделать кнопки уникальными, непохожими ни на какие другие;

Сейчас я вам подробно расскажу как можно это реализовать на блоге.

1. Нарисуйте или скачайте уникальные кнопки социальных сетей. Желательно в формате png.

2. Закачайте изображения кнопок в корневую директорию блога.

3. Скопируйте вот этот код

и вставьте в шаблон блога в файл single.php перед комментариями.

Обычно запись комментариев начинается примерно так:

 comment_status) && ('open' == $post->ping_status)) {  // Both Comments and Pings are open ?>;  Вы можете оставить комментарий, или  ссылку на Ваш сайт.

Только не забудьте вместо слов «картинка» указать ссылки на свои соответствующие изображения.

4. Скопируйте код стилей и вставьте его в конец файла style.css

#subscribe_links {  width: 600px;  margin: 18px 0 0 50px;  }  #subscribe_links > a {  margin-left: 19px;  }  #subscribe_links > a:first-child {  margin-left: 0;  }  #subscribe_links > a > img {  width: 80px;  height: 80px;  }

5. Сохраняйте, обновляйте страницу, и любуйтесь новыми кнопками социальных сетей. У меня же вот что получилось:

Если возникли какие-то вопросы, задавайте в комментариях, буду рад ответить.