Как создать кнопки для сайта поделится с друзьями

Зачем нужны кнопки «Поделиться» на сайте

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

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

В ВК кнопка поделиться называется «Опубликовать ВКонтакте», в Одноклассниках «Поделиться», в Твиттере — «Твитнуть», в Фейсбуке — Share.

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

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

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

Разработка seo-сайтов

Как создать кнопки «Поделиться» в сервисе usocial pro?

Как добавить закладки в Яндекс с другого браузера

Разработка SEO-сайтов с пожизненной гарантиейСоздаем невероятные SEO-сайты, оптимизированные по 69 параметрам уже на этапе разработки

Как разместить кнопку поделиться на сайте.

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

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

    Плюсы такого способа:
  • единообразие во внешнем виде кнопок
  • возможность просмотреть статистику в одном месте

Например, такой сервис есть у Яндекса, Pluso, Social Likes и другие.

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

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

Нужен настоящий SEO-сайт и интернет-реклама ? Пишите, звоните:

Наша почта:

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


Единая справочная: 8 (843) 2-588-132
WhatsApp: +7 (960) 048 81 32
Оставить заявку

Источник

Добавление кнопки «Нравится» и «Поделиться» в соцсетях на сайт (SHARE IT)

Не просто кнопка, а целый блок кнопок предлагает нам поисковая система Yandex. Довольно удобно, быстро создается и настраивается, а готовый код добавляется на любую страницу сайта или в шаблон. На данный момент используется 12 (Я.ру, Вконтакте, Facebook, Twitter, Одноклассники, МойМир, Livejournal, Friendfeed, Мой круг, Google+, Pinterest, Surfingbird) самых популярных социальных сетей в России, при этом данный сервис постоянно обновляется и улучшается командой яндекса. Кстати, кнопки «Поделиться» (Share button) очень полезны для поискового продвижения (SEO).

Кнопка «Поделиться» в соцсетях от Яндекса

Удобный в создании и добавлении на сайт блок кнопок социальных сетей «Поделиться» (SHARE buttons) от Яндекса.

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

Как активировать подписку Яндекс плюс на 3 месяца бесплатно
Источник

Создание блока «Поделиться» для сайта

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

Недостатки популярных сервисов «share»

Большинство популярных скриптов для добавления на сайт социальных иконок и кнопок обладают одним или несколькими из следующих недостатков:

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

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

HTML-разметка

В результате самостоятельной разаработки блока получается HTML-код, где значение атрибута data-type для элементов является условным названием конкретного сервиса — VK (vk), OK.ru (ok), Twitter (tt), Facebook (fb), Google Plus (gp), LiveJournal (lj), Evernote (en) и Pocket (pt), а data-btn для блока — перечень необходимых подключаемых сервисов через запятую в виде их условных названий:

По мнению автора, с точки зрения SEO использование пустого элемента вместе с aria-label предпочтительнее, нежели добавление ссылки со скрытым текстом или без анкора.

CSS-оформление

Чтобы не загружать на сайт лишние спрайты и обеспечить масштабирование кнопок, изображения для них будут выводиться через CSS в виде закодированного в base64 SVG (для удобочитаемости в приведенном примере данные SVG отсутствуют). Соответствующие иконки взяты с сайта Simple Icons и находятся в свободном доступе. Для высоты, ширины и отступа от кнопок используются относительные единицы измерения — em . Таким образом, масштаб блока и его дочерних элементов будет зависеть от родительского размера шрифта.

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

Процесс стилизации кнопок можно облегчить благодаря SCSS:

JavaScript

JS решает две главные задачи — генерацию кнопок в блок с идентификатором #shar3-box и открытие социального сервиса по клику на соответствующую ему кнопку. Обработчик события click добавляется на сам блок, после чего проверяется, кликнул ли пользователь на дочерний элемент , и, если так, посредством атрибута data-type открывается необходимый социальный сервис. Таким образом, используется один обработчик для всего блока, а не несколько для каждой из кнопок.

Для правильной работы скрипта понадобятся вспомогательные функции, обеспечивающие открытие нового окна и парсинг основных необходимых meta-данных о странице: url, заголовок и описание .

