Приветствую, вас уважаемые читатели и гости моего блога. Сегодня я расскажу вам, как сделать и установить кнопки социальных сетей на блог, чтобы читатели делились ссылкой на статьи в соц. сетях со своими друзьями. Я расскажу вам не о простых кнопках, которые есть у всех, а помогу сделать уникальные кнопочки.
Думаю о пользе этих кнопок говорить даже нет смысла. Социальные сети, это мощный инструмент продвижения.
У меня такие кнопки вы можете видеть в конце каждой статьи:
Я расскажу вам несколько способов, а какой выбрать, решайте сами.
Кнопки социальных сетей на блог с помощью плагина
На самом деле, это не самый лучший вариант. Обычно подобные плагины весят очень много и создают приличную нагрузку. Конечно, если ваш блог легок, то это практически незаметно. Я таким способом тоже пользовался долгое время.
Выбор плагинов огромен, установка и настройка тоже стандартная. Поэтому не вижу смысла делать пошаговую инструкцию по установке.
Вот несколько плагинов с примерами подобных кнопок:
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. Скопируйте вот этот код
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 перед комментариями.
Обычно запись комментариев начинается примерно так:
<!--?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
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 > a { margin-left: 19px; } #subscribe_links > a:first-child { margin-left: 0; } #subscribe_links > a > img { width: 80px; height: 80px; } |
5. Сохраняйте, обновляйте страницу, и любуйтесь новыми кнопками социальных сетей. У меня же вот что получилось:
Если возникли какие-то вопросы, задавате в комментариях, буду рад ответить.
Loading...
Мне больше всего нравятся кнопки от share42, можно менять кнопки на свои а так же устанавливать счетчик для отслеживания количества кликов
Привет, Андрей, мне нужна твоя помощь почти по данной теме!!))
У меня на верху блога есть ссылки на мои социальные сети — тви и фэйс!
Как закрыть их от индексации??
Азик, написал на почту
От яндекса самые ТРУ кнопки
С первого дня пользуюсь услугами сервиса Pluso и очень доволен! Громадное количество кнопок соц.сетей, очень многими пользуюсь! Ни разу не было проблем с ними!
Поддерживаю Вас! Сервис этих социальных кнопок не зря занимает первое место в рейтинге liveinternet!
А мне нравятся кнопки от плюсо. У них есть прикольная фишка, указать страницу, куда будет вести ссылка. Отлично работает на страницах с получением подарка за подписку. Только надо не забыть, что ссылка должна вести на подписную страницу.
Андрей, здравствуйте. ИзображениЕ или изображениЯ? На каждую кнопку должно быть одно изображение?
Да, Елена, разумеется для каждой кнопки отдельное изображение
Можно и одно изображение, в котором сразу нужные кнопки, но код поменяется тогда.
Уже поняла. По коду сориентировалась.
Андрей, а как установить код для кнопки «Одноклассники». Я поняла, что какие то изменения должны быть в области 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, возможно вам придется поменять ширину блока и все будет работать
А у меня стоят обычные кнопочки, но без плагина. слава богу)) Я люблю то, не как у всех, но пока у меня так и стоит, а я смогу вставив твой код, изменить как-то цвет кнопочек? Люблю, когда ярко и разные цвета.) Люблю еще неон, но врядли смогу такое подсвечивание сделать.)
Плюсо мне не очень понравился, он грузит долго, а вот яндекс правда рулит:)
Стоят Плюсо на некоторых сайтах. Буду удалять, постоянно грузят какие-то левые скрипты.
Из-за этого я им и не пользуюсь
Да, Олег, я тоже планирую заменить кнопки от сервиса Pluso — мне нравится сервис UpToLike — экспериментировала с ними на другом блоге — понравилось, что можно отправлять разный анонс.
Кстати хорошие кнопки от Яндекса — Поделиться, устанавливаются легко и выглядят хорошо, я их в сайдбаре разместила.
Андрей, спасибо за статью, особенно за ту ее часть, которая без плагинов. Не подскажите, как можно в коде кнопок закрыть внешние ссылки?
Валерий, из-за плагина wp syntax код отображался неравильно. Сейчас его обновил и закрыл внешние ссылки. Можете просто скопировать код и вставить на страницу.
Андрей, спасибо. А ссылки на соцсети в Ваших статьях тоже закрыты rel="nofollow" ? Сервис mainspy.ru показывает их наличие. Если да, то получается, что nofollow на закрывает их?
Да, закрыты.
mainspy.ru показывает 2 варианта — с учетом закрытых и нет. У меня открыта только одна ссылка на профиль Google +. С учетом закрытых — 10 ссылок с главной.