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


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

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

Преимущества и недостатки

Любой пользователь интернета при просмотре сайтов наверняка замечал на них кнопки соц. сетей, пример такие, как представлены у меня на блоге в конце статьи. Чаще всего, это небольшие значки, на которых расположена символика социальной сети и надписи типа: «рассказать другу», «поделиться» и так далее. Размещение таких кнопок принесет выгоду как автору блога, так и его читателям.

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

Преимущества

  1. Возможность легко и просто делиться полезным контентом в социальных сетях.
  2. Увеличение посещаемости созданного интернет-проекта.
  3. Увеличение популярности.
  4. Простота установки.
  5. Увеличение трафика из соц. сетей.
  6. Это один из бесплатных способов продвижения.
  7. Поисковики любят, когда посетители делятся в соц. сетях.
  8. Доступность многих социальных сетей в одном коде.
  9. Огромный выбор дизайна.
  10. Выбор расположения кнопок.
  11. Возможно установить плагин.

Недостатки

  1. Может снизиться скорость загрузки страниц.
  2. При узкоспециализированной направленности интернет-проекта, можно не получить желаемого эффекта.

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

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

  1. Pluso.ru

    Pluso.ru

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

    Сервис предлагает более трехсот вариантов разных кнопок! Можно очень просто выбрать наиболее понравившиеся.

    Установка происходит буквально в один клик. Имеется статистика переходов.

  2. Share42.com

    Share42

    Это, наверное, один из самых интересных онлайн сервисов, при помощи которого имеется возможность сгенерировать кнопку по нескольким параметрам: размеру и внешнему виду. Кроме этого можно выбрать, как будет располагаться панель с кнопками (горизонтально или вертикально). Можно также указать кодировку. После выбора всех необходимых настроек, сгенерированный скрипт нужно скачать и поместить на свой интернет-проект в необходимое место. В основном, сразу после статьи.

  3. Tech.Yandex.ru

    Tech.Yandex.ru

    Этот удобный сервис от Яндекса позволяет быстро и просто разместить специальный блок под названием «Поделиться». Кнопки очень удобные и пользователь сможет очень быстро добавить анонс статьи в свой аккаунт. Для установки необходимо поместить скрипт в необходимое место на созданном сайте.

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

    Далее система автоматически сгенерирует исходный код, который нужно будет установить у себя на блоге. К основным преимуществам этого сервиса можно отнести то, что скрипт не ставит на созданном блоге исходящие ссылки. Также имеется возможность подключения Яндекс.Метрики, для ведения статистики.

  4. Social-Likes

    Social-Likes

    Данный сервис предлагает пользователям разместить на своем сайте очень красивые и стильные кнопочки социальных сетей. Созданная сервисом форма использует css и javascript. Сгенерированная форма будет прекрасно вписываться в дизайн любого интернет-проекта. Кнопки «лайков» выполнены с использованием современной технологии jquery. Подключение очень простое и не вызовет трудностей даже у начинающих. Загрузка происходит очень быстро.

  5. Odnaknopka.ru

    Odnaknopka.ru

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

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

  6. Pip.Qip.ru

    Pip.Qip.ru

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

Итак, установка кнопок социальных сетей для сайта происходит очень просто, и не вызовет затруднений даже у начинающих интернет-пользователей. По желанию, можно установить или же кнопки всех имеющихся сетей, или же выбрать только какие-то определенные сети. Для этого необходимо использовать официальные виджеты или сторонние онлайн сервисы. Наиболее большой популярностью пользуются кнопочки, установленные на личных блогах, или же на новостных или развлекательных интернет-проектах. :)

P.S. Спасибо за внимание. А какой сервис предпочитаете вы? Жду ваши комментарии. :)

blogoshpora.ru

Как добавить на свой сайт блок с кнопками, ведущими на ваши страницы или группы в социальных сетях, а так же на RSS ленту

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Можно, конечно же, и плагин для этой задачи использовать, но сделать самому не так уж и сложно, да и одним плагином в WordPress будет меньше, тем более, что их у меня и так достаточно много трудится (см. статью по приведенной ссылке). Иконки соцсетей я взял из бесплатного конструктора кнопок Share42, о котором уже довольно подробно писал (надеюсь, что Димокс против этого возражать не будет).

Теперь останется только скопировать ссылки (адреса ваших страниц в соцсетях, если вы их уже создали). Читайте об этом в следующих постах:

А также я посчитал уместным добавить кнопку подписки на RSS ленту и кнопку Feedburner для подписки на новости сайта по Емайлу.

Создаем спрайт из кнопок и вставляем Html код на сайт

После того, как все нужные группы и страницы в соцсетях вы создали, а значит получили все необходимые ссылки, можно озадачиваться добавлением кнопок на сайт. Можно, конечно же, в соответствии с моим постом про иконки и значки для сайта, подобрать для каждой соцсети подходящую иконку и при необходимости уменьшить ее размер до необходимого в простенькой программе FastStone Image Viewer и бесплатном онлайн-фотошопе.

Но это не есть лучший вариант. Почему? Ну, потому что для подгрузки каждой картинки соцсети будет осуществляться отдельный запрос к вашему серверу. Будет у вас десяток иконок — значит десять запросов, которые по-любому будут создавать дополнительную нагрузку на сервер и снижать скорость загрузки страниц. Нам такое расточительство не подходит, тем более, что уже давно изобрели CSS спрайты.

Я решил не изобретать велосипед (создавать спрайт), а использовал тот, что создает конструктор Шаре42 (ссылка на описание работы с ним приведена чуть выше). В нем можно выбрать те соцсети, иконки которых вам будут нужны, и вместе с кодом вы получите CSS спрайт, т.е. физически один графический файл, на котором будут размещены все нужные вам иконки соцсетей и подписки на RSS ленту (и Емайл, если потребуется).

Я выбрал четыре основных сети и пару иконок для подписки на новости с размером иконок 24 на 24 пиксела, поэтому мой спрайт выглядит так (FriendFeed, правда, туда еще затесался, но это не беда):

Спрайт для кнопок ведущих на ваши группы в соцсетях

Спрайт для кнопок ведущих на ваши группы в соцсетях

Теперь у нас есть все ингредиенты — ссылки на группы или страницы соцсетей и иконки для их отображения на сайте. Осталось все это только правильно приготовить, т.е. сверстать. Мой блог работает на WordPress, поэтому код с кнопками я буду вставлять в один из шаблонов, из которых состоит используемая мною тема оформления. В моем случае он называется sidebar.php. Html код при этом получается крайне простой:

<a rel="nofollow" href="http://feeds.feedburner.com/Ktonanovenkogoru" title="RSS сайта KtoNaNovenkogo.ru" target="_blank"></a> <a rel="nofollow" href="http://feedburner.google.com/fb/a/mailverify?uri=Ktonanovenkogoru" title="Подписаться по e-mail" target="_blank"></a> <a rel="nofollow" href="https://vk.com/ktonanovenkogoru" title="KtoNaNovenkogo.ru В Контакте" target="_blank"></a> <a rel="nofollow" href="https://twitter.com/KtoNaNovenkogo" title="KtoNaNovenkogo.ru в Twitter" target="_blank"></a> <a rel="nofollow" href="http://www.facebook.com/KtoNaNovenkogo.ru" title="KtoNaNovenkogo.ru в Facebook" target="_blank"></a> <a rel="nofollow" rel="publisher" href="https://plus.google.com/107949091476526100342" title="KtoNaNovenkogo.ru в Google+" target="_blank"></a>

На всякий случай я добавил rel="nofollow", чтобы эти ссылки не учитывали поисковики при распределении весов на сайте. Атрибут Title в теге гиперссылки A служит для отображения заключенного в него текста при подведении курсора мыши к иконке. Я не стал им пренебрегать, ибо не для всех посетителей сайта иконки могут представлять исчерпывающую информацию. Выглядеть это будет примерно так:

Подпись к кнопкам через Title

Подпись к кнопкам через Title

Привязываем спрайт к Html коду и оформляем кнопки в CSS

Однако очевидно, что для описанного выше кода нужно будет еще несколько строк в файле стилей добавить (у меня он называется style.css и живет в папке с используемой мною темой оформления — читайте про них по приведенной чуть выше ссылке). У меня получилось примерно так (может быть и корявенько, но работает):

.twit {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px 0;padding:0;outline:none;background:url(путь до файла со спрайтом/icons.png) -0px 0 no-repeat;} .vkon {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:18px 20px 0px 0;padding:0;outline:none;background:url(путь до файла со спрайтом/icons.png) -24px 0 no-repeat;} .face {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px 0;padding:0;outline:none;background:url(путь до файла со спрайтом/icons.png) -48px 0 no-repeat} .goog {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px 0;padding:0;outline:none;background:url(путь до файла со спрайтом/icons.png) -96px 0 no-repeat} .rsskt {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px 55px;padding:0;outline:none;background:url(путь до файла со спрайтом/icons.png) -120px 0 no-repeat} .emailkt {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px 0;padding:0;outline:none;background:url(путь до файла со спрайтом/icons.png) -144px 0 no-repeat}

CSS свойство display:inline-block позволяет придать тегу гиперссылки A одновременно свойства строчного и блочного элемента. По отношению к внешним и соседним тэгам он будет вести себя как строчный (т.е. рядом с ним могут располагаться и другие строчные элементы), а вот по отношению к вложенным в него тегам он будет вести себя как блочный (т.е. можно будет задавать его размеры как по ширине, так и по высоте, а еще задавать отступы с помощью марджинов и педдингов).

CSS свойство vertical-align:bottom задет выравнивание по вертикали, что наверно понятно из его названия. Практически для всех элементов в Html коде оно означает выравнивание между собой строчных элементов с текстом относительно их базовой линии. Просто поэкспериментируйте и поймете его назначение.

С помощью width и height мы задаем размеры отображаемого блока, который должен совпадать с размером иконки соцсети. Свойство outline:none используется, чтобы в некоторых браузерах при клике на ссылку вокруг нее не появлялась рамка. С помощью margin я задал отступы от верха и от соседних иконок, если не ошибаюсь (года три назад делал, когда CSS активно изучал).

Ну, и самое интересное. С помощью сборного правила background мы определяем, какая именно область нашего спрайта будет отображаться на данном конкретном месте в виде фона (в нашем случае этот фон подкладывается под гиперссылку). Объяснять как так получается очень долго, поэтому читайте приведенную по ссылке статью и все станет понятно (там и наглядные примеры приводятся). Если лень, то просто поэкспериментируйте с циферками, которые, как вы могли заметить, не даром кратны 24.

Да, файл спрайта залейте по ФТП на свой сайт и укажите в background до него путь (в относительном или абсолютном виде). Вот и все. Если не получится, что читайте внимательнее материалы по приведенным выше ссылкам, ну, а если совсем уже ничего не получится, то описывайте вашу ситуацию в комментариях (подробненько — для вставки кода на забудьте его в теги PHP заключить с квадратными скобками).

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Подборки по теме

Рубрика: Верстаем с нуля, Используем соцсети

ktonanovenkogo.ru

Самые "чистые" социальные кнопки для сайта — Staurus.net

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

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

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

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

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

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

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

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

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

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

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

<script type="text/javascript" src="ПУТЬ К ФАЙЛУ/share.js"></script>или загрузка напрямую:

<script src="//staurus.net/airee_cdn.jsdelivr.net/jquery.goodshare.js/4/goodshare.min.js"></script>

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

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

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

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

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

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

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

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

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

staurus.net

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

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

к оглавлению ↑

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

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

Мечта каждого владельца сайта, если все его записи будут репостить читатели на своих страницах в одной из социальных сетей. Сейчас больше всего идет спрос на Вконтакте, Facebook, Twitter и Одноклассники. Я бы еще добавить LiveJournal, liveinternet и Blogger. Вот эти кнопки желательно добавить на сайт для полного удобства пользователя.

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

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

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

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

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

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

Чем сегодня можно воспользоваться, чтоб добавить социальные кнопки для сайта:

  1. Сервис uptolike.
  2. Социальные кнопки яндекс.
  3. Добавление вручную каждой соц сети отдельно.
  4. Сервис Pluso.
  5. С помощью плагинов для WordPress (для ленивых).

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

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

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

к оглавлению ↑

Uptolike

В данный момент я сам пользуюсь этим сервисом, понравился он мне. Кроме удобства, сервис uptolike имеет несколько привилегий перед другими себе подобными.

  • Широкий выбор среди кнопок социальных сетей;
  • Кнопки адаптированы под мобильные устройства;
  • Возможность цитирования в соц сетяъ любого участка текста;
  • Можно добавить кнопку наверх;
  • Возможность добавления всплывающего окна на подписку в группу Вконтакте;
  • Выбор размера иконок;
  • Выбор стиля иконок для сайта;
  • Добавить эффект при наведении;
  • Изменение фона кнопки, цвета текста, фона счетчика;
  • Увеличение или уменьшение текста в счетчике.

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

Кроме этого, что еще может сервис uptolike.

Поделиться Сделать репост страницы.
Добавить лайки Пользователь имеет возможность поблагодарить автора.
Подписаться Пользователь имеет возможность подписаться на группу Вконтакте.
Поделиться изображением Любой желающий сможет поделиться понравившейся картинкой с сайта.
Опрос При необходимости добавить и провести опрос на сайте.
Добавить рейтинг записей С помощью рейтинга можно увидеть, что нравится читателям а что нет.
Добавить счетчик посещаемости Установить на сайт невидимый счетчик посещаемости.
Плагин для WordPress Кто ленится добавлять код, есть возможность установить плагин.
Плагин для Joomla Плагин для Drupal
Добавить модуль Bitrix

Как на все это посмотреть, выбрать и добавить на свой сайт? Переходим на сервис и нажимаем на первый пункт «Поделиться». В этом случае вы добавите кнопки соц сетей для сайта в конце каждой статьи.

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

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

В дополнительных настройках отмечаем пункт Цитирование. Пользователь сможет выделить часть текста и поделиться ним. Отключаем кнопку наверх и убираем дополнительную кнопку. Так же можно добавить всплывающее окно, будет добавлена возможность сразу подписаться на группу.

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

Если у вас сайт на WordPress, открываем файл single.php и вставляем готовый код сразу после окончания контента странице. Обновляем страницу и смотрим, что получилось. Сложного ничего нет.

к оглавлению ↑

Яндекс

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

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

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

к оглавлению ↑

Ручной метод добавления

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

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

к оглавлению ↑

Вконтакте

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

Кнопка поделиться

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

к оглавлению ↑

Pluso

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

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

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

После всех этих действий, снизу будет находиться готовый код для вставки на страницу. Если нужно вставить на главную страницу, ковыряемся в файле index.php, если во все ваши записи, добавляем код в файл single.php сразу после окончания записи.

к оглавлению ↑

WordPress

Если вы ничего не понимаете в этом коде, что куда нужно копировать и как все это работает, выход есть. Если у вас движок WordPress, можно установить плагин, с помощью которого у вас появятся кнопки социальных сетей. Сегодня таких плагинов просто большое количество. Заходи в админку — Плагины. Можно сразу написать в поиске плагинов «соц кнопки», «social» или «вконтакте». Я уверен, вы что то найдете.

Среди большинства таких подобных плагинов для WordPress, посмотрев на рейтинг, больше всего ставят именно такие:

  1. Social Share Buttons for WordPress.
  2. Social.
  3. Social Media Feather — lightweight social media sharing and follow buttons.

На самом деле подобных таких плагинов очень много, нужно устанавливать и перебирать, какой вам больше понравится, правильно работает, что показывает и как его можно настроить под себя. Разберем на примере первый такой плагин Social Share Buttons for WordPress.

Сам плагин на русском языке, проблем с этим не будет. После установки, слева в меню появится новая кнопка «Share Buttons». В главных настройках ставим логотип сайта и пишем текст перед социальными кнопками.

Кнопки соц сетей для WordPress

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

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

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

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

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

nesmelov.ru

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

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

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

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

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

Блок «Поделиться» от Яндекса

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

Тут же вам будет показан код, который нужно скопировать и вставить в то место на сайте, где вы хотите их видеть. Значит, самое время определить это место! Чаще всего блок «Поделиться» ставят: В начале статьи; В конце статьи; Сбоку.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

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

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

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

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

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

Кнопки от Pluso

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Из настроек, прежде всего вам необходимо выбрать, какие социальные сети будут видно пользователю всегда, а какие только при нажатии на плюс. Фишка этого блока в том, что при нажатии на плюсик вы человек получает возможность поделиться записью еще в 20-30 сервисах.

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

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

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

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

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

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

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

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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Курс WordPress-Ученик

12 фишек без которых Вы гарантированно не создадите полноценный сайт на WordPress!

Смотреть курс

webformyself.com

Кнопки соцсетей для сайта — обзор виджетов кнопок социальных сетей

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

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

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

1. Блок «Поделиться» — Технологии ЯндексБлок «Поделиться» помогает посетителям сайта быстро публиковать ссылки на понравившиеся страницы в соцсетях и блогах. Создайте блок «Поделиться» с помощью конструктора, а дополнительные параметры ищите в документации.

Блок Поделиться - Технологии Яндекс

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

Лёгкий способ получить ссылки на сайт - QIP.RU

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

Кнопки для добавления контента в соцсети - Pluso

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

Сервис социальной активности - UpToLike

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

Одна кнопка! - для всех сервисов закладок и соцсетей

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

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

Красивые социальные кнопки для сайта - goodshare.js

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

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

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

Красивые кнопки лайков соцсетей с использованием jQuery - Social Likes

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

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

Share Buttons - AddThis

2. Get the Share Button — ShareThisВыберите платформу: WordPress, Drupal, Joompla!, Blogger, TypePad, tumblr, Newsletter, IOS & Android, другое. Выберите стиль снопок (кнопки или тулбар), Настройте кнопки: выберите сервисы (кнопки поделиться или социальные плагины), укажите размер кнопок, другое. Получите код.

Get the Share Button - ShareThis

3. Share buttons for WordPress, Tumblr, Drupal, Joomla and all website — ShareaholicСделайте так, чтобы посетители сайта могли поделиться вашим контентом с друзьями в один клик. Выберите: тему, размещение, размер, счётчик, выравнивание и другие настройки кнопок и получите код.

Share buttons for WordPress, Tumblr, Drupal, Joomla and all website - Shareaholic

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

Social Sharing - Po.st

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

Share Buttons for Any Website - AddToAny

Короткая ссылка: http://goo.gl/XjatQ7

www.chuvyr.ru

Как добавить Яндекс ссылки на социальные сети?

Что такое «социальные ссылки» Яндекса?

Современные реалии ранжирования Яндекса таковы, что факторов влияющих на позиции сайта в поиске от года к году становится все больше и больше. И не последнее место среди этих факторов занимают социальные сигналы. Т. е. при определении позиций вашего сайта в поиске Яндекс учитывает и «популярность» вашего ресурса в социальных сетях, в частности, ссылки и переходы на сайт из соц. сетей. Поэтому многие ведущие компании рунета создают себе не только корпоративные сайты с описанием товаров и услуг, но и активно развивают свои «представительства» в популярных социальных сетях. При наличии у организации сайта и страниц в социальных сетях Яндекс может добавить их в сниппет сайта. На данный момент существует возможность добавить социальные ссылки для ВКонтакте, Facebook, LiveJournal, Twitter и YouTube.

Зачем нужны ссылки на социальные профили в сниппете?

С их помощью можно получить 3 весомых плюса:

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

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

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

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

Ничего сложного … Для начала заведите в подходящих вашей тематике социальных сетях официальные профили компании. Называть их лучше именем организации, а так же использовать в оформлении фирменный стиль компании. Следующим шаг - добавьте ссылки на ваши странички и группы на главную страницу своего сайта (или ещё лучше в основной шаблон сайта). Мы рекомендуем добавлять их в «подвале» сайта, если конечно основная доля продаж компании не построена через социальные сети. А для закрепления успеха вам останется добавить эти же ссылки в Яндекс.Справочник. Для этого зайдите через Яндекс.Вебмастер в раздел «География сайта» → «Адреса и организации» и в дружелюбном интерфейсе Яндекс.Справочника заполните ссылки на социальные профили (по одному на строчку).  После этого набирайтесь терпения и ждите 2-3 недели. С очередным апдейтом поисковой системы значки популярных мировых компаний будут украшать ваш сниппет. Важно! Прежде, чем добавлять соц. ссылки на сайт и Яндекс.Справочник, мы рекомендуем вывести каждую из групп на достойный уровень. Вряд ли пользователю будет интересна и полезна группа, например, ВКонтакте с одной записью на стене и 5 участниками.

Условия отображения ссылок в сниппете

Социальные ссылки по вашему сайту будут отображаться поисковиком в сниппете, только если:

  • вы набрали запрос, по которому ваш сайт занимает первое место;
  • добавили 2 и более социальных аккаунтов;
  • по поисковому запросу выводится главная страница сайта,
  • вы представляете реальную организацию.

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

Понравилось? Репост!

studiof1.ru