Кнопки социальных сетей. Социальные кнопки своими руками без сторонних сервисов Для скачивания поделитесь материалом в соцсетях

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

Добавление на сайт на WordPress

Начну с того, что самым простым способом, если у вас WordPress, является просто установить какой-нибудь плагин для этого дела. Какой? Я, например, пользовался Juiz Social Post Sharer. А вообще, просто введите в поиске плагинов слово social и просмотрите, что там есть. Преимущество тут только в том, что вам, вероятно, не придется ничего настраивать.

Яндекс тоже разработал страницу, на которой вы можете настроить и поставить себе кнопки. На этой страничке вы можете выбрать нужные сервисы (а их примерно 25). Справа вы можете выбрать внешний вид блока. Это могут быть счетчики, которые будут показывать, сколько раз на кнопки нажали пользователи. Это, в свою очередь, поможет вам отслеживать, полезен ли материал читателям.

JavaScript. Быстрый старт

Естественно, не нужно использовать все три варианта, лучше какой-то один. Хотя я видел сайты, где блок был и в начале, и в конце страницы.

Теперь вам нужно найти файл с кодом, который выводит статьи. В wordpress, например, он обычно называется single.php или подобным образом. Итак, если вам нужно поставить блок с кнопочками после статьи, ищем строчку the_content. Именно за ней можно вставить код. Вам очень поможет, если разработчик вашего шаблона делал комментарии в коде.

Редактировать файлы сайты можно некоторыми способами. Например, сделать это напрямую через админку движка (внешний вид — редактор). В этом случае код не подсвечивается, поэтому ориентировать в нем не так удобно. Другой способ – через ftp. Подключитесь к сайту с помощью ftp-клиента, перейдите в wp-content – themes. Тут нужно найти тот шаблон, который является активным у вас в данный момент. Заходим в него и находим тот самый single.php или ищем что-то похожее по названию.

В самом файле с кодом найдите строчку the_content с помощью поиска (Ctrl + F). Вставьте где-нибудь после нее этот код.

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

Кнопки от Pluso

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Вы можете выбрать стиль кнопок, настроить их фон, положение и размер. Также можно выбрать иконки со встроенным счетчиком. А еще одним преимуществом кнопок от Pluso является их потрясающий внешний вид и возможность встроить их в практически в любой дизайн.

Когда все настроено, просто копируем код и вставляем его в том месте, где хотим увидеть соответствующий блок.

Еще один вариант – Share42

Если предыдущие варианты вам чем-то не понравились, есть другой способ, как поставить кнопки социальных сетей на сайт. Это сервис share42.com. Назван так, наверное, потому, что на момент создания в нем было 42 кнопки социальных сервисов, хотя на данный момент их 43.

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

Иконки, которые вам нужно, нужно выбрать, кликнув по ним мышкой. Отдельно хочу отметить наличие таких интересных возможностей, как добавление в избранное браузера, ссылка на rss и кнопка «Наверх».

Далее вы можете выбрать тип панели: горизонтальная или вертикальная? И если выбрана вторая, то количество кнопок можно ограничить. Кодировку я рекомендую оставить UTF-8. Вы можете также добавить иконку самого сервиса в комплект кнопок, чтобы пользователи с вашей странички могли перейти на него и установить себе тоже эти кнопки.

Также если вы планируете добавить иконку rss, то обязательно нужно указать адрес вашего фида, а если хотите показывать количество нажатий по кнопкам, должны быть отмечены две последние галочки.

Ниже есть 2 кнопки. Первая позволяет взглянуть, как будут выглядеть социальные кнопки, которые вы настроили. С помощью второй скачивается скрипт. Его нужно загрузить через ftp к себе на сайт в корневую папку.

Следующим шагом укажите на странице сервиса путь к этой папке. Зачастую достаточно заменить site.com на ваше доменное имя. Все, остается вставить код, выбрав перед этим cms, на которой работает ресурс. Куда вставлять код вы уже должны понимать, я надеюсь.

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

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

2. Лёгкий способ получить ссылки на сайт - QIP.RU
Разместите кнопку на сайте и дайте посетителям возможность добавлять понравившиеся материалы сайта в закладки, блоги и соцсети. Три шага: где разметите кнопку (сайт, Blogger или WordPress), стиль кнопок (готовые варианты) и получить кнопку.

3. Кнопки для добавления контента в соцсети — Pluso
Разместите кнопки и дайте посетителям возможность делиться понравившимися страницами в соцсетях, а также печатать, отправлять письмо и добавлять закладки.

