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

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

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

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

Об авторе: Андрей Назыров

Приветствую Вас на своем блоге! Здесь Вы найдете всю необходимую информацию по созданию своего блога (сайта), его SEO оптимизации и последующего заработка.

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

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

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

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

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

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

      Ответить
  5. Руслан Герань:

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

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

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

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

    Ответить
  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. У меня под каждой статьей есть кнопки. Думаю, нужно ли на главной еще делать?

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

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

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

    Ответить
  19. Виктор:

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

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

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

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

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

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

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

      Ответить

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *