Привет, Друзья! Сегодня расскажу Вам о том, что такое кнопки социальных сетей для сайта, и как разместить кнопки на сайт (на WordPress) с помощью различных сервисов (Share42, Pluso, Яндекса), и с помощью нескольких плагинов. Для чего нужны кнопки социальных сетей на сайт, думаю, объяснять не стоит? Все итак прекрасно понимают, что кнопки предназначены для того, чтобы читатели могли одним нажатием поделиться интересной статьей со своими друзьями в различных социальных сетях: одноклассники, вконтакте;, твиттер, фэйсбук;, гугл плюс и др.., а это дополнительный трафик на Ваш сайт (при условии что статья интересная), да и ко всему прочему, с помощью кнопок социальных сетей можно быстро пропихнуть свежую статью в индекс поисковиков (особенно полезен в этом случаи Twitter).
Содержание статьи:
Т.е. можно с уверенностью сказать, что кнопки социальных сетей для сайта — это SMO в чистом виде! SMO (Social Media Optimization) — продвижение сайта в социальных сетях. Подробно останавливаться и заморачиваться на этих понятиях сейчас не будем (нас это в скором будущем ждет), а пока нам нужно просто-напросто разместить у себя на блоге самые популярные кнопки соцсетей для нашего удобства, для удобства наших посетителей, ну и для того, чтобы быстренько заявить о свежей статье!
Кнопки социальных сетей для сайта
Итак, как уже заикнулся в начале статьи, существует несколько вариантов размещение кнопок соц сетей на сайт:
- Плагины для кнопок социальных сетей.
- Практически каждая социальная сеть предоставляет свою кнопку по отдельности. Как Вы уже догадываетесь, за каждой кнопкой идти в свою соц сеть а потом размещать код кнопки на сайте, подстраивать стили, выравнивать — это долго и нудно…(ах мы лентяи), хотя, признаться честно, размещать кнопки по отдельности имеет смысл и в этом присутствует множество плюсов! Но не сегодня… потом… как нибудь расскажу
- Сервисы кнопок социальных сетей. Вот здесь, по-моему, все предельно просто — пришел на сервис, выбрал нужные кнопки, сервис сгенерировал скрипт, вставил скрипт на сайт — Все!
В общем, сегодня будем вставлять на сайт соц кнопки от Share42, Pluso кнопки «Поделиться от Яндекса»
Как разместить кнопки социальных сетей Share42 на WordPress
Что такое Share42.com?
Это бесплатный сервис, генерирующий скрипт, который позволяет посетителям вашего сайта публиковать ссылки на ваши статьи в социальные медиа (закладки, социальные сети).
Ну, поехали… Для начала нам надо бы попасть на Share42.com – http://share42.com/ru (скопируйте ссылку и вставьте в адресную строку браузера) — попадаем на главную страницу сервиса социальных кнопок… и что мы видим
А видим мы все, что только душа пожелает:
- Три разных варианта размера соц. кнопок (32*32, 24*24, 16*16)
- Красивые иконки — мы видим много красивых иконок (дизайну позавидовал бы сам Стив Джобс). 45 кнопок которые могут работать не только с социальными сетями, но и с социальными закладками, блог-платформами. Так же есть кнопки подписки по электронной почте, RSS; есть кнопка для распечатки материала и даже кнопка “наверх”!
Короче первое впечатление меня впечатлило! Идем дальше!
Для того, чтобы выбрать нужные кнопки на сайт, необходимо просто по ним кликнуть мышкой (если Вам на сайте нужны все иконки, то сверху есть кнопочка “Выбрать/Снять все” – ну думаю, что все кнопки на сайте не к чему…), значит при клике по иконке, она затемняется и можно выбирать следующую, при повторном нажатии, выделение снимается. Внимание, хочу заметить, что иконки можно перетаскивать мышкой и менять порядок их расположения как Вам вздумается!
1. Выбор иконок и размера кнопок. Итак, например, я выбрал 4 самые популярные социальные сети (Twitter, Google Plus, Facebook и в Контакте) размером 24*24, перетянул их в начало и расположил их по своему вкусу (еще раз повторяю, Вы можете экспериментировать с кнопками как угодно!)
2. Выбор опций. После того, как выбрали кнопки и размер, спускаемся ко второму блоку с настройками:
- Тип панели. Горизонтальная – обычно кнопки соцсетей располагают сразу после статьи горизонтально в ряд, например:
; Вертикальная “плавающая” – можете наблюдать у меня на сайте. - (Относится только к вертикальному варианту) Если выбрали большое количество иконок, то для того, чтобы блок с кнопками не был слишком длинным, вы можете ограничить вывод кнопок в блоке на “N” число, а остальные будут показываться при нажатии на небольшую стрелочку. Пример можете наблюдать как раз на сайте Share42.com
- Здесь ставите ту кодировку, на которой работает Ваш сайт
- Язык подсказок… думаю без вопросов)
- Добавить иконку сайта Share42.com к выбранным Вами кнопкам, решайте сами. Это своего рода ссылка на сайт Share42.com
- Если Выбрали кнопку RSS подписки, то здесь должны прописать адрес своей rss ленты
- jQuery – советую нифига не трогать, тогда точно должно работать! Честно, не знаю для чего и как это работает.
3. Предпросмотр и/или скачиваем скрипт. Скачивать пока ничего не будем, просто обязательно посмотрите, как это будет выглядеть примерно на сайте. Тут пока вроде все. Идем к следующему шагу.
4. Установите скрипт на своем сайте. Здесь нужно прописать адрес Вашего сайта и указать тип сайта:
После того как указали адрес сайта и тип сайта, код, расположенный ниже приобрел следующий вид:
Видите? В коде уже прописана ссылка на Ваш сайт (то есть сейчас на мой, но когда делать будете Вы… будет на Ваш) и циферки 150 и 20, но о них чуть ниже.
Теперь возвращаемся в пункт назначения 3 и жмем на кнопку “Скачать готовый скрипт”
Скачиваете архив к себе на компьютер, распаковываете и папку “share42” по ftp закачиваете в корень своего сайта (в /public_html) Закачивать можно с помощью программы FileZilla или с помощью всем известного файлового менеджера Total Commander и ftp
Вот теперь настал момент самого интересного – вставка кода… (когда я раньше не понимал как и куда вставлять скрипты, я старался избегать подобных штучек, а пытался найти какой-нибудь плагин), но Вам я в очередной раз советую найти время и изучить несколько бесплатных коротких видео уроков по css и html, эти уроки реально облегчают работу в блогосфере, поверьте мне!
Итак, значит я выбрал кнопки социальных сетей плавающая панель, скачал и закинул папку со скриптом “share42” в корень блога, теперь надо чтобы этот скрипт заработал, а для этого нам и нужно код, предоставленный сервисом, вставить в то место на блоге, где будет панелька.
Для этого нам нужно блокнотом notepad++ открыть на редактирование файл single.php который находится в папке с Вашим WordPress шаблоном по адресу /wp-content/themes/название_темы, и найти в самом верху (напоминаю, у нас вертикальная плавающая панель) строчку похожую на эту <?php while (have_posts()) : the_post(); ?> и вставить сразу после нее три строчки скрипта
Затем не забываем сохранить изменения и обновить файл на хостинге.
Вот сейчас нужно (конечно если нужно) настроить позиционирование. Т.е. если панель расположена слишком высоко от контента, или наоборот слишком низко, вот нам и помогут цифры 150 и 20
Даже в принципе 20 мы не будем трогать, а поиграемся только со 150. Тут уже сами, методом тыка изменяйте, смотрите как изменилось, пока не найдете оптимальное значение (у меня подошло значение 400) Кстати, если блок не правильно расположен относительно право-лево, пока не обращайте внимание, это в css меняется, рассмотрим ниже)
Теперь открывает на редактирование файл со стилями style.css (находится в директории /wp-content/themes/название_темы), и в самый конец файла вставляете два css кода со стилями. Небольшая оговорочка: второй код со стилями для оформления можно вставлять, можно не использовать вообще(или менять как угодно), но первый css код вставить нужно обязательно, т.к. в нем указано позиционирование панели
margin-left:-70px; – с этим значением может быть придется поиграться для того, чтобы настроить правильное смещение панели право-лево относительно контента (у меня, например, подошел вариант с –35px, у вас может быть по разному, так что имейте это в виду). Ну а как уже говорил чуть выше, второй css код отвечает чисто за оформление, так что тут только эксперимент на Ваш вкус))
Итак, поигрались со значениями, и на этом все – кнопки социальных сетей Share42 для WordPress теперь работают и приносят трафик на Ваш блог!
Сегодня в статье мы рассмотрели более сложный вариант – плавающая панель, а горизонтально расположить кнопки совсем просто: настраивать ничего бы не пришлось, хотя шаги все те же, только код вставляем в файл single.php в конец статьи.
Ну вот и все, надеюсь понятно объяснил для чего нужны кнопки социальных сетей для сайта? Вы теперь с легкостью разместите у себя любой вариант кнопок Share42!
Кнопки социальных сетей от сервиса Pluso
Разместить на сайте кнопки от Плюсо на порядок проще чем от Share42, но, как известно, на вкус и цвет товарищей нет, поэтому выбирайте те кнопки, которые нравятся именно вам. Итак, идем на сервис Плюсо — http://share.pluso.ru/
- Выбираем стиль кнопок;
- Выбираем соц сети (перетаскиваем прям мышкой. Можно менять расположение);
- Предпросмотр в реальном времени;
- Настройки внешнего вида;
- Готовый код для вставки на сайт
Все!
Кнопки социальных сетей от Яндекс (поделиться)
Разместить на сайте социальные кнопки от Яндекс (поделиться Яндекс) еще проще!
Идите сюда — http://api.yandex.ru/share/
- Выбираете нужные социальные сети;
- Указываете внешний вид блока;
- Копируете код;
- Вставляете в файл шаблона.
Подробнее о кнопках от Яндекса
Новые кнопки социальных сетей с счетчиком
Хотите вот такие кнопочки?
Т.е. с счетчиком? Посмотрите какие красивые 😉 Как такие сделать? Да очень-очень просто!!!
Чтобы получить инструкцию, кликни по одной из кнопок соц сетей и дождитесь перезагрузки страницы:
[sociallocker]
Эти кнопки предоставляет Яндекс. Кнопки выводятся двумя небольшими кодами:
1 Код. Нужно вставить в файл header.php перед закрывающим тегом </head>
<script type="text/javascript" src="//yandex.st/share/cnt.share.js"></script>
2 Код. Нужно вставить в то место, где хотите видеть кнопки.
</pre> <div data-yasharelink="" data-yasharetitle="" data-yasharedescription="" data-yashareimage="" data-yasharequickservices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,gplus" data-yasharetheme="counter" data-yasharetype="small"></div> <pre>
Атрибут data-yashareType=»small» где small — маленькие кнопки; big — большие (как у меня)
[/sociallocker]
Если кликнули по кнопкам а страница не перегрузилась, то обновите ее в ручную!
Плагины для кнопок социальных сетей
- Social Profiles Widget
- Social Share Buttons for WordPress
- TweetMeme Button
Для тех, кто не умеет или боится лезть в файлы шаблона, обратитесь на почту я постараюсь помочь с размещением кнопок!
Видео просто жесть! Реально люди в рубашках рождаются!
PS Ну и хочу от души, Друзья, попросить Вас покликать по моим кнопкам социальных сетей
PPS Загадка: Как выпить из бутылки шампанского глоток шампанского не открывая и не разбивая бутылку?
[sociallocker]Перевернуть бутылку налить в углубление донышка шампанского из другой бутылки и выпить ;)[/sociallocker]
Все, пока-пока!!!
Статья мануал без лишней воды: Как повысить посещаемость сайта с 0 до 800
А у меня стоит старый добрый вордпрессовский плагин, и опка только он спасает от «наползания» заголовка на сам пост))) никак не могу избавится от это проблемы…(
а не подскажите, как установить такие кнопочки на главной?
Если хотите в сайдбаре, то код прописываете в файл sidebar.php, или можно просто в файл index.php
Ага, спасибо, я попробую!
Согласен с Настей нужны только самые нужные особенно Твиттер! У Вас 4 и они самые эффективные остальные только место забивать и раздражать посетителя!
Твитнула, квикнула… Нужно с этими кнопками в спокойном режиме разобраться.
Да там не сложно… это я наверно мудрено описал =)
Валера,у тебя же в конце статьи эти кнопки есть.Зачем ещё и сбоку?
Снизу наверно уберу) не знаю еще. Да и путь плавают, не мешают ведь? Снизу видишь, четыре кнопки — 4 ссылки, а это все в одной и ссылка не учитывается!
Вот только подумала поставить как у тебя сбоку, а внизу сделать от каждого сервиса по одной.. И докрутила до этого коммента — ведь и вправду куча лишних ссылок..
Надо тоже подумать, что с ними делать.. А то у меня там — тихий ужас… =-O
Как 4 кнопки-4 ссылки? У меня стоит плагин для этих кнопок,но никаких внешних ссылок от негт не идёт,а у тебя 4 внешние ссылки? А от этого скрипта-Шаре42 будет внешняя ссылка?
От скрипта нет. А под статьей у меня каждая кнопка по отдельности (это не плагин)
Про скрипт понял.Так эти 4 внизу-от них есть внешние ссылки?
Щас буду пробовать устанавливать скрипт…Блин вызовов много-мешают сайтом заниматься 😀
Кнопку наверх этим сервисом не интересно ставить
Она же только в конце статьи тогда будет, так что не зря мучались и делали. Тем более такую прикольную, как у тебя.
Я вот думаю по третьему кругу переделать набор этих кнопочек)))) Наверно, кучу лишних повставляла. Думаю, может ограничится как у тебя — четырьмя… Но плавающую ставить не буду, потому что по бокам у меня уже слишком много всего ))) Вообще, иногда начинает казаться, что я перемудрила уже с блогом… слишком много всего туда напихала (((( А что убрать — не знаю, все надо 😀
😀 Всегда так! Я такой же, увижу какую приколюшку, тут же себе тащу на блог))) А со временем, кстати, разный не нужный хлам постепенно убирается… по себе знаю! Со временем приходит опыт и понимание 😀
У меня пока убралась только реклама))) Оставила пока строчку ноликса, она ненавязчивая и места много не занимает.
И курсы Попова — может кому пригодится, полезная ведь штука! Вообще не представляю, чтобы я без них делала))) Столько сегодня наковыряла всего в кодах.. Я скоро уже и php изучу просто устанавливая коды и читая их)))))
Вот подумываю, завести какого-нибудь персонажа на сайте… В дизайн добавить… Вот как у того же Попова — дракончик на его руселлере))) но это надо время выделить спецом на это дело..
Кнопку отправить комментарий — сам делал?
Круто вышло *THUMBS UP*
Я пока в ручную установил, сам нарисовал и вставил. Но вот думаю чуток переделать, а то они много места занимают.
Клевый дизайн у вашего блога!!! И кнопки классные, не такие как у всех!!! *THUMBS UP*
Пробовал и так и сяк, но у меня вообще кнопки не отражаются на сайте, хотя делал всё по писанному. Странно.
Странно) А Вы когда распаковывали архив со скриптом на хостинг закачивали первую папку “share42”? Т.е. я имею в виду, что при распаковке нужно зайти в папку “share42” и в ней еще одна папка “share42” — вот ее и надо закачивать на хостинг!
В свое время тоже не смог установить эти кнопки на своем блоге. Видимо шаблон как-то не пускает. На других блогах ставил точно так же и все работало. Поэтому поставил себе скрипт от Яши, пусть радуется 😉 .
Валерий, спасибо за столь подробное руководство!
Всё разобрался пошагово: выбрал, скачал, настроил (честно говоря думал, что будет сложнее) %)
Поначалу как то кривовато шёл процесс. Не сразу сообразил, что скрипт нужно копировать в папку pablic_html. Потом долго психовал, что установленная панел отображается прямо посредине заголовка статьи (крест на крест), всё думал, что это от того, что у меня два сайдбара. Валерию то легко, у него одна боковая колонка.
Пока не разобрался со стилями. Но в итоге всё получилось, и что ещё больше радует, что всё работает. До этого стояла пара плагинов для соцкнопок. Но читатели оставили пару отзывов, что все эти красивые кнопки нихрена не работают. Пришлось искать другое решение.
Вроде есть блок «поделиться» от Яндекса. Но там всё такое крохотное, не настраиваемое :-! Короче УГ.
Валерий, ещё раз спасибо за полезный и подробный мануал! *THUMBS UP*
=) Да не за что!
Всё,сделал кнопки =) Заходите-оцените работу.Разгрузил блог немного.2 плагина убрал-Кнопку наверх и Плагин с соц.кнопками…Да у меня в принципе немного их-плагинов было…Сейчас 22 активных плагинов =)
Валер,сделай отступ от контента побольше,а то сливается…
Да я специально так сделал,чтоб чуть-чуть сливались) тоже надо начинать плагины по-маленьку ликвидировать 😀
А у меня так и нет на блоге кнопок… Я горизонтальные выбрала. Как не мучилась, все равно не получилось. На сервер все закачалось (с этим разобралась). Код в single.php вставляла, и в начале, и в конце пробовала. Код стиля вставила в конце списка стиля. И сохраняла, и обновляла… Пол дня сижу, а толку нет. Где могла ошибку допустить? Подозреваю, что коды как-то хитро должны вставлялся, а не просто скопировал и вставил в конец или начало. Может кто-то объяснит, что не так?
Елена, я наверное представляю, почему у Вас не работает: Вы архив “share42” распаковали, затем нужно войти в паку “share42” и в ней лежит еще одна папка “share42” которую и нужно закачать на сервер.
Вы когда прописывали путь до папки указали ведь -http://адрес_вашего_сайта/share42 ) а у вас наверно скрипт находится сейчас вот по такому пути -http://адрес_вашего_сайта/share42/share42 )
Установила кнопки, которые оставляют ссылку с сайта в профиле в соц.сети, а теперь не могу установить кнопки, ведущие на профиль в соц.сетях
Инна, подробнее можно, в чем проблема? Эти кнопки для ваших читателей, т.е. они на них кликают и у НИХ в аккаунте публикуется ссылка на статью)
Отличная статья! Очень помогла! особенно мучал вопрос по поводу установки панели кнопок справа или слева. оказалось все так просто!
ОГРОМНОЕ спасибо!
=) Рад помочь)
2 нараз пробовал поставить себе. У меня шаблон тяжедый, неполучалось. А сейчас думаю уже и не нужно. :-!
Валерий, тут у вас фраза:
«хотя, признаться честно, размещать кнопки по отдельности имеет смысл и в этом присутствует множество плюсов! Но не сегодня… потом… как нибудь расскажу» — так все таки, какие плюсы в раздельной установке кнопок? И тогда почему ниже речь о том, что 4 кнопки — это 4 внешних ссылки, а это вроде бы не есть хорошо. И еще, чем именно твитер особенно хорош? Меня там нет и когда к кому захожу тоже ничего хорошего не вижу.
Типа онлайн записной книжки. Ну еще кое-кто анонсы на свои статьи дает. А кто их читает? или это чисто для ссылочной массы?
И еще. Блок кнопок от Яши — он тоже несколько ссылок дает?
Хорошие и нужные кнопочки. Без таких сейчас никуда.
Спасибо за инструкцию) Что бы вывести кнопки на главную (статическая у меня) пришлось прописывать их в трех местах — для главной динамической, для страниц и для заметок))) Короче в трех файлах прописывал в index, page, и single — теперь кнопки везде. Но есть проблема не прилипают кнопки к краю экрана (на 0 не реагирует(((), оставил по краю темы.
Спасибо за информацию, но я все же предпочитаю сервис
Интересно по этим кнопкам кроме самого автора кто то кликает?
Да кликают. Иногда…
Совсем не в тему, но — нигде не могу найти форму «Оставить отзыв» или «Задать вопрос» подобной Вашей. Не поможете ли кодом или ссылочкой? Заранее благодарен.
Алексей, да без проблем, вот ссылка на статью — http://aimblog.ru/poleznye-servisy-i-programmy/forma-obratnoj-svyazi-bez-plagina-ot-servisa-redhelper.html
Здравствуйте!
Знаете, возникла недавно такая проблема. Когда нажимаю на кнопки мне нравится (в мир) не отображается картинка, переходит только главная с шапки, а со страницы товара не могу выбрать. Что же делать? Ни как не пойму..
Пробовала разные варианты многие готовые скрипты, но ничего не выходит. Есть у меня такой же сайт с этой же темой — там все получается — здесь нет. Сайт
Помогите, пожалуйста
Подскажи у меня тема Вордпресс Матала, не могу разобраться куда вставить скрипт Share42, пробовал в single,index,header,style, ничего не помогает, адрес проверял несколько раз не отображается! вставлял и в начало и в конец и посередине(
%) Помоги, что это может быть?!!!
Это шаблон нужно смотреть, так я не скажу.
Спасибо, хорошая статья. Подписался.
Вам спасибо за подписку)
Спасибо за статью! Все красиво получилось =) *THUMBS UP* Вы не подскажите что за модуль «Подпишись и получай новые статьи блога на почту»
Максим, это не модуль, это css
с утра блог отдавал 500 ошибку
Странно… будем разбираться что это могло быть! Спасибо!
спасибо! это то, что нужно!!! Очень долго искала подобное
Пожалуйста! Пользуйтесь)
Загадка про шампанское, это наверно в донышко надо налить? там углубление есть на дне, как раз на глоток!
)))
а как сделать чтобы кнопки шары не выводились на главной странице, а только в постах?
Костя, ты код наверное разместил в файле index.php? Просто нужно код от кнопок разместить в файл single.php У меня ведь в посте это написано!
Довольно полезное пособие.Хорошо,что в интернете появляются такие «подсказки на все случае жизни»
Проблема развёрнута очень широко и как размещать кнопки в соц.сетях будет понятно даже первокласснику 
Интересный сервис, вчера зашел, посмотрел, сейчас решил воспользоваться теперь и у меня такая панелька с боку бедет 8) 8) 8) 8)
Автор с одним из кодов пропихивает свою ссылку
Read more: http://aimblog.ru/poleznye-servisy-i-programmy/knopki-socialnyx-setej-dlya-sajta-socialnye-knopki-share42-dlya-wordpress.html#ixzz2jhqhpQ3k
]:->
Вася, вы видимо чрезвычайно умны??? Это защита от копирования контента 😀 *LOL*
Автор не «пропихивает«, как вы выразились, свою ссылку 😀
прикольное игра поймай кот
На свой блог поставили Social Share Buttons, но не всегда почему-то работает, нравится плагин для комментирования cackle , у него есть возможность отправить ссылку на комментарий с текстом комментария в соц сеть, под которой авторизуешься.
Привет, Валерий! Изначально ставил кнопки в футер и хедер по рекомендациям с других сайтов. Здесь воспользовался советом и поставил в single.php. Работает =)
Валерий,что дают кнопки соц.сетей в вашей форме подписки(справа в сайдбаре)?
Александр, это ссылки на мои аккаунты в соц сети. Та же самая подписка.
то есть таким образом люди могут добавиться к Вам в друзья?Я правильно понял?
Александр, да, именно так
Код кнопок соц.сетей нужно вставлять в код подписки,верно?
Нет, кнопки, это просто обычная картинка ссылкой на мой профиль в соц сети. Их можно вставить в любом месте.
Тэкс, все открылось, но у меня другая проблема. Я устанавливаю код, но кнопочки не выводятся. Не подскажете почему? Код скрипта установила правильно. Вторую часть ставлю в код одиночной записи, но кнопок нет. Не могли бы вы поточнее сказать куда именно его нужно вписать, чтобы они выводились после статьи?
Обожаю кнопочки от share42! Теперь они и у меня красуются на блоге! спасибо за статью! ура! *yess*
Спасибо за статью, все доходчиво объяснили.
Спасибо! Все замечательно.
Кнопки — это хорошо. Но вот как ссылки в них закрыть. Ведь они внешние, исходящие, а установив нопки получается , что со всех страниц сайта есть , как минимум, одна ссылка, А в сумме — чем больше страниц — тем больше сссылок. А это не есть хорошо. Я установила кнопки «плюсо» в сайтбар, а теперь некоторые агрегаторы их не видят, некоторые пишут , что они есть. Вот сижу и думаю — чт о с этим делать. Уже голова болит….