4. Сервис социальной активности — UpToLike
Кастомизированные кнопки соцсетей с возможностью задать цвет, форму, размер и спецэффекты. Дополнительные фишки - виджет расшаривания картинок PicShare, функция «Цитирование» и кастомизированная функция Following.

5. Одна кнопка ! — для всех сервисов закладок и соцсетей
Выберите вид кнопку. Где будет установлена кнопка: сайт, Blogger или WordPress. Добавьте кнопку.

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

1. Красивые социальные кнопки для сайта — goodshare.js
Отображение кнопок практически на любом устройстве. Чистый код. Краткая документация. SEO friendly.

2. Скрипт кнопок социальных закладок и сетей — Share42
Выберите размер и отметьте иконки сервисов, которые хотите использовать на сайте. Выберите нужные опции. Посмотрите, как это будет выглядеть и/или скачайте готовый скрипт. Установите скрипт на сайт WordPress, Drupal, другое.

3. Красивые кнопки «лайков» соцсетей с использованием jQuery — Social Likes
Скрипт кнопок «лайков» со счётчиками в едином стиле для соцсетей: Facebook, Twitter, ВКонтакте, Одноклассники, Мой мир, Google+ и Pinterest.

Зарубежные аналоги кнопок социальных сетей для сайта

1. Share Buttons — AddThis
Кнопки шаринга помогут вам увеличить аудитория сайта, путем привлечения посетителей с других ресурсов и соцсетей, через распространяемый контент.

4. Social Sharing — Po.st
Получить больше пользы от шаринга в соцсетях. Сервис позволит облегчить процесс шаринга в соцсетях для посетителей, что позволит увеличить органический трафик сайта.

5. Share Buttons for Any Website — AddToAny
Получите код кнопок социальных сетей для любого сайта. Выберите тип и стиль кнопок, укажите e-mail и другие опции или выберите одну из платформ: WordPress, Drupal, Tumblr, Joomla, Elgg, WordPress.com, Blogger, TypePad или FeedFlare. Получите код кнопок.

в 8:00 Изменить сообщение 6 комментариев

Если вы боитесь, что за вами наблюдают в интернете — выключите компьютер.

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

Ни для кого не секрет, что почти все сервисы соц.кнопок сливают инфу о ваших пользователях куда понадобится. О Боже! Не может быть! Я только что про это узнал! — Поздравляю! Им же нужно как-то пользоваться вами, за их труд и за старания. Они сделали хорошие сервисы, с большим функционалом, удобством и «качеством». Вам стоит только выбрать что нужно, и поставить код куда надо. И все. А какая им выгода задаром делать такие маневрирования в интернете? Правильно. Никакой. Вот и время от времени каждая такая контора и палится на сливе данных в какую-нибудь DMP.

Я не буду описывать каждый из таких сервисов, все они имеют хороший функционал, некоторые уникальные фишки, но представлять их по отдельности — не имею желания. Составил небольшой список ниже.

Список самых популярных сервисов социальных кнопок для сайта
  • share.pluso.ru
  • uptolike.ru
  • tech.yandex.ru/share
  • share42.com
  • sharethis.com
  • pip.qip.ru
  • www.addtoany.com
  • www.po.st
  • www.addthis.com
  • sharebuttons.com

Если у вас не хватает времени, или вам лень делать больше чем пару движений кистей рук и фаланг пальцев, то вы смело можете пользоваться этими сервисами. Они великолепно подходят для сайтов, также как и для посетителей. Но 100% безопасность данных пользователей, 100% работы их DNS и загрузки ваших сайтов не гарантирует никто. Т.е. если произошел сбой на серверах соц.кнопок, то ваши сайты будут загружаться медленнее, чем обычно. Да это бывает редко, но бывает. Вы конечно же можете поставить асинхронную загрузку этих скриптов, оптимизировать их работу, но это уже больше чем пару движений, о которых я писал для ленивых.

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

Пример установки этого кода не для тех, кто не знает азы HTML или CSS, но если у вас есть руки и немного времени, у вас все получится, если будете идти строго по инструкции. И так поехали:

Выглядят они так:

