Социальные кнопки поделиться – пишем сами! Часть 2. Добавляем счетчик
Ой, вы, гой еси, дорогие мои читатели! Совсем недавно, каких-то там шесть постов назад, я поднял тему социальных кнопок и очень рад, что статья пришлась вам по душе, и вы используете эти самые кнопки и делитесь материалами с моего сайта. Как я и обещал, продолжаем развивать тему и сегодня прикрутим к нашим кнопкам еще и счетчик, вещь, согласитесь, весьма необходимую и существенную, дабы поднять нашу самооценку до известного уровня и при случае заткнуть за пояс конкурентов, предъявив свои солидные «пузомерки».
Кто читал, тот знает, ну а кто не читал, тому настоятельно советую прочитать первую статью, ибо заново разъяснять написанное в ней я не буду, а ссылаться по ходу статьи на неё придется.
Сама идея добавления счётчика ничем не отличается от реализации кнопок поделиться. Мы по-прежнему работаем с API возможностями социальных сетей, а именно, обращаемся по сформированному URL, с целью получить заветное число поделившихся.
Итак, давайте приступим и начнем, пожалуй, с самого JavaScript. Работа скрипта касательно счётчика делится на две части:
- Счётчик необходимо добавлять к каждой кнопке из соцсетей при загрузке страницы;
- При событии клик по кнопкам изменять число поделившихся.
Для того чтобы реализовать первую часть логики скрипта, нам потребуется добавить метод init():
Теперь более подробно рассмотрим, как он работает. Этот метод является точкой входа/запуска скрипта, который принимает единственный параметр – это селектор поиска обёртки кнопок. Далее через jQuery метод ready() мы отслеживаем полную загрузку документа. Так как у нас на странице может быть несколько блоков поделиться, то через функцию each() для каждого элемента в наборе выполняем код, лежащий внутри функции. В объекте countApiUrls хранятся прямые ссылки для получения числа поделившихся. В pageUrl мы достаём и сохраняем адрес страницы, который указали в параметрах data-share-data. Завершая работу с методом init() мы вызываем метод getCountLikes(), где и реализуем получение самих чисел для счётчика:
Метод getCountLikes() принимает 4 параметра:
- box – обёртка для каждой из кнопок соцсети;
- apiUrl – адрес API на которой происходит обращение;
- pageUrl – адрес страницы, о которой мы хотим получить данные;
- type – тип социальной сети.
Мы при помощи jQuery метода $.getJSON() обращаемся на сформированный url = apiUrl + pageUrl. В зависимости от соцсети получаем ответ (в основном это json) и обрабатываем его. Исключением является «Вконтакте», так как при запросе мы получаем отработку метода VK.Share(), что вызывает у нас на странице естественную ошибку, так как у нас нет объекта VK, но при помощи «нехитрого» костыля мы вытягиваем нужный нам результат.
Последние, что нам останется – это отрисовать числа на кнопках. Эту задачу мы решаем при помощи нового метода setCountLikes(). Эта функция принимает два параметра: определитель обертки и само число.
На этом реализация первой части закончена, что мы получили в итоге: после того, как загрузиться страница у каждой кнопки «Поделиться» появиться число, в зависимости от результата работы с API. Теперь нам останется закончить вторую часть, а именно при клике по кнопке увеличивать счётчик на единицу. Это реализуем в старом методе popup():
Мы добавили новый параметр box, ранее описанный, и внутри при помощи условного оператора if() увеличиваем счётчик, в зависимости от наличия числа ранее поделившихся. На этом сам скрипт завершён, конечно, нужно ещё обновить в методах twitter(), vk(), facebook() строчку:
Теперь, что касательно HTML разметки, выше мы рассмотрели метод init() и так как это точка входа/запуска скрипта, то её мы вызываем на странице после подключения файлов:
Ещё в кнопке стоит добавить span с классом icon:
Также несущественные изменения произошли и в CSS. Надеюсь, к прочтению этого абзаца вы уже скачали архив с примером, если нет, то скачивайте и пользуетесь — всё работает. Данное решение я сам использую в нескольких проектах и проблем не замечал.
В заключение к этой статье, хочется добавить, что мы рассмотрели сам принцип написания социальных кнопок «Поделиться» и вы, думаю, поняли, что их можно реализовать самому, не используя сторонние сервисы и при этом меняя дизайн и функционал как угодно.
Собственная HTML+JavaScript кнопка «Поделиться» во вконтакте для сайта со счетчиком. 2 способа получения количества репостов, используя VK API
А сегодня сентябрьский премиум-пост. Идея поста возникла у меня в результате переезда со стандартных социальных кнопок «Поделиться» на собственные кастомные. Основная причина конечно — это производительность сайта, у меня даже есть старый-престарый пост, в котором я описываю, почему не стоит использовать стандартные кнопки соц. сетей, и этот пост до сих пор актуален!
Пример кнопки — сразу под постом, перед формой подписки. Вы можете сами убедиться в рабочести моей кнопки, только обратите внимание — для ускорения загрузки страниц мой сайт кэширует счетчик кнопки на 2 часа. То есть после того, как вы поделились постом во вконтакте, вам нужно подождать до 2 часов (максимум), чтобы счетчик изменил своё значение.
Шаг 1. Создание HTML кнопки.
Даже jQuery нам не понадобится, просто вставляете код в то место, в котором хотите отобразить кнопку. Как вы видите, по сути тут чистый HTML и чуть-чуть JavaScript, причем если его удалить, то это будет просто кнопка-ссылка, но в то же время счетчик будет работать как полагается (WordPress или чистый PHP обязателен).
- Строчка 2 — в этой переменной укажите URL, на котором находится кнопка «Поделиться», если у вас WordPress, то можете использовать функцию get_permalink().
- 3 — заголовок или название страницы, опять-таки для WordPress его можно получить функцией get_the_title().
- 4 — короткое описание.
- 5 — URL изображения-миниатюры, которое должно будет отобразиться во вконтакте. В коде же я показал пример для WP, основываясь на его функционале миниатюр — сначала я получил ID миниатюры функцией get_post_thumbnail_id(), а затем, уже при помощи wp_get_attachment_image_src(), на основе этого ID, получил URL картинки.
- 8 — да, именно на этой строчке мы и получаем количество репостов из API, в примере используется функция из второго способа (для WordPress), но вы разумеется можете воспользоваться первым из рассмотренных ниже методов.
Шаг 2. Получение количества репостов через API вконтакте
Сейчас я покажу два простейших способа получения количества репоста той или иной страницы. Вы спокойно можете использовать тот способ, который вам нравится (обратите внимание — второй способ подойдёт только для WP) и вам совсем не обязательно разбираться в том, как работает код внутри функций — просто вставляете их к себе на сайт и используете.
Способ 1. Через cURL
Этот способ хорош тем, что его вы можете использовать на своём сайте вне зависимости от того, какая CMS у вас стоит — это может быть WordPress, а может быть и вообще какой-нибудь самописный движок.
Разбор по строчкам.
- 1 — при использовании метода получения количества репостов через cURL вам достаточно указать лишь URL страницы, на котором находится кнопка.
- 3 — возможно тут у вас возникнет вопрос, что такое index=1 , у меня этот вопрос тоже возник и я задал его агенту поддержки вконтакте. И вот ответ:
Одним словом мне просто мягко сказали, что это не моё дело. Ну и ладно.
Способ 2. Через WordPress HTTP API
Ну думаю тут ясно, что этот способ только для WordPress. А это значит, что код с большой долей вероятности отправится в functions.php вашей текущей темы.
- 2-5 и 11 — так как я не хочу, чтобы подключение к VK API лишний раз нагружало страницы моего сайта, то я кэширую число репостов на час.
Ну вот и всё. Я специально не стал давать CSS стили, чтобы вы сами могли оформить кнопку, как пожелаете. Также я не запрещаю использовать дизайн кнопки как у меня на сайте.
Ещё немного про VK
Недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.
Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.
Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.
Кнопки поделиться для сайта — добавляем любым удобным способом!
Здравствуйте, дорогие читатели блога nazyrov.ru. Сегодня у меня довольно заезженная тема, а именно – кнопки «Поделиться» для сайта. Зачем сайту нужны такие кнопки, думаю догадаться не сложно. Если у вас интересный материал, то пользователи будут им активно делиться в социальных сетях, а это мощная и абсолютно бесплатная раскрутка.
На сегодняшний день существует немало сервисов, где можно сгенерировать блок с подобными кнопками, а затем просто скопировать и вставить код того блока себе на сайт. О таких сервисах я и хотел бы сегодня рассказать, поэтому, если вы далеко не новичок в этой теме, то статья вряд ли окажется для вас полезной.
Но перед тем как приступить к обзору самых популярных и интересных сервисов, предлагаю прочесть статью — уникальные кнопки соц. сетей для сайта. В той статье я рассказывал как установить абсолютно уникальны кнопки «Поделиться» на блог.
Кнопки поделится в соц. сетях от самых популярных сервисов
[aspan]Кнопки от Яндекс[/aspan]. Яндекс предлагает интересный и очень удобный конструктор для генерирования блока «Поделиться». Можно указать на выбор абсолютно любые популярнейшие социальные сети, а затем скопировать готовый код. Код представляет собой простой скрипт.
Внешний вид блока можно настроить как угодно – просто иконки, иконки со счетчиком репостов или просто иконки уменьшенного размера.
[aspan]share42.com[/aspan] – тоже мощнейший конструктор, позволяющий выбрать интересующие кнопки и настроить внешний вид блока «Поделиться». Если к сайту подключить библиотеку jQuery, то к кнопкам можно добавить счетчик, который будет подсчитывать количtство поделившихся.
Внешне такой блок с кнопками будет выглядеть примерно вот так:
[aspan]share.pluso.ru[/aspan] – я довольно долгое время пользовался именно этими кнопками. Кнопки «Поделиться» от Pluso отлично настраиваются под дизайн сайта. Можно выбрать любые интересующие соц. сети и понравившийся дизайн кнопок.
[aspan]uptolike.ru[/aspan] – позволяет сгенерировать блок с кнопками «Поделиться», при этом блок будет адаптивным для мобильных устройств. Внешний вид и цвет кнопок тоже хорошо настраивается в конструкторе.
Помимо кнопок репоста, можно добавить кнопку вверх для сайта и всплывающее окошко с предложением подписаться в группу.
Вышеперечисленные сервисы позволяют сгенерировать целый блок с кнопками «Поделиться», но бывают случаи, когда нам необходимо добавить лишь одну соц. сеть, а не целый букет. В таком случае глупо использовать сторонний конструктор для добавления одной кнопки «Поделиться», гораздо проще использовать API необходимой социальной сети.
И вовсе не стоит пугаться этого страшного слова. Добавить кнопку «Поделиться» при помощи API сможет любой, просто повторяйте действия, которые я опишу.
Кнопка «Поделиться» ВКонтакте
Для того, чтобы сгенерировать кнопку поделиться ВКонтакте для своего сайта, перейдите на [aspan]страницу виджетов ВКонтакте[/aspan].
На этой странице вы можете указать текст на кнопке, а так же выбрать или отключить счетчик. После того, как вы сконструировали желаемую кнопку, можете скопировать код кнопки и вставить ее на свой сайт.
Теперь, вам необходимо перейти по ссылке внизу страницы к подробной [aspan]документации виджета[/aspan], и подключить виджет согласно инструкции.
Facebook кнопка «Поделиться»
Кнопка «Поделиться» на фейсбук делается аналогичным образом. Для этого перейдите на [aspan]страницу конструктора[/aspan], в списке различных кнопок найдите кнопку «Поделиться» и выберете значение «Веб-платформа».
В появившимся конструкторе можете настроить внешний вид кнопки и получить код.
Код будет состоять из двух частей. Первую часть необходимо вставить после открывающего тега . Этим кодом вы включаете SDK для JavaScript.
Вторую часть кода необходимо вставить в то место, где должна выводиться кнопка «Поделиться» на Facebook.
Делаем кнопку «Поделиться» в одноклассниках
Кнопка поделиться в одноклассниках вставляется так же при помощи небольшого куска кода. Чтобы получить этот код, перейдите на страницу [aspan]социальных виджетов одноклассников[/aspan], и в конструкторе настройте кнопку «Поделиться».
После этого скопируйте предоставленный код, и вставьте в необходимое место на сайте.
Вот мы и рассмотрели все наиболее популярные способы вставки кнопок «Поделиться» для сайта. Выбирайте тот способ, который больше всего подходит вам.
Выбор и установка кнопок соцсетей для сайта
В современном интернет-пространстве нет ничего более популярного, чем социальные сети. Различные площадки сосредоточили миллионы людей, которые ежедневно листают ленту, делают репосты, ставят лайки и ведут активную онлайн-жизнь. Так почему бы не воспользоваться этой системой для бесплатного продвижения собственного сайта в данной среде?
Содержание:
Нет никакой тайны в том, что уже много лет существуют особые кнопки социальных сетей, установка которых на сайте позволяет увидеть прирост трафика, а заодно способствует развитию PR-кампании своего ресурса. Расшаривание материалов обеспечивает охват гигантской аудитории, которая состоит из потенциальных клиентов, читателей и подписчиков.
Наша статья расскажет, как выбрать, правильно установить и добавить на свой сайт удобные и красивые социальные кнопки; какие сервисы предлагают свои услуги и в чем их достоинства; как самостоятельно добавить код и кастомизировать кнопки социальных сетей.
Преимущества и недостатки сервисов
Эффективные инструменты для шаринга могут быть добавлены двумя способами:
- Вручную (с помощью скриптов и плагинов, образуемых API самих сетей);
- Посредством популярных сервисов для добавления кнопок «поделиться в социальных сетях».
Множественные многофункциональные сервисы предлагают пользователям широкие возможности в настройке и оформлении, не требуют наличия специальных навыков, имеют интуитивно понятный интерфейс для создания красивых элементов.
Все сервисы представляют собой площадки, где после ввода данных генерируется код, который необходимо разместить на веб-сайте.
К основным преимуществам этих «помощников» можно отнести:
- Простоту интеграции и легкость в освоении;
- Возможность охватить сразу все актуальные соц. сети «одним махом»;
- Вариативность в выборе внешнего вида кнопок и их эстетическая привлекательность;
- Выдерживание общей стилистики и геометрии блока, независимо от выбранных социальных сетей.
Статистика переходов комфортно отслеживается в Яндекс.Метрике и Google Analytics.
И все же ничего идеального не бывает. Сервисы социальных кнопок, в отличие от официальных решений, имеют ряд недостатков:
- Снижение скорости загрузки страницы, что может отрицательно сказаться и на позициях сайта при его ранжировании в поисковой выдаче, и на объеме продаж;
- Сбои и ошибки в работе серверов, ведущие к длительной загрузке кнопок или их временной недоступности;
- Периодическое появление рекламы;
- Отсутствие стабильного алгоритма работы через AJAX;
- Возможное использование памяти браузеров;
- Наличие сомнительного трафика;
- Непредставление гарантий безопасности данных пользователей.
При добавлении кнопок соцсетей «вручную» таких проблем можно избежать, но это не абсолютная панацея:
- Плагины разных платформ могут отличаться по дизайну и размерам, что усложняет их гармоничное сосуществование на одной странице;
- Процесс занимает больше времени, требует некоторых подготовительных действий и начальных знаний html.
И все же эти способы – самые востребованные и удобные варианты для быстрой установки скриптов кнопок «поделиться в социальных сетях».
Обзор сервисов кнопок социальных сетей
В интернете представлено большое количество сервисов, каждый из которых имеет свои особенности и постоянно радует пользователей улучшениями в системе настройки кнопок социальных сетей и их внедрения на сайт. Рассмотрим самые популярные конструкторы.
Яндекс кнопки соц сетей
Отечественный поисковый гигант предлагает удобный сервис установки кнопок социальных сетей от Яндекса – блок «Поделиться». Представленный инструментарий позволяет в считанные минуты создать «панель» из нужных элементов и произвести ее базовую настройку.
Варианты внешнего вида:
- Со счетчиком расшариваний;
- С выпадающим меню;
- Мелкие иконки в стиле минимализма.
Список доступных для шаринга сетей:
Первичная настройка отображения кнопок соц сетей от Яндекса и готовый код:
Для установки блока необходимо вставить сгенерированный код в нужное место html-кода сайта. Возможна более точная работа с атрибутами, установка асинхронной загрузки скрипта и т.д. (см. документацию).
Pluso
Известный в российском сегменте аналог знаменитого сервиса. Конструктор выделяется привлекательным дизайном элементов, удобным функционалом и наличием полезных настроек.
Доступные стили и социальные сети:
Окно предварительного просмотра и дополнительных опций:
Произведя нехитрые манипуляции по выбору нужных соц. сетей, иконок и их настроек, можно увидеть код:
Для корректного отображения сервиса полученный скрипт с прилагающимися данными достаточно скопировать и установить в верстку сайта в выбранном месте.
Uptolike
Качественный конструктор, имеющий удобные опции для моментальной генерации кода, обширные настройки (со статистикой) и даже «спецэффекты».
Готовые иконки могут иметь такой вид:
Можно выбрать все значимые современные сети:
Для индивидуализации используются различные настройки, среди которых важная адаптация для мобильных платформ:
После выполнения всех процедур по выбору и регулировке параметров следует нажать «Сгенерировать код», после чего будет предложено ввести свой e-mail для последующей отправки на него кода для установки.
Полученный скрипт и все остальные данные размещаются в html-коде сайта.
Share42
Share42 – понятный пошаговый генератор создания красивых кнопок социальных сетей.
Сервис предлагает быстрое формирование блоков, которое включает:
- Выбор необходимых соцсетей и размера иконок;
- Первичную настройку панели и другие опции;
Функции предварительного просмотра и скачивания;
Установку блока на свой ресурс: необходимо скачать архив (со скриптом), распаковать его, загрузить папку «share42» на свой сайт и указать путь до нее (http://site.name/share42/). Далее нужно выбрать тип ресурса и вставить в шаблон полученный в последнем окне код:
Sharethis
Англоязычная платформа с приятным оформлением и всеми необходимыми опциями для внедрения кнопок соц. сетей на веб-сайт. Сервис позволяет создать «фиксированные» или «скользящие» блоки, состоящие из множества иконок популярных сетей («Вконтакте» присутствует).
Функционал конструктора – все, что нужно для быстрого создания панелей. Принцип работы:
- После определения типа блоков («inline» или «sticky») осуществляется переход к выбору самих иконок (методом клика);
Addthis
Самый известный иностранный сервис с услугами для размещения кнопок социальных сетей на сайте. Для доступа к полному функционалу необходимо пройти процедуру быстрой регистрации. И оно того стоит!
Addthis превращается в мощный и полный полезных «фишек» наглядный конструктор с превью в режиме онлайн.
Кнопки соц. сетей на сайте могут быть:
- Скользящими (floating);
- Зафиксированными на странице (inline);
- Раскрывающимися при наведении (expanding);
- Баннерами и слайдерами.
Все вариации полностью адаптированы для мобильных устройств.
После выбора типа блока и нажатия «Continue» левая панель окна принимает следующий вид:
Здесь можно выбрать счетчик (share counters), посмотреть список всех доступных кнопок шаринга социальных сетей (select your own + add more services), настроить дизайн (design) и дополнительные функции (скрытие блоков и т.д.)
Для получения кода достаточно нажать «Save & Continue». На следующей странице появится скрипт вида
код самого блока
и подробная инструкция по установке скрипта для разных шаблонов (включая доступные плагины).
Social-Likes
Social-likes – компактный и простой скрипт социальных кнопок «лайк» со счетчиком. На странице можно выбрать нужные сети, тип и расположение иконок, их скин и внешний вид.
Дальнейшие действия для установки:
- Нажать «скачать кнопки»;
- Сохранить архив на ПК;
- В шаблоне сайта создать папку «social» и вложить в нее распакованные файлы архива;
- Перед прописать:
Название файла .css может иметь другое значение (зависит от выбора, сделанного на сайте).
Odnaknopka.ru
Сервис от российских разработчиков с максимально упрощенной системой установки кнопок для социальных сетей.
К недочетам можно отнести скудный функционал, но он компенсируется высокой скоростью работы скрипта «Одна Кнопка».
Посетители могут выбрать 4 вида кнопки, один из которых – виджет (с разным положением относительно страницы).
Скрипт социальных кнопок выглядит так:
Для работы с виджетом код сложнее:
Для установки достаточно поместить данные в шаблон.
Pip.Qip.ru
Представитель «моментальных» сервисов генерации кодов для установки социальных кнопок — Pip.Qip. Простота здесь лишь подчеркивает комфорт.
Для получения заветного кода нужно:
- Указать тип площадки для размещения;
- Выбрать стиль из списка;
- Нажать «Уже хочу!» – и лицезреть готовый код внизу страницы.
Останется лишь поместить его в код сайта.
Добавление кнопок соц сетей вручную
Альтернативой безусловно удобным, но не всегда приемлемым сервисам социальных кнопок являются сами соц. сети, которые дают возможность вручную добавить кнопки на веб-сайт, используя плагины и API.
Кнопка поделиться Вконтакте
Знаменитый «Вконтакте» генерирует коды кнопок расшаривания по этому адресу.
С помощью виджета можно выбрать вид будущей кнопки и «прикрутить» счетчик (пункт «стиль»), придумать оригинальное название («текст») и получить заветный код.
Первую часть кода следует поместить внутри тега :
Вторую – в место непосредственного расположения кнопки:
Кнопка поделиться Facebook
Методика получения официальных кнопок Facebook еще более проста и понятна. На сайте можно воспользоваться конфигуратором кнопки «Поделиться» и в мгновение ока получить код.
Выбор функций ограничивается размером самой кнопки и тремя вариантами ее «композиции» (дизайна).
После нажатия кнопки «Получить код» на экране появится окно с двумя «шагами»:
Шаг 2 – Добавляем Javascript.
Встраивается в html-код страницы единожды. Лучшее место – сразу после тега .
Шаг 3 – сам код кнопки и его размещение.
Кнопка поделиться Одноклассники
Разработчики сайта «Одноклассники» представили обновленную кнопку «Класс/Поделиться», которая работает значительно быстрее прошлого образца.
Здесь находится страница конструктора.
С помощью интуитивно понятного интерфейса параметры подгоняются быстро и легко. Когда настройка завершена и вид элемента в блоке «Результат» устраивает, можно «пролистнуть экран» вниз и заметить код, который нужно встроить в html страницы в выбранном месте.
Кнопка поделиться Google+
Такой гигант, как Google, не мог остаться в стороне, поэтому для соц. сети googleplus тоже есть своя кнопка расшаривания. В отличие от виджета того же «ВКонтакте», кнопка «+1» не ведет к публикации материалов на страницах нажавшего на нее человека и не имеет влияния на ранжирование. «Тогда зачем она нужна?» – спросите вы. «+1» является частью эффективной PR-кампании вашего ресурса, в ходе которой материалы рекламируются друзьями друзей через профили Гугл, а рекомендации можно увидеть прямо в выдаче поисковой системы!
Официальная страница открывает простой способ установки «+1» с помощью кода:
Кнопка поделиться от Твиттер
«Твитнуть или не твитнуть?». Чтобы у посетителей появились такие муки выбора, необходимо создать элемент для расшаривания от Twitter в официальном конструкторе.
С решением этой задачи справится даже начинающий. Интерфейс включает в себя выбор самой кнопки, настройку упоминаний и #хэштега, возможность прописать собственный текст вместо стандартного заголовка страницы.
Код для размещения будет находиться в правом окне.
Кнопка поделиться от Mail.ru
Плагин для шаринга от социальной сети . – кнопка «Нравится». Комфортное и быстрое создание доступно по ссылке.
Можно внести изменения в параметры размера и вида кнопки, включить или отключить счетчик, выбрать тип текста.
Настройка сопровождается наглядным отображением внесенных изменений и автоматической генерацией кода.
Добавление иконок на профили и группы в социальных сетях на сайт
Иногда возникает необходимость оформить на сайте ссылку с красивой иконкой соц. сети. В интернете ждут своего часа сотни и тысячи значков разного стиля. Берите и пользуйтесь.
Используя тег , можно вывести изображение понравившейся иконки в html.
Или вынести иконку в CSS и для каждой социалки создать свой класс. Пример в Vk.com:
html-код в таком случае будет:
Легкие и кастомные кнопки расшаривания
Некоторые энтузиасты и просто талантливые люди полностью отказываются от сервисов, плагинов и других доступных решений. Их цель – использование самостоятельно написанного&кода&для расшаривания. Весомое преимущество таких «кастомных» кнопок – чистый код, предполагающий загрузку лишь CSS, скрипта и шрифтов (картинок).
Плюсы такого подхода:
- Нет лишнего трафика;
- Нет рекламы;
- Корректная работа;
- Нет проблем с зависимостью от сервиса (который может часто тупить и не загружаться);
- Нет проблем с поеданием памяти браузера.
Список ссылок на шаширнг в популярных социальных сетях:
Twitter Facebook Google plus LinkedIn Pinterest VK Tumblr Reddit Odnoklassniki
Далее нужно придать им нужный вид с помощью CSS. В нашем случае html-код кнопки расшаривания в ВК выглядит так:
Ну и стилизация кнопки в CSS:
Вам останется только добавить всё это дело в модальное окно и реализовать корректный парсинг тегов с вашей разметки OpenGraph и подставноку в url’ы для шаринга, которые приведены выше.