Пример работы блока «Поделиться»

Скрипт share отлично работает во всех современных браузерах. В Internet Explorer 11 для метода Object.assign() необходимо добавить полифилл.

Для вкрапления блока «поделиться» на страницу достаточно добавить соответствующий CSS, поместить скрипт перед закрывающим тегом и вызывать функцию shar3() . Необходимые для вывода кнопки настраиваются непосредственно в блоке:

В заключение

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

Источник

Кнопки поделиться в соцсетях для сайта: как установить и изменить по своему вкусу

Кнопки поделиться в соцсетях для сайта являются необходимостью, так как они оказывают положительное влияние на индексацию сайта (ссылка в социальной сети ускоряет процесс), а также на поведенческие факторы. Установить их нужно обязательно, и в этой статье я покажу вам, как это сделать.

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

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

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

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

Как общаться с девушкой на сайте знакомств примеры

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

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

  • Зайдите на сайт Share42.
  • В пункте 1 из трёх представленных вариантов выберите размер иконок, который вам необходим.

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

  • В списке ниже выберите, какие именно кнопки социальных сетей должны быть на вашем сайте. Чтобы выбрать ту или иную иконку, просто кликните на неё мышкой.

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

Обратите внимание, что кнопки, которые поддерживают счётчик (подсчёт и показ количества лайков), отмеченный оранжевой точкой.

  • Переходим ко второму пункту. Здесь нас интересует строка «Тип панели с иконками» — необходимо выбрать горизонтальное или вертикальное положение на сайте. Остальное можно оставить по умолчанию.

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

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

Если в социальных иконках вы выбрали кнопку «RSS», то вам также нужно указать ссылку на ленту новостей в соответствующей строке.

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

Также можно убрать галочку с опции «Добавить иконку сайта Share42.com», если вы не хотите рекламировать этот сервис.

  • В пункте 3 вы можете воспользоваться кнопкой для предпросмотра, посмотреть, как будут выглядеть ваши кнопки поделиться в соцсетях для сайта, и подправить, если что-то не так. Если всё выглядит нормально, то нажмите на «Скачайте готовый скрипт». Файл представляет собой архив с картинкой и скриптом. Разархивируйте его у себя на компьютере в папку «Share42» (папку можно переименовать, но лучше оставить так).
  • Переходим к пункту 4, собственно, к установке кнопок на сайт. Подключаемся к сайту с помощью FTP и закачиваем куда-нибудь (лучше в корневой каталог) распакованную ранее папку Share42 со всем её содержимым. В подпункте 3 пункта 4 указываем путь до этой папки на сайте. Если вы оставили папку с названием «Share42» и закачали её в корневой каталог, то просто укажите там https://example.ru/share42/ (где example.ru – это адрес вашего сайта).
  • В подпункте 4 пункта 4 выберите WordPress (если у вас другая CMS, то выберите свою).
  • Возьмите код из подпункта 5 пункта 4 и поместите его в файл своего шаблона, туда, где необходимо вывести кнопки социальных сетей.
Как обновить браузер мейзу

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

Как установить свои иконки кнопок

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

  • Нарисуйте иконки одинакового размера, расположив их в одном файле в один горизонтальный ряд (вроде того, что ниже). Изображение сохраните в формате .png. и назовите его icons.

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

  • Загрузите ваше изображение иконок вместо того, что присутствует в папке скрипте (которую мы выше сохранили в корневой каталог).
  • Если размер ваших иконок отличается от того, что была задана скриптом, то отредактируйте скрипт. Откройте его (файл скрипта share42.js) через текстовый редактор (например, NotePad++), и измените следующий фрагмент кода:

Здесь XXpx – это ширина ваших иконок в пикселях, а YYpx – их высота. Также измените ширину обрезки иконок, равную параметру width, то есть тоже XX. При необходимости вы можете покрутить параметр margin, чтобы настроить отступы иконок.

Сохраните изменения в крипте, и проверьте, как выглядят ваши новые иконки.

Источник
Рейтинг
Загрузка ...