Nazyrov.ru » » Делаем кнопки соц сетей для сайта на 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. Скопируйте вот этот код

1
2
3
4
5
6
<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="/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="http://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>"><img src="/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="http://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>"><img src="/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="http://plus.google.com/share?url=<?php the_permalink(); ?>"><img src="/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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#subscribe_links {
width: 600px;
margin: 18px 0 0 50px;
}
#subscribe_links &gt; a {
margin-left: 19px;
}
#subscribe_links &gt; a:first-child {
margin-left: 0;
}
#subscribe_links &gt; a &gt; img {
width: 80px;
height: 80px;
}

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

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

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

Как вам статья?
Полная ерундаНичего интересногоТак себеХорошоОтлично (Голосов нет. Стать первым.)
Loading...Loading...

Понравилась статья? Поделись с другими, нажав на одну из кнопок.


Комментариев 30 на “Делаем кнопки соц сетей для сайта на WordPress с плагинами и без!

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

  2. Привет, Андрей, мне нужна твоя помощь почти по данной теме!!))

    У меня на верху блога есть ссылки на мои социальные сети — тви и фэйс!

    Как закрыть их от индексации??

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

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

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

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

    • Елена, вот код кнопки одноклассники:

      <a target="_blank" 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="#"nofollow">&st.comments;=<?php the_title(); ?>"><img src="ссылка на картинку кнопки"></a>

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

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

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

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

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

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

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

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

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

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

        • Да, закрыты.

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

Добавить комментарий для Иван Отменить ответ

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Иван