Блог
Анны Фёдоровой Как зарабатывать в интернете и на своём блоге?

Как добавить социальные кнопки на сайт или блог

2014.05.16
Автор:

Привет друзья  и уважаемые читатели sozdamblog.ru! Сегодня мы будем подробно разбирать, как добавить социальные кнопки на сайт или блог. Откуда взять социальные кнопки, как их установить и настроить. Обо всё об этом вы узнаете из этого поста!

как добавить социальные кнопки на сайт

Социальные кнопки очень важны и являются неотъемлемым элементом сайта.

На блоге я уже писала про установку кнопок социальных сетей, прочитать об этом можете, перейдя по этой ссылке.

В ней я рассказывала о нескольких вариантах установки кнопок:

1). Установка кнопок социальных сетей вручную, добавляя код

2). С помощью плагина Social Share Buttons

3). При помощи сервиса http://api.yandex.ru/share

На самом деле существует множество способов добавления социальных кнопок на сайт, но не все они положительно сказываются на вашем блоге.

Что касается первого варианта, то кнопки разных соц. сетей сложно подогнать под свой дизайн. Плагины замедляют работу блога и возникают проблемы с совместимостью разных кнопок, что происходит и в первом варианте, а на счёт третьего скажу, что бывает глючит и не у всех кнопки просто напросто работают. К тому же некоторые кнопки могут вставлять ссылку на себя, что не очень хорошо для вашего сайта.

На мой взгляд, одним из самых простых и удобных способов сделать социальные кнопки на сайте через сервис «Share42», в нём большой ряд популярных кнопок, что позволяет выбрать из такого изобилия нужные. А так же включает в себя много других плюсов, о которых сейчас расскажу.

Социальные кнопки на сайте или блоге. Сервис Share42

К достоинствам данного сервиса относится:

— удобство и простота в установке и настройке

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

— симпатичный внешний вид кнопок, выполненный в одном стиле

— отсутствие ненужных исходящих ссылок

— возможность расположить блок кнопок как горизонтально, так и вертикально

Подробнее об остальных преимуществах можно почитать на самом сайте.

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

Как добавить социальные кнопки на сайт. Установка и настройка соц. кнопок

Первым делом заходим на сайт сервиса Share42.com

Далее делаем всё по шагам:

1).  Выбираем размер кнопок и соответственно те кнопки, которые хотите видеть у себя на сайте.

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

Просто перетаскиваем мышкой в раздел «Прочее» в том порядке, каком хотим. И выделяем нажатием мышки на нужную иконку.

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

2). Дальше выбираем тип расположения кнопок (горизонтальная или вертикальная). Указываем кодировку сайта.

В пользу автора оставляем галочку, чтобы осталась иконка сайта Share42.com или снимаем. Если выбирали кнопку rss, то вписываем адрес ленты. Подключение JQuery-я галочку не ставила.

3). Обязательно смотрим, что получилось и как выглядят социальные кнопки. Если всё нравится, то скачиваем скрипт.

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

4). Теперь самый главный шаг – установка скрипта на свой сайт.

Советую куда-нибудь скопировать файл single.php – на всякий случай.

Скачанный скрипт — закачиваем на хостинг через панель управления и распаковываем. Выбираем подходящий тип сайта, я выбрала WordPress. И чтобы указать путь к файлам вставляем приведённый ниже код в шаблон вашего сайта. Только вместо site.name пишем свой домен.

Заходим в редактор, и если вы хотите поставить кнопки в конце каждой статьи, то вставляем этот код в single.php после строчки:

<?php the_content ('Читать запись полностью &raquo;'); ?>.

У меня лично такая строчка, ваша может отличаться.

Если хотите расположить вертикально, то вставляете в header.php перед закрывающим тегом «/head».

Теперь осталось дело за малым — оформить внешний вид панели с кнопками.

Выравнивание по центру.

Чтобы сделать социальные кнопки на сайте по центру используйте тег <center> код кнопок</center> или перед кодом пропишите <div align=»center»> и после кода поставьте закрывающий тег </div>.

Добавляем социальные кнопки с помощью сервиса Pluso

Вот ещё один сервис, тут вообще всё проще простого. Причём сервис новенький и эти кнопки не успели ещё всем надоесть, что нельзя сказать о предыдущем варианте. И кнопки от Pluso красиво выглядят, а так же хорошо вписываются в дизайн почти любого сайта. А почему? А потому что можно не только выбрать стиль кнопок, размер, форму, их расположение, но и цвет фона. Можно установить кнопки со счётчиками. Оформлению можно позавидовать. В общем, всё для вас! :)

К тому же скрипт этих социальных закладок не тормозит загрузку страницы, а все эти кнопки загружаются на страницу сайта лишь после основного содержания.

Итак, переходим на share.pluso.ru и выбираем желаемый стиль кнопок.

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

Правее выбираем нужные нам соц.сети путём перетаскивания. Дальше отмечаем размер, форму и расположение. Если выбрали фон, то выбираем цвет. В общем, подгоняйте под свой шаблон.

Обратите внимание на  предпросмотр и увидите, что же у вас получилось.

Заполните три поля, расположенных справа. Установив кнопки на своём сайте вы позволяете использовать метатеги, что помогает продвижению вашего блога.

Если вас всё устраивает и всё нравится, приступаем к установке.

Копируем полученный код и вставляем в нужное нам место. Здесь всё тоже самое — в single.php. Выравнивание по центру социальных кнопок происходит так же как и в предыдущем варианте.

Есть минус в данном сервисе. Это внешняя ссылка (реклама сервиса) в виде плюса в конце кнопок.

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

При желании можно удалить эту красную кнопку, зайдите в style.css и в конце добавьте следующий код:

.pluso-more {display: none !important;}

Ну, вот и всё, вы узнали, как добавить социальные кнопки на сайт и теперь дело за вами. Пишите качественный и полезный контент, чтобы у ваших читателей появилось желание поделиться им со своими друзьями в соц. сетях.

Буду признательна, если понажимаете на мои кнопочки социальных сетей. А какой способ установки кнопок социальных сетей нравится вам?

P.S. Советую получать новые статьи на свой e-mail, чтобы не пропустить полезную информацию!

С уважением, Анна Федорова


Комментариев: 2

  1. Жанна

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

    Ответить
    1. Анна Фёдорова

      Вопрос не по теме! Закрыть внешние ссылки можно с помощью плагинов или с помощью html тегов nofollow и noindex.

      Ответить

Оставить комментарий: