Здравствуйте, дорогие читатели блога nazyrov.ru. Сегодня у меня довольно заезженная тема, а именно – кнопки «Поделиться» для сайта. Зачем сайту нужны такие кнопки, думаю догадаться не сложно. Если у вас интересный материал, то пользователи будут им активно делиться в социальных сетях, а это мощная и абсолютно бесплатная раскрутка.
На сегодняшний день существует немало сервисов, где можно сгенерировать блок с подобными кнопками, а затем просто скопировать и вставить код того блока себе на сайт. О таких сервисах я и хотел бы сегодня рассказать, поэтому, если вы далеко не новичок в этой теме, то статья вряд ли окажется для вас полезной.
Но перед тем как приступить к обзору самых популярных и интересных сервисов, предлагаю прочесть статью — уникальные кнопки соц. сетей для сайта. В той статье я рассказывал как установить абсолютно уникальны кнопки «Поделиться» на блог.
Social share плагин социальных сетей. Кнопки Поделиться.
Кнопки поделится в соц. сетях от самых популярных сервисов
[aspan]Кнопки от Яндекс[/aspan]. Яндекс предлагает интересный и очень удобный конструктор для генерирования блока «Поделиться». Можно указать на выбор абсолютно любые популярнейшие социальные сети, а затем скопировать готовый код. Код представляет собой простой скрипт.
Внешний вид блока можно настроить как угодно – просто иконки, иконки со счетчиком репостов или просто иконки уменьшенного размера.
[aspan]share42.com[/aspan] – тоже мощнейший конструктор, позволяющий выбрать интересующие кнопки и настроить внешний вид блока «Поделиться». Если к сайту подключить библиотеку jQuery, то к кнопкам можно добавить счетчик, который будет подсчитывать количtство поделившихся.
Внешне такой блок с кнопками будет выглядеть примерно вот так:
[aspan]share.pluso.ru[/aspan] – я довольно долгое время пользовался именно этими кнопками. Кнопки «Поделиться» от Pluso отлично настраиваются под дизайн сайта. Можно выбрать любые интересующие соц. сети и понравившийся дизайн кнопок.
[aspan]uptolike.ru[/aspan] – позволяет сгенерировать блок с кнопками «Поделиться», при этом блок будет адаптивным для мобильных устройств. Внешний вид и цвет кнопок тоже хорошо настраивается в конструкторе.
Помимо кнопок репоста, можно добавить кнопку вверх для сайта и всплывающее окошко с предложением подписаться в группу.
Не работает кнопка ПОДЕЛИТЬСЯ в Одноклассниках. 2017-05-13
Вышеперечисленные сервисы позволяют сгенерировать целый блок с кнопками «Поделиться», но бывают случаи, когда нам необходимо добавить лишь одну соц. сеть, а не целый букет. В таком случае глупо использовать сторонний конструктор для добавления одной кнопки «Поделиться», гораздо проще использовать API необходимой социальной сети.
И вовсе не стоит пугаться этого страшного слова. Добавить кнопку «Поделиться» при помощи API сможет любой, просто повторяйте действия, которые я опишу.
Кнопка «Поделиться» ВКонтакте
Для того, чтобы сгенерировать кнопку поделиться ВКонтакте для своего сайта, перейдите на [aspan]страницу виджетов ВКонтакте[/aspan].
На этой странице вы можете указать текст на кнопке, а так же выбрать или отключить счетчик. После того, как вы сконструировали желаемую кнопку, можете скопировать код кнопки и вставить ее на свой сайт.
Теперь, вам необходимо перейти по ссылке внизу страницы к подробной [aspan]документации виджета[/aspan], и подключить виджет согласно инструкции.
Facebook кнопка «Поделиться»
Кнопка «Поделиться» на фейсбук делается аналогичным образом. Для этого перейдите на [aspan]страницу конструктора[/aspan], в списке различных кнопок найдите кнопку «Поделиться» и выберете значение «Веб-платформа».
В появившимся конструкторе можете настроить внешний вид кнопки и получить код.
Код будет состоять из двух частей. Первую часть необходимо вставить после открывающего тега . Этим кодом вы включаете SDK для JavaScript.
Вторую часть кода необходимо вставить в то место, где должна выводиться кнопка «Поделиться» на Facebook.
Делаем кнопку «Поделиться» в одноклассниках
Кнопка поделиться в одноклассниках вставляется так же при помощи небольшого куска кода. Чтобы получить этот код, перейдите на страницу [aspan]социальных виджетов одноклассников[/aspan], и в конструкторе настройте кнопку «Поделиться».
После этого скопируйте предоставленный код, и вставьте в необходимое место на сайте.
Вот мы и рассмотрели все наиболее популярные способы вставки кнопок «Поделиться» для сайта. Выбирайте тот способ, который больше всего подходит вам.
Источник: nazyrov.ru
Кнопка одноклассники поделиться на сайт
Раскрутка в соцсетях
Опубликовано 06.04.2017 Обновлено 06.04.2017
Привет ! Сегодня вы узнаете как можно очень просто и быстро добавить на свой сайт кнопку от соцсети одноклассники. С помощью данной кнопки можно делаться в одноклассниках понравившимся контентом на сайте. Вы сможете выбрать стиль кнопки, размер, форму, текст, добавить счётчик. Кнопка добавляется на сайт с помощью кода. Кнопку одноклассники очень легко сделать !
Пример кнопок:
Как сделать кнопку одноклассники для сайта ?
Зайдите на сайт одноклассники для разработчиков (https://apiok.ru). На главной странице нажмите на вкладку — ОК для сайтов .
Далее, на следующей странице нажмите на вкладку — Кнопка «Класс» .
Далее, у вас откроется страница создания кнопки. Здесь вы можете настроить и создать кнопку одноклассники.
— Ссылка, укажите здесь URL адрес вашего сайта.
— Внешний вид, здесь вы можете выбрать размер кнопки, форму, добавить счётчик и выбрать текст кнопки.
— Дополнительные данные, не обязательно заполнять. Можно загрузить своё изображение для кнопки.
Далее, вы сможете наблюдать как кнопка будет отображаться на вашем сайте. Скопируйте код кнопки.
Далее, код кнопки вам нужно вставить на сайт, на страницу где будет отображаться кнопка.
Всё готово ! На вашем сайте будет отображаться кнопка «Класс» от соцсети одноклассники !
Остались вопросы ? Напиши комментарий ! Удачи !
Источник: info-effect.ru
Делаем кнопки социальных сетей самостоятельно
Это уже далеко не первая статья, которая затрагивает социальные кнопки на сайте. А все почему? Да потому что без них никуда. В этот раз мы будем делать кнопки социальных сетей самостоятельно, т.е. без использования сторонних плагинов и сервисов, типа socialtools.
Преимущества ручного размещения
Чаще всего к такому методу приходят тогда, когда не хотят зависимости от сторонних сервисов. Допустим, что тот же UpToLike или SocialTools лёг, соответственно, кнопки на вашем сайте тоже легли, так как запросы все идут через него. Вот здесь и начинается работа над ускорением блога, загрузки страницы и т.д. В общем, кому этот метод понадобился, рассмотрим вариации.
Кнопка поделиться Twitter
Переходим на официальный сайт представителя, т.е. сюда
https://about.twitter.com/ru/resources/buttons
и выбираем подходящее для себя оформление и тип кнопки. Вариантов для выбора достаточно, кроме того, здесь же можно взять и кнопку «Читать». Каждая из них настраивается, после чего выводится готовый код для вставки на сайте. Пример такого варианта можете увидеть на скрине:
Кнопка поделиться Вконтакте
Принцип размещения от предыдущей ничем не отличается. Переходим на страницу документации публикации ссылок Вконтакте по ссылке:
http://vk.com/dev/Share
Также выбираем оформление, которое может быть как со счётчиком, так и без. Всё по вашему желанию и усмотрению. В итоге получаем готовый код для размещения. Вот, собственно, скрин:
Кнопка поделиться Одноклассники
Здесь уже настройки более интересные. Переходим в документацию новой кнопки класс по адресу:
http://apiok.ru/wiki/pages/viewpage.action?pageId=42476656
Кнопка регулируется как по виду, так и по размеру. Счетчик можно выставить справа и сверху. Результат выводимой кнопки сразу перед глазами, готовый код конфигурируется ниже в режиме онлайн, в соответствии с выбираемыми вариантами оформления.
Кнопка поделиться Facebook
Документация вся на английском, поэтому у кого проблемы с этим языком, то придется не так уж и просто. Хотя, все, что вам понадобится, это получить код с этой страницы:
https://developers.facebook.com/docs/plugins/share-button?locale=ru_RU
Жмем по кнопке «Get Code» и получаем необходимый код для вставки на сайте.
Кнопка поделиться Mail.ru
Очень схожее руководство и оформление с Одноклассниками. Настройки абсолютно такие же, и если вы разобрались с предыдущими, то и с этими проблем не возникнет. Получаем кнопку здесь:
http://api.mail.ru/sites/plugins/share/
Если возникнут вопросы, то ниже настроек, как и на вышеописанных сервисах, есть ссылка на детальную документацию.
Более простой вариант — All in One
Вам показалось это все сложным? Возможно, потому как все эти кнопки нужно получить, влепить код и скрипты на сайт, но если вы в этом разбираетесь, то это всего нескольких минут дело. Все скрипты можно поместить в один файл, и подключить его в необходимом месте. Но если вам всё равно это кажется сложным, то есть более простой вариант. Для этого нам снова придется пойти на сторонний сервис и скачать готовую библиотеку, которая подключает всё необходимое одним файлом javascript, а также выводит в красивом оформлении посредством готового файла стилей css. Переходим на этот сервис:
http://sapegin.github.io/social-likes/ru/
Играемся с настройками, выбираем необходимое количество социальный сетей, скин, вид, и после этого качаем готовый вариант файлов кликом по кнопке «Скачать кнопки» в самом низу. В архиве получится 3 файла, из которых 2 уже были описаны выше, а 3-й выступает примером для вставки блоков div на сайте.
Заключение: какой из этих вариантов больше подойдёт вам, решайте сами. Оба они исключают зависимость от посторонних сервисов, но если так рассуждать, то не будем забывать, что сами социальные сети очень часто тупят, а соответственно и тянут за собой сайт(увеличивают время загрузки страницы). Так что, здесь противоречие одно за другим. Желаю вам успехов!
- 5
- 4
- 3
- 2
- 1
не скупись ставь лайк
Подписка на обновления:
Рябухин Максим
Я фрилансер веб-разработчик. Последние несколько лет занимаюсь версткой и веб-программированием на PHP и Javascript. Если вам понадобится помощь с блогом WordPress, либо адаптация сайта, я всегда рад помочь.
Источник: myfreelanceblog.ru