Кнопки социальных сетей для сайта

Привет, Друзья! Сегодня расскажу Вам о том, что такое кнопки социальных сетей для сайта, и как разместить кнопки на сайт (на WordPress) с помощью различных сервисов (Share42, Pluso, Яндекса), и с помощью нескольких плагинов. Для чего нужны кнопки социальных сетей на сайт, думаю, объяснять не стоит? Все итак прекрасно понимают, что кнопки предназначены для того, чтобы читатели могли одним нажатием поделиться интересной статьей со своими друзьями в различных социальных сетях: одноклассники, вконтакте;, твиттер, фэйсбук;, гугл плюс и др.., а это дополнительный трафик на Ваш сайт (при условии что статья интересная), да и ко всему прочему, с помощью кнопок социальных сетей можно быстро пропихнуть свежую статью в индекс поисковиков (особенно полезен в этом случаи Twitter).

Кнопки социальных сетей для сайта

Т.е. можно с уверенностью сказать, что кнопки социальных сетей для сайта — это SMO в чистом виде! SMO (Social Media Optimization) —  продвижение сайта в социальных сетях. Подробно останавливаться и заморачиваться на этих понятиях сейчас не будем (нас это в скором будущем ждет), а пока нам нужно просто-напросто разместить у себя на блоге самые популярные кнопки соцсетей для нашего удобства, для удобства наших посетителей, ну и для того, чтобы быстренько заявить о свежей статье!

Кнопки социальных сетей для сайта

Итак, как уже заикнулся в начале статьи, существует несколько вариантов размещение кнопок соц сетей на сайт:

  • Плагины для кнопок социальных сетей.
  • Практически каждая социальная сеть предоставляет свою кнопку по отдельности. Как Вы уже догадываетесь, за каждой кнопкой идти в свою соц сеть а потом размещать код кнопки на сайте, подстраивать стили, выравнивать — это долго и нудно…(ах мы лентяи), хотя, признаться честно, размещать кнопки по отдельности имеет смысл и в этом присутствует множество плюсов! Но не сегодня… потом… как нибудь расскажуПодмигивающая рожица
  • Сервисы кнопок социальных сетей. Вот здесь, по-моему, все предельно просто — пришел на сервис, выбрал нужные кнопки, сервис сгенерировал скрипт, вставил скрипт на сайт — Все!

В общем, сегодня будем вставлять на сайт соц кнопки от Share42, Pluso кнопки «Поделиться от Яндекса»

Как разместить кнопки социальных сетей Share42 на WordPress

Что такое Share42.com?

Это бесплатный сервис, генерирующий скрипт, который позволяет посетителям вашего сайта публиковать ссылки на ваши статьи в социальные медиа (закладки, социальные сети).

Ну, поехали… Для начала нам надо бы попасть на Share42.comhttp://share42.com/ru (скопируйте ссылку и вставьте в адресную строку браузера) — попадаем на главную страницу сервиса социальных кнопок… и что мы видимУдивленная рожица

share42

А видим мы все, что только душа пожелает:

  • Три разных варианта размера соц. кнопок (32*32, 24*24, 16*16)
  • Красивые иконки — мы видим много красивых иконок (дизайну позавидовал бы сам Стив Джобс). 45 кнопок которые могут работать не только с социальными сетями, но и с социальными закладками, блог-платформами. Так же есть кнопки подписки по электронной почте, RSS; есть кнопка для распечатки материала и даже кнопка “наверх”!

Короче первое впечатление меня впечатлило! Идем дальше!

Для того, чтобы выбрать нужные кнопки на сайт, необходимо просто по ним кликнуть мышкой (если Вам на сайте нужны все иконки, то сверху есть кнопочка “Выбрать/Снять все” – ну думаю, что все кнопки на сайте не к чему…), значит при клике по иконке, она затемняется и можно выбирать следующую, при повторном нажатии, выделение снимается. Внимание, хочу заметить, что иконки можно перетаскивать мышкой и менять порядок их расположения как Вам вздумается!

иконки социальных сетей

1. Выбор иконок и размера кнопок. Итак, например, я выбрал 4 самые популярные социальные сети (Twitter, Google Plus, Facebook и в Контакте) размером 24*24, перетянул их в начало и расположил их по своему вкусу (еще раз повторяю, Вы можете экспериментировать с кнопками как угодно!)

2. Выбор опций. После того, как выбрали кнопки и размер, спускаемся ко второму блоку с настройками:

Share42.com

  1. Тип панели. Горизонтальная – обычно кнопки соцсетей располагают сразу после статьи горизонтально в ряд, например:горизонтальная панель иконок социальных сетей; Вертикальная “плавающая” – можете наблюдать у меня на сайте.
  2. (Относится только к вертикальному варианту) Если выбрали большое количество иконок, то для того, чтобы блок с кнопками не был слишком длинным, вы можете ограничить вывод кнопок в блоке на “N” число, а остальные будут показываться при нажатии на небольшую стрелочку. Пример можете наблюдать как раз на сайте Share42.com
  3. Здесь ставите ту кодировку, на которой работает Ваш сайт
  4. Язык подсказок… думаю без вопросов)
  5. Добавить иконку сайта Share42.com к выбранным Вами кнопкам, решайте сами. Это своего рода ссылка на сайт Share42.com
  6. Если Выбрали кнопку RSS подписки, то здесь должны прописать адрес своей rss ленты
  7. jQuery – советую нифига не трогать, тогда точно должно работать! Честно, не знаю для чего и как это работает.

3. Предпросмотр и/или скачиваем скрипт. Скачивать пока ничего не будем, просто обязательно посмотрите, как это будет выглядеть примерно на сайте. Тут пока вроде все. Идем к следующему шагу.

4. Установите скрипт на своем сайте. Здесь нужно прописать адрес Вашего сайта и указать тип сайта:

социальные кнопки

После того как указали адрес сайта и тип сайта, код, расположенный ниже приобрел следующий вид:

social'nye-knopki

Видите? В коде уже прописана ссылка на Ваш сайт (то есть сейчас на мой, но когда делать будете Вы… будет на Ваш) и циферки 150 и 20, но о них чуть ниже.

Теперь возвращаемся в пункт назначения 3 и жмем на кнопку “Скачать готовый скрипт

кнопки социальных сетей

Скачиваете архив к себе на компьютер, распаковываете и папку “share42” по ftp закачиваете в корень своего сайта (в /public_html) Закачивать можно с помощью программы FileZilla или с помощью всем известного файлового менеджера Total Commander и ftp

5

Вот теперь настал момент самого интересного – вставка кода… (когда я раньше не понимал как и куда вставлять скрипты, я старался избегать подобных штучек, а пытался найти какой-нибудь плагин), но Вам я в очередной раз советую найти время и изучить несколько бесплатных коротких видео уроков по css и html, эти уроки реально облегчают работу в блогосфере, поверьте мне!

Итак, значит я выбрал кнопки социальных сетей плавающая панель, скачал и закинул папку со скриптом “share42” в корень блога, теперь надо чтобы этот скрипт заработал, а для этого нам и нужно код, предоставленный сервисом, вставить в то место на блоге, где будет панелька.

код от кнопок соц сетей

Для этого нам нужно блокнотом notepad++ открыть на редактирование файл single.php  который находится в папке с Вашим WordPress шаблоном по адресу /wp-content/themes/название_темы, и найти в самом верху (напоминаю, у нас вертикальная плавающая панель) строчку похожую на эту <?php while (have_posts()) : the_post(); ?> и вставить сразу после нее три строчки скрипта

7

Затем не забываем сохранить изменения и обновить файл на хостинге.

Вот сейчас нужно (конечно если нужно) настроить позиционирование. Т.е. если панель расположена слишком высоко от контента, или наоборот слишком низко, вот нам и помогут цифры 150 и 20

social'nye-knopki

Даже в принципе 20 мы не будем трогать, а поиграемся только со 150. Тут уже сами, методом тыка изменяйте, смотрите как изменилось, пока не найдете оптимальное значение (у меня подошло значение 400) Кстати, если блок не правильно расположен относительно право-лево, пока не обращайте внимание, это в css меняется, рассмотрим ниже)

Теперь открывает на редактирование файл со стилями style.css (находится в директории /wp-content/themes/название_темы), и в самый конец файла вставляете два css кода со стилями. Небольшая оговорочка: второй код со стилями для оформления можно вставлять, можно не использовать вообще(или менять как угодно), но первый css код вставить нужно обязательно, т.к. в нем указано позиционирование панели

kod

margin-left:-70px; – с этим значением может быть придется поиграться для того, чтобы настроить правильное смещение панели право-лево относительно контента (у меня, например, подошел вариант с –35px, у вас может быть по разному, так что имейте это в виду). Ну а как уже говорил чуть выше, второй css код отвечает чисто за оформление, так что тут только эксперимент на Ваш вкус))

Итак, поигрались со значениями, и на этом все – кнопки социальных сетей Share42 для WordPress теперь работают и приносят трафик на Ваш блог!

Сегодня в статье мы рассмотрели более сложный вариант –  плавающая панель, а горизонтально расположить кнопки совсем просто: настраивать ничего бы не пришлось, хотя шаги все те же, только код вставляем в файл  single.php в конец статьи.

Ну вот и все, надеюсь понятно объяснил для чего нужны кнопки социальных сетей для сайта? Вы теперь с легкостью разместите у себя любой вариант кнопок Share42!

Кнопки социальных сетей от сервиса Pluso

Разместить на сайте кнопки от Плюсо на порядок проще чем от Share42, но, как известно, на вкус и цвет товарищей нет, поэтому выбирайте те кнопки, которые нравятся именно вам. Итак, идем на сервис Плюсо — http://share.pluso.ru/

  1. Выбираем стиль кнопок;
  2. Выбираем соц сети (перетаскиваем прям мышкой. Можно менять расположение);
  3. Предпросмотр в реальном времени;
  4. Настройки внешнего вида;
  5. Готовый код для вставки на сайт

Подробнее о Pluso

Все!

Кнопки социальных сетей от Яндекс (поделиться)

Разместить на сайте социальные кнопки от Яндекс (поделиться Яндекс) еще проще!

Идите сюда — http://api.yandex.ru/share/

  1. Выбираете нужные социальные сети;
  2. Указываете внешний вид блока;
  3. Копируете код;
  4. Вставляете в файл шаблона.

Подробнее о кнопках от Яндекса

Новые кнопки социальных сетей с счетчиком

Хотите вот такие кнопочки?

Т.е. с счетчиком? Посмотрите какие красивые ;) Как такие сделать? Да очень-очень просто!!!

Чтобы получить инструкцию, кликни по одной из кнопок соц сетей и дождитесь перезагрузки страницы:

Если кликнули по кнопкам а страница не перегрузилась, то обновите ее в ручную!

Плагины для кнопок социальных сетей

  1. Social Profiles Widget
  2. Social Share Buttons for WordPress
  3. TweetMeme Button

Для тех, кто не умеет или боится лезть в файлы шаблона, обратитесь на почту я постараюсь помочь с размещением кнопок!

Видео просто жесть! Реально люди в рубашках рождаются!

PS Ну и хочу от души, Друзья, попросить Вас покликать по моим кнопкам социальных сетейПодмигивающая рожица

PPS Загадка: Как выпить из бутылки шампанского глоток шампанского не открывая и не разбивая бутылку?

Все, пока-пока!!!

Статья мануал без лишней воды: Как повысить посещаемость сайта с 0 до 800

    ADD YOUR COMMENT