В этой статье я расскажу вам о нескольких способах, как добавить на сайт кнопки социальных сетей. Из них мне больше всего понравился первый способ — кнопки от сервиса goodshare, поэтому о нем я и расскажу в первую очередь.
Кнопки от GoodShare — для тех, кому нужна свобода в настройке
Первый сервис, который я вам порекомендую — это http://goodshare.ru. Он не так известен, как следующие, о которых пойдет речь, но я него есть свои преимущества.
На сайте сервиса вы точно не потеряетесь. Ровно посередине находится кнопка установки скрипта, по нажатии на нее нам будет предложено 2 варианта. Я рекомендую первый, подключение через CDN. Копируем код и вставляем его куда нибудь в подвал сайта, перед закрывающим тегом body. В wordpress нужно вставить в footer.php.
Отлично, теперь вернитесь на главную страницу сервиса и перейдите на вкладку Документация. Тут вы можете увидеть код всех доступных соц. сетей. Также выше вы можете прочитать о том, что разработчики этих кнопок никак не ограничивают вас — вы можете менять внешний вид кнопок так, как вам угодно.
Это самое главное преимущество сервиса по сравнению с конкурентами, о которых я напишу в этой же статье. Оно заключается в том, что вы сами можете настроить внешний вид иконок так, как нужно вам! Также в качестве преимущества этого способа я хотел бы отметить то, что скрипт не грузит сервер и не влияет отрицательным образом на скорость загрузки страниц, потому что он очень легкий и грузиться из CDN.
Короче, переходим к делу. Там, где вы хотите вывести кнопку соц. сети Вконтакте добавляем следующий код:
<div class="goodshare" data-type="vk">
Поделиться Вк
<span data-counter="vk"></span>
</div>
Где:
data-type – название соц. сети. Его вы можете посмотреть в документации.
data-counter – счетчик, который считает количество нажатий по кнопке. Возможно, он вам не нужен, тогда можно его попросту не писать. Если почитаете документацию, то увидите, что счетчик поддерживается не везде.
По умолчанию кнопка будет иметь ужасный вид. Точнее, у меня просто отобразился текст «Поделиться Вк«, я даже подумал, что что-то сделал неправильно, но при нажатии по тексту успешно открылась страница, с которой можно было поделиться записью.
Как оформить кнопки от goodshare?
С помощью css-стилей, конечно же. Сейчас я вам покажу на примере одной кнопки, которая у меня есть. Оформить кнопку очень легко, обратившись к ней по ее data-атрибуту. Для этого нужно знать о селекторах атрибутов. Если вам ничего о них не известно, просто делайте как я покажу, но если хотите разобраться в теме, то вот статья о них.
Ну а я открою style.css и в самом конце файла опишу стили для кнопки:
div[data-type=vk]{
background: #25496F;
border-radius: 50%;
color: #fff;
max-width: 80px;
padding: 10px;
text-align: center;
font-size: 18px;
cursor: pointer;
}
Как видите, я использовал селектор атрибута, чтобы дотянуться до нее. Отлично. Все стилевые правила объяснять не буду, получилась вот такая штука:
Просто, да? Но ведь и я особо не напрягался, всего лишь прописал пару строк стилей. И ведь никто не мешает вам задать стили для кнопки при наведении на нее или при еще каких-то действиях. Это очень здорово и это то, что вам не дадут сделать при установке кнопок с помощью других сервисов. По крайней мере мне известных.
Тем временем я сделал уже 3 кнопки:
Пускай они немного примитивны, но что мешает сделать их них конфетки? К тому же даже в таком виде они уже уникальны, таких кнопок нет нигде, потому что лично я только что их сделал.
Короче, скрипт от Goodshare для тех, кому нужна свобода в настройке соц. кнопок. Хотите свободы? Получите, распишитесь.
Кнопки от Pluso
Особенная фишка этих кнопок в том, что вы видите только 6 самых популярных соц. сетей, но при нажатии на плюс появляется возможность отправить запись в десятки других, менее известных мест.
На странице сервиса вы можете выбрать один из восьми стилей отображения кнопок, можете выбрать, какие сети показывать в первой строчке, а какие спрятать под плюс. Чуть ниже вы можете дополнительно настроить дизайн.
А еще ниже можно увидеть код, который просто нужно скопировать и вставить в то место на своем сайте, где вы хотите увидеть кнопки от Pluso. Это хорошо, потому что не нужно дополнительно ничего закачивать себе на сервер, все делается очень быстро.
Дополнительно вы можете указать конкретный адрес страницы, которая будет расшариваться. Это нужно очень редко. Дело в том, что по умолчанию при нажатии на кнопку в соц. сеть отправляется адрес той страницы, на которой стоят кнопки. Если же вы укажете конкретный адрес расшариваемой страницы, то где бы эти кнопки у вас ни стояли, они будут отправлять в соц. сеть только 1 страницу, которую вы указали. Я незнаю, для чего это вам. В 99% случаев просто оставьте пустыми эти поля.
Кнопки от Share42
Share 42 — это еще один полезный сервис, который позволит вам установить социальные кнопки на сайт. Чтобы начать установку, перейдите http://share42.com/ru на сайт. Радует, что тут все настройки на одной странице. Вы можете выбрать размер иконок и те из них, которые вам необходимо. Для этого 1 раз кликните по иконке.
На этом скриншоте вы можете увидеть, что я выбрал 6 кнопок для использования. Далее ниже вам нужно выбрать дополнительные опции. В принципе, там все интуитивно понятно. Все те поля и галочки необязательны для заполнения.
Далее сервис предлагает вам посмотреть, как будут выглядеть ваши кнопки, после чего скачать скрипт с ними к себе на компьютер. Этот скрипт надо будет разархивировать. Внутри будет папка share42. Вы должны закинуть ее к себе на сайт. Смотрите сами куда именно. Можно просто в корень, но я рекомендую непосредственно в шаблон.
Теперь вам нужно на сайте сервиса ввести путь к папке, куда вы закинули скрипт. Например, если вы забросили его в шаблон, то путь будет примерно таким:
http://site.name/wp-content/themes/название-шаблона/share42/
Ну это если у вас сайт на wordpress. Кстати, тут же вам сервис предлагает выбрать, какой у вас движок. Выбираем нужный вариант.
После того, как путь к папке со скриптом указан, и cms выбрана, остается скопировать сгенерированный кусок кода и вставить его в том месте, где вы хотите видеть эти самые кнопки. В wordpress, например, наверняка вы захотите добавить их после каждой записи. Для этого переходим в single.php, находим, где заканчивается вывод статьи и вставляем туда код. Теперь кнопки появятся под каждой статьей. Вот так они выглядят в моем случае:
Самый простой способ в WordPress
А как добавить в wordpress социальные кнопки? Плагин Juiz Social Post Sharer может помочь вам в этом. О нем я уже писал в этой статье. Кстати, там есть еще один вариант добавления кнопок социальных сетей — API Яндекса.
Что ж, ну а на этом я буду заканчивать. И так получилось около 5-6 способов добавления кнопок, если соединить 2 статьи. Какой-то из них наверняка понравится и вам.