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

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

кнопки соц сетей для сайта

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

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

мои кнопки

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

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

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

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

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

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

Juiz Social

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

Social Share

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

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

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

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

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

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

uptolike

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

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

pluso

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

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

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

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

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

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

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

<div id="subscribe_links">   <a target="_blank" rel="nofollow" onclick="popupWin = window.open(this.href, 'vkontakte', 'width=550,height=400,top='+((screen.height-400)/2)+',left='+((screen.width-550)/2)+',location=no'); popupWin.focus(); return false;" href="http://vk.com/share.php?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>&description=<?php the_excerpt(); ?>&image=<?php echo $image_url; ?>&noparse=true"><img src="http://nazyrov.ru/wp-content/themes/media-maven/vk.png"></a>   <a target="_blank" rel="nofollow" onclick="popupWin = window.open(this.href, 'vkontakte', 'width=550,height=400,top='+((screen.height-400)/2)+',left='+((screen.width-550)/2)+',location=no'); popupWin.focus(); return false;" href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>"><img src="http://nazyrov.ru/wp-content/themes/media-maven/facebook.png"></a>   <a target="_blank" rel="nofollow" onclick="popupWin = window.open(this.href, 'vkontakte', 'width=550,height=400,top='+((screen.height-400)/2)+',left='+((screen.width-550)/2)+',location=no'); popupWin.focus(); return false;" rel="nofollow" href="https://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>"><img src="http://nazyrov.ru/wp-content/themes/media-maven/twitter_but_rss.png"></a>   <a target="_blank" rel="nofollow" onclick="popupWin = window.open(this.href, 'vkontakte', 'width=550,height=400,top='+((screen.height-400)/2)+',left='+((screen.width-550)/2)+',location=no'); popupWin.focus(); return false;" href="https://plus.google.com/share?url=<?php the_permalink(); ?>"><img src="http://nazyrov.ru/wp-content/themes/media-maven/googleplus.png"></a>   </div>

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

single

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

<!--?php if (('open' == $post---> comment_status) && ('open' == $post->ping_status)) {  // Both Comments and Pings are open ?>;  Вы можете <a href="#respond">оставить комментарий</a>, или <a href="<?php trackback_url(); ?>" rel="trackback"> ссылку</a> на Ваш сайт.

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

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

код в 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. Сохраняйте, обновляйте страницу, и любуйтесь новыми кнопками социальных сетей. У меня же вот что получилось:

получились кнопки соц сетей

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

Рейтинг автора
Автор статьи
Назыров Андрей
Основатель блога и его главный редактор.
Написано статей
105
Поделись информацией:
Помогла статья? Оцените её
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
Оценок: 1
Загрузка...

Подписка на рассылку

Комментарии
  1. Александр

    Мне больше всего нравятся кнопки от share42, можно менять кнопки на свои а так же устанавливать счетчик для отслеживания количества кликов

  2. Азик

    Привет, Андрей, мне нужна твоя помощь почти по данной теме!!))
    У меня на верху блога есть ссылки на мои социальные сети — тви и фэйс!
    Как закрыть их от индексации??

    • Андрей Назыров

      Азик, написал на почту

  3. seoonly.ru

    От яндекса самые ТРУ кнопки

  4. Игорь Черноморец

    С первого дня пользуюсь услугами сервиса Pluso и очень доволен! Громадное количество кнопок соц.сетей, очень многими пользуюсь! Ни разу не было проблем с ними!

    • Иван

      Поддерживаю Вас! Сервис этих социальных кнопок не зря занимает первое место в рейтинге liveinternet!

  5. Руслан Герань

    А мне нравятся кнопки от плюсо. У них есть прикольная фишка, указать страницу, куда будет вести ссылка. Отлично работает на страницах с получением подарка за подписку. Только надо не забыть, что ссылка должна вести на подписную страницу.

  6. Елена

    Андрей, здравствуйте. ИзображениЕ или изображениЯ? На каждую кнопку должно быть одно изображение?

    • Андрей Назыров

      Да, Елена, разумеется для каждой кнопки отдельное изображение

      • Денис Иванов

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

  7. Елена

    Уже поняла. По коду сориентировалась.

  8. Елена

    Андрей, а как установить код для кнопки «Одноклассники». Я поняла, что какие то изменения должны быть в области share?url= , но какие? Мне эта кнопочка очень нужна.

    • Андрей Назыров

      Елена, вот код кнопки одноклассники:
      &st.comments=< ?php the_title(); ?>">

      • Елена

        Огромное вам спасибо, Андрей!

      • Андрей Назыров

        Пожалуйста!

  9. Елена

    Только «увы». Страница с записями при открытии выдает синтаксическую ошибку(((

    • Андрей Назыров

      Елена, можете скрин ошибки выслать?

      • Андрей Назыров

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

      • Елена

        Скрин не сделала, и пока поставила кнопки от плюсо, но ошибку скопировала — Ошибка синтаксического анализа : синтаксическая ошибка, неожиданный ‘?’ в /var/www/silena/data/www/nashi-де-ti.net/wp-content/themes/magicland/single.php на линии 83

        И еще, при установке кнопок без плагина у меня сайдбар смещался и оказывался внизу страницы, после записи.

      • Андрей Назыров

        Скорее всего дело в CSS, возможно вам придется поменять ширину блока и все будет работать

  10. Диана

    А у меня стоят обычные кнопочки, но без плагина. слава богу)) Я люблю то, не как у всех, но пока у меня так и стоит, а я смогу вставив твой код, изменить как-то цвет кнопочек? Люблю, когда ярко и разные цвета.) Люблю еще неон, но врядли смогу такое подсвечивание сделать.)

  11. Родион

    Плюсо мне не очень понравился, он грузит долго, а вот яндекс правда рулит:)

  12. Олег

    Стоят Плюсо на некоторых сайтах. Буду удалять, постоянно грузят какие-то левые скрипты.

    • Андрей Назыров

      Из-за этого я им и не пользуюсь 🙂

    • Рашида

      Да, Олег, я тоже планирую заменить кнопки от сервиса Pluso — мне нравится сервис UpToLike — экспериментировала с ними на другом блоге — понравилось, что можно отправлять разный анонс.

  13. Рашида

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

  14. Валерий

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

    • Андрей Назыров

      Валерий, из-за плагина wp syntax код отображался неравильно. Сейчас его обновил и закрыл внешние ссылки. Можете просто скопировать код и вставить на страницу.

      • Валерий

        Андрей, спасибо. А ссылки на соцсети в Ваших статьях тоже закрыты rel=»nofollow» ? Сервис mainspy.ru показывает их наличие. Если да, то получается, что nofollow на закрывает их?

      • Андрей Назыров

        Да, закрыты.
        mainspy.ru показывает 2 варианта — с учетом закрытых и нет. У меня открыта только одна ссылка на профиль Google +. С учетом закрытых — 10 ссылок с главной.

  15. NI4KA

    У меня под каждой статьей есть кнопки. Думаю, нужно ли на главной еще делать?

    • Андрей Назыров

      Ну, это вам решать 🙂

  16. Евгений

    У меня в шаблоне уже встроены кнопки соц.сетей для каждой статьи, но думаю, что можно и поменять их код для разнообразия и воспользоваться вашим. Единственное, что опять придется копаться в style.css , а он у меня сжат.

    • Андрей Назыров

      Если встроены, то нет смысла менять.

  17. Елена

    Спасибо за подробное объяснение процесса, кнопочки мной успешно установлены и не возникло никаких сложностей, хотя я не специалист в этой области.

    • Андрей Назыров

      Пожалуйста, Елена.

  18. Денис Скрипник

    Я использую кнопки от share42.com, потому что они красивы, скрипт размещается на сайте, а не на стороннем сервере, не замедляет загрузку страницы, выводит счётчики возле ссылок социальных сетей.
    Раньше устанавливал его сам, но недавно мой хороший знакомый создал плагин для Maxsite CMS — теперь напрягаться с редактированием файлов шаблона вообще не придётся.

  19. Виктор

    Спасибо за пост, помог. А как еще вставить на мой мир? тоже бывают люди оттуда)

    • Андрей Назыров

      Через API. На этой странице http://api.mail.ru/sites/plugins/share/ есть конструктор такой кнопки. Полученный код можно подредактировать под себя.

  20. Александр

    Андрей долго к этим кнопочкам я подбирался.=))) Но вот остановил свой выбор на плагине соц кнопок UpToLike Social Share Buttons оказалось все так просто и понятно и самое главное не нужно заморачиваться с кодами куда и в какое место ставить=))

    В плагине все просто выбрал где и какие кнопки тебе надо поставил галочки и вуаля получай=)) А и еще там есть возможность подключить статистику по соц сетям, прикольная штука=)) Сразу видно есть переходы, просмотры и так далее..

    Можете заглянуть на мой блог и посмотреть на эти кнопочки=))

    • Андрей Назыров

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

  21. Алексей

    Здравствуйте Андрей
    Создал кнопки как но vk не работает
    открывается окно в заголовке 400 Bad Request — Yandex и в нем http://vk.com/err400.html
    подскажите как исправит спасибо заранее

    • Андрей Назыров

      Здравствуйте, Алексей. Только что проверил код, он рабочий. Даже не знаю почему он у вас не работает.

Добавить комментарий