Меню

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



Социальные кнопки поделиться – пишем сами! Часть 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 , у меня этот вопрос тоже возник и я задал его агенту поддержки вконтакте. И вот ответ:

Одним словом мне просто мягко сказали, что это не моё дело. Ну и ладно.

  • 14 — возможно это не самый оптимальный способ извлечения количества репостов из полученного результата, если у вас есть идеи, как это можно сделать лучшим образом, буду рад, если поделитесь в комментариях.
  • Способ 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.

    И все же эти способы – самые востребованные и удобные варианты для быстрой установки скриптов кнопок «поделиться в социальных сетях».

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

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

    Яндекс кнопки соц сетей

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

    Варианты внешнего вида:

    1. Со счетчиком расшариваний;
    2. С выпадающим меню;
    3. Мелкие иконки в стиле минимализма.

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

    Первичная настройка отображения кнопок соц сетей от Яндекса и готовый код:

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

    Pluso

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

    Доступные стили и социальные сети:

    Окно предварительного просмотра и дополнительных опций:

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

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

    Uptolike

    Качественный конструктор, имеющий удобные опции для моментальной генерации кода, обширные настройки (со статистикой) и даже «спецэффекты».

    Готовые иконки могут иметь такой вид:

    Можно выбрать все значимые современные сети:

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

    После выполнения всех процедур по выбору и регулировке параметров следует нажать «Сгенерировать код», после чего будет предложено ввести свой e-mail для последующей отправки на него кода для установки.

    Полученный скрипт и все остальные данные размещаются в html-коде сайта.

    Share42

    Share42 – понятный пошаговый генератор создания красивых кнопок социальных сетей.

    Сервис предлагает быстрое формирование блоков, которое включает:

    1. Выбор необходимых соцсетей и размера иконок;
    2. Первичную настройку панели и другие опции;

    Функции предварительного просмотра и скачивания;

    Установку блока на свой ресурс: необходимо скачать архив (со скриптом), распаковать его, загрузить папку «share42» на свой сайт и указать путь до нее (http://site.name/share42/). Далее нужно выбрать тип ресурса и вставить в шаблон полученный в последнем окне код:

    Sharethis

    Англоязычная платформа с приятным оформлением и всеми необходимыми опциями для внедрения кнопок соц. сетей на веб-сайт. Сервис позволяет создать «фиксированные» или «скользящие» блоки, состоящие из множества иконок популярных сетей («Вконтакте» присутствует).

    Функционал конструктора – все, что нужно для быстрого создания панелей. Принцип работы:

      После определения типа блоков («inline» или «sticky») осуществляется переход к выбору самих иконок (методом клика);

  • Дополнительные настройки (размер, вид, наличие счетчика, тип обрамления);
  • Финальное получение кода (требует регистрации).

    Addthis

    Самый известный иностранный сервис с услугами для размещения кнопок социальных сетей на сайте. Для доступа к полному функционалу необходимо пройти процедуру быстрой регистрации. И оно того стоит!

    Addthis превращается в мощный и полный полезных «фишек» наглядный конструктор с превью в режиме онлайн.

    Кнопки соц. сетей на сайте могут быть:

    1. Скользящими (floating);
    2. Зафиксированными на странице (inline);
    3. Раскрывающимися при наведении (expanding);
    4. Баннерами и слайдерами.

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

    После выбора типа блока и нажатия «Continue» левая панель окна принимает следующий вид:

    Здесь можно выбрать счетчик (share counters), посмотреть список всех доступных кнопок шаринга социальных сетей (select your own + add more services), настроить дизайн (design) и дополнительные функции (скрытие блоков и т.д.)

    Для получения кода достаточно нажать «Save & Continue». На следующей странице появится скрипт вида

    код самого блока

    и подробная инструкция по установке скрипта для разных шаблонов (включая доступные плагины).

    Social-Likes

    Social-likes – компактный и простой скрипт социальных кнопок «лайк» со счетчиком. На странице можно выбрать нужные сети, тип и расположение иконок, их скин и внешний вид.

    Дальнейшие действия для установки:

    1. Нажать «скачать кнопки»;
    2. Сохранить архив на ПК;
    3. В шаблоне сайта создать папку «social» и вложить в нее распакованные файлы архива;
    4. Перед прописать:

    Название файла .css может иметь другое значение (зависит от выбора, сделанного на сайте).

  • Использовать другую часть кода и вставить ее в шаблон для размещения кнопок:
  • Odnaknopka.ru

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

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

    Посетители могут выбрать 4 вида кнопки, один из которых – виджет (с разным положением относительно страницы).

    Скрипт социальных кнопок выглядит так:

    Для работы с виджетом код сложнее:

    Для установки достаточно поместить данные в шаблон.

    Pip.Qip.ru

    Представитель «моментальных» сервисов генерации кодов для установки социальных кнопок — Pip.Qip. Простота здесь лишь подчеркивает комфорт.

    Для получения заветного кода нужно:

    1. Указать тип площадки для размещения;
    2. Выбрать стиль из списка;
    3. Нажать «Уже хочу!» – и лицезреть готовый код внизу страницы.

    Останется лишь поместить его в код сайта.

    Добавление кнопок соц сетей вручную

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

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

    Знаменитый «Вконтакте» генерирует коды кнопок расшаривания по этому адресу.

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

    Первую часть кода следует поместить внутри тега :

    Вторую – в место непосредственного расположения кнопки:

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

    Методика получения официальных кнопок Facebook еще более проста и понятна. На сайте можно воспользоваться конфигуратором кнопки «Поделиться» и в мгновение ока получить код.

    Выбор функций ограничивается размером самой кнопки и тремя вариантами ее «композиции» (дизайна).

    После нажатия кнопки «Получить код» на экране появится окно с двумя «шагами»:

    Шаг 2 – Добавляем Javascript.

    Встраивается в html-код страницы единожды. Лучшее место – сразу после тега .

    Шаг 3 – сам код кнопки и его размещение.

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

    Разработчики сайта «Одноклассники» представили обновленную кнопку «Класс/Поделиться», которая работает значительно быстрее прошлого образца.

    Здесь находится страница конструктора.

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

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

    Такой гигант, как Google, не мог остаться в стороне, поэтому для соц. сети googleplus тоже есть своя кнопка расшаривания. В отличие от виджета того же «ВКонтакте», кнопка «+1» не ведет к публикации материалов на страницах нажавшего на нее человека и не имеет влияния на ранжирование. «Тогда зачем она нужна?» – спросите вы. «+1» является частью эффективной PR-кампании вашего ресурса, в ходе которой материалы рекламируются друзьями друзей через профили Гугл, а рекомендации можно увидеть прямо в выдаче поисковой системы!

    Официальная страница открывает простой способ установки «+1» с помощью кода:

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

    «Твитнуть или не твитнуть?». Чтобы у посетителей появились такие муки выбора, необходимо создать элемент для расшаривания от Twitter в официальном конструкторе.

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

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

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

    Плагин для шаринга от социальной сети . – кнопка «Нравится». Комфортное и быстрое создание доступно по ссылке.

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

    Настройка сопровождается наглядным отображением внесенных изменений и автоматической генерацией кода.

    Добавление иконок на профили и группы в социальных сетях на сайт

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

    Используя тег , можно вывести изображение понравившейся иконки в html.

    Или вынести иконку в CSS и для каждой социалки создать свой класс. Пример в Vk.com:

    html-код в таком случае будет:

    Легкие и кастомные кнопки расшаривания

    Некоторые энтузиасты и просто талантливые люди полностью отказываются от сервисов, плагинов и других доступных решений. Их цель – использование самостоятельно написанного&кода&для расшаривания. Весомое преимущество таких «кастомных» кнопок – чистый код, предполагающий загрузку лишь CSS, скрипта и шрифтов (картинок).

    Плюсы такого подхода:

    1. Нет лишнего трафика;
    2. Нет рекламы;
    3. Корректная работа;
    4. Нет проблем с зависимостью от сервиса (который может часто тупить и не загружаться);
    5. Нет проблем с поеданием памяти браузера.

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

    Twitter Facebook Google plus LinkedIn Pinterest VK Tumblr Reddit Odnoklassniki

    Далее нужно придать им нужный вид с помощью CSS. В нашем случае html-код кнопки расшаривания в ВК выглядит так:

    Ну и стилизация кнопки в CSS:

    Вам останется только добавить всё это дело в модальное окно и реализовать корректный парсинг тегов с вашей разметки OpenGraph и подставноку в url’ы для шаринга, которые приведены выше.

    Источник

    Adblock
    detector