По стандарту настроены шесть социальных сетей: Facebook, ВКонтакте, Одноклассники, Мой Мир, Google Plus, Twitter. В настройках скрипта их больше 30, но это все устанавливается отдельно по желанию. Плюсы этих кнопок, как заявляют авторы, с чем я полностью согласен:

  • Отличное отображение на любом устройстве (Да, они адаптивные под любой размер экрана)
  • Чистый код - быстрый и безопасный сайт (загружается только скрипт, CSS и Шрифт, которые лежат только у вас на сервере)
  • Все share-технологии мобильных мессанджеров в одном скрипте (Telegram`ы всякие,)
  • SEO friendly - без ссылок
  • Не содержит картинок

    • Что делает сам скрипт, и вообще зачем нужно было делать этот скрипт? В скрипте этих кнопок написаны все API всех соц сетей, и скрипт делает любое место на сайте активным блоком шаринга.

    Например, вы можете его поставить на пустые DIV блоки, или Span, или картинки, или пустые ссылки, да практически любой элемент сайта можно превратить в эти кнопки. В моем примере я использовал скрипт на пустые Div.

    По поводу картинок: их тут нет. Иконки которые вы видите взяты из шрифта, это просто символ и не более.

    Скачать архив кнопок вы можете по .

    Установка этих кнопок очень проста. В архиве есть всего четыре файла: Шрифт, CSS, JS, и TXT.

    1). Шрифт вам нужно загрузить в любую папку на вашем сервере, можете закинуть ее туда-же, где лежат ваши JS или CSS.

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

    Этот скрипт состоит из двух частей, первая — это Jquery, вторая — сам код кнопок. Если у вас уже подключается Jquery на сайте, то вы можете удалить первую часть кода и сократить тем самым размер файла.

    ВАЖНО : (для тех, кто убрал часть код Jquery) скрипт кнопок должен загружаться после скрипта Jquery.

    3). После установки JS и шрифта, вам следует добавить CSS себе на сайт. Просто скопируйте все содержимое файла soc.css в один из ваших подключаемых CSS на сайте.

    ВАЖНО : В 82 строке файла soc.css поменяйте URL на свое местоположение Шрифта!

    4). После всего этого, скопируйте HTML код из файла HTML.TXT к себе на сайт, где вы хотите видеть эти замечательные кнопки.

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

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

    Спасибо за внимание, если будут вопросы по установке, пиши комментарии.

    С вами был, ленивый Staurus.

    В последнее время каждый второй (если не первый) заказчик в требованиях по разработке сайта просит непременно связать его с социальными сетями. «Социальные» кнопки на сайте — средство номер 1 для привлечения целевой аудитории, распространения контента и пиара в целом. Причем совершенно бесплатное!

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

    Каковы возможности и функции?

    Если ваш сайт ориентирован на людей которые общаются популярных соц. сетях, например, Вконтакте, Twitter, Instagramm, Facebook, Google+, Pinterest и прочее, и вы хотите охватить их все, то чтобы не устанавливать кнопки каждой из них по отдельности, учитывая то, что они могут отличаться по размерам и дизайну, советуем воспользоваться сервисами-агрегаторами. Это простые и удобные инструменты, которые позволят посетителям сайта быстро делиться информацией со своими друзьями вне зависимости какой социальной сетью они пользуются. Ниже мы разберем наиболее популярные сервисы.

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

    Данный способ, я активно применяю при создании тем для WordPress. Это позволяет мне делать кнопки схожие по дизайну с самой темой, что не возможно с сторонними сервисами, также, я могу настроить все так как нужно мне. Также я считаю что такой способ меньше грузит сайт. Я использую не все кнопки лишь те что считаю самыми часто нажимаемыми. Вот пример из нескольких сайтов.

    Итак, приступим. В готовом примере будут просто текстовые ссылки без картинок. Если вы владеете минимальными навыками в CSS и Фотошоп или поиском картинок гугл, думаю Вам не составит труда сделать кнопки не хуже чем мои 🙂

    1. Подключение библиотеки jquery

    Для начала нужно подключить библиотеку jquery.

    Перед подключением посмотрите, нет ли уже ранее подключенной библиотеки, чтобы не спровоцировать конфликт.

    В head вставляем следующий код:

    2. Скрипт кнопок на базе jQuery c опциями

    Код приведенный ниже вставляем в теги

    сюда код

    И вставляем сразу после подключенной библиотеки.
    Также, если вы не любите лишний код в html, то можете сделать немножко иначе.
    Создайте файл buttons.js и вставляем код в него.
    Далее после подключенной библиотеки вставляем ссылку на файл с правильным путем к нему.

    Собственно, сам код:

    Share = { /** * Показать пользователю диалог шаринга в сооветствии с опциями * Метод для использования в inline-js в ссылках * При блокировке всплывающего окна подставит нужный адрес и ползволит браузеру перейти по нему * * @example like+ * * @param Object _element - элемент DOM, для которого * @param Object _options - опции, все необязательны */ go: function(_element, _options) { var self = Share, options = $.extend({ type: "vk", // тип соцсети url: location.href, // какую ссылку шарим count_url: location.href, // для какой ссылки крутим счётчик title: document.title, // заголовок шаринга image: "", // картинка шаринга text: "", // текст шаринга }, $(_element).data(), // Если параметры заданы в data, то читаем их _options // Параметры из вызова метода имеют наивысший приоритет); if (self.popup(link = self(options)) === null) { // Если не удалось открыть попап if ($(_element).is("a")) { // Если это , то подставляем адрес и просим браузер продолжить переход по ссылке $(_element).prop("href", link); return true; } else { // Если это не , то пытаемся перейти по адресу location.href = link; return false; } } else { // Попап успешно открыт, просим браузер не продолжать обработку return false; } }, // ВКонтакте vk: function(_options) { var options = $.extend({ url: location.href, title: document.title, image: "", text: "", }, _options); return "http://vkontakte.ru/share.php?" + "url=" + encodeURIComponent(options.url) + "&title=" + encodeURIComponent(options.title) + "&description=" + encodeURIComponent(options.text) + "&image=" + encodeURIComponent(options.image) + "&noparse=true"; }, // Одноклассники ok: function(_options) { var options = $.extend({ url: location.href, text: "", }, _options); return "http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1" + "&st.comments=" + encodeURIComponent(options.text) + "&st._surl=" + encodeURIComponent(options.url); }, // Facebook fb: function(_options) { var options = $.extend({ url: location.href, title: document.title, image: "", text: "", }, _options); return "http://www.facebook.com/sharer.php?s=100" + "&p=" + encodeURIComponent(options.title) + "&p=" + encodeURIComponent(options.text) + "&p=" + encodeURIComponent(options.url) + "&p=" + encodeURIComponent(options.image); }, // Живой Журнал lj: function(_options) { var options = $.extend({ url: location.href, title: document.title, text: "", }, _options); return "http://livejournal.com/update.bml?" + "subject=" + encodeURIComponent(options.title) + "&event=" + encodeURIComponent(options.text + "
    " + options.title + "") + "&transform=1"; }, // Твиттер tw: function(_options) { var options = $.extend({ url: location.href, count_url: location.href, title: document.title, }, _options); return "http://twitter.com/share?" + "text=" + encodeURIComponent(options.title) + "&url=" + encodeURIComponent(options.url) + "&counturl=" + encodeURIComponent(options.count_url); }, // Google+ gg: function (_options) { var options = $.extend({ url: location.href }, _options); return "https://plus.google.com/share?url=" + encodeURIComponent(options.url); }, // Mail.Ru mr: function(_options) { var options = $.extend({ url: location.href, title: document.title, image: "", text: "", }, _options); return "http://connect.mail.ru/share?" + "url=" + encodeURIComponent(options.url) + "&title=" + encodeURIComponent(options.title) + "&description=" + encodeURIComponent(options.text) + "&imageurl=" + encodeURIComponent(options.image); }, // Открыть окно шаринга popup: function(url) { return window.open(url,"","toolbar=0,status=0,scrollbars=1,width=626,height=436"); } }

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

    3. Скрипт отвечающий за класс кнопок

    Данный скрипт определяет, что все элементы класса.social_share считаем кнопками шаринга.
    Его тоже нужно вставить сразу после предыдущих вставок.

    $(document).on("click", ".social_share", function(){ Share.go(this); });

    Иногда если способ не работает, подключение скриптов осуществляется перед закрывающимся тегом body в подвале

    4. html разметка

    В нужном месте вставляем код. В WordPress это нужно сделать внутри цыкла в файле single.php

    5. СSS стили

    Как я писал раньше, результат будет без картинок, а просто украшен стилями.
    Добавляем данный код в Файл стилей вашего сайта.

    Share_this{margin-top:15px;width:100%;} .social_share{float:right;margin-left:5px;color:#fff;padding:2px;} .social_share:hover{cursor:pointer;} .vk:hover{background:#ff6600;} .fb:hover{background:#ff6600;} .tw:hover{background:#ff6600;} .gg:hover{background:#ff6600;} .ok:hover{background:#ff6600;} .mr:hover{background:#ff6600;} .lj:hover{background:#ff6600;} .vk{background:#339900;} .fb{background:#339900;} .tw{background:#339900;} .gg{background:#339900;} .ok{background:#339900;} .mr{background:#339900;} .lj{background:#339900;}

    Вот и все. Если проделанная работа выполнена правильно, то кнопки должны прекрасно выполнять свою функцию.
    На этом все, спасибо за внимание 🙂