Меню

Кнопки поделись со счетчиком



Собственная 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 — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

    Источник

    Социальные кнопки поделиться – пишем сами! Часть 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. Надеюсь, к прочтению этого абзаца вы уже скачали архив с примером, если нет, то скачивайте и пользуетесь — всё работает. Данное решение я сам использую в нескольких проектах и проблем не замечал.

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

    Источник

    Создание своей кнопки «Поделится» со счётчиком, стоит ли?

    Добрый день!
    Кто какие решения для кнопок соц. активности использует?Поделитесь своими наблюдениями по скорость загрузки сайта и нагрузки на сервер.
    Задумался про создание своих, но вот есть ли смысл в этом?Сервисы дают статистику, но большинство из них громоздкие и замедляют скорость загрузки стр. , а иногда их скрипты вообще приводят к тому, что сайт «тупит».
    Основные требования: счетчик и минимальное влияние на скорость загрузки сайта.

    Или может лучше создать свои кнопки «Поделится» со счётчиком, например (код с сайта masterskayafanstranic):
    создаем social.php

    Данные для переменной $fbcount подгружаются из файла social.php. Так как эти данные будут выводиться внутри контейнера div с идентификатором то у появляется неограниченные возможности по настройке внешнего вида счётчика с помощью CSS.

    или в.№2 (пока склоняюсь к нему) — создать кнопки с помощью кода от самих разработчиков соц. сетей,

    Помогите пожалуйста разобраться:
    1. Для создания кнопки необходимо выбрать URL веб-сайта или Страницы Facebook, которым вы хотите поделиться. А если я хочу делиться каждый раз другой стрн., т.е. статьей single.php?
    Или тут просто необходимо вставить свой адрес сайта site.com?

    2. В настройках указано data-href — абсолютный URL страницы, который вы хотите опубликовать. Но я не понял этот код автоматически создает URL для нужной стрн. или как?

    Результат, который хочу получить:

    В каждом слове текста замените «а» на букву «е», если «а» стоит на четном месте, и заменить букву «б» на сочетание «ак»,
    В каждом слове текста замените «а» на букву «е», если «а» стоит на четном месте, и заменить букву.

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

    В каждом слове текста замените «а» на букву «е», если «а» стоит на четном месте
    Задание 1. В каждом слове текста замените «а» на букву «е», если «а» стоит на четном месте, и.

    В каждом слове текста замените «а» на букву «е», если «а» стоит на четном месте
    В каждом слове текста замените «а» на букву «е», если «а» стоит на четном месте, и заменить букву.

    Источник

    Блок «Поделиться» от Yandex и красивые кнопки со счетчиком

    #1 MiXa

    Ненавижу белых мух и твердую воду

  • Основатель
  • 1 574 сообщений
  • Все знают блок Яндекса «Поделиться»
    Вот только выглядит он, как-то ну совсем не презентабельно и малофункционально
    Но это дело можно немного поправить, пограбив кОрОваны Яндекса

    Есть у Яндекса такой раздел: http://visual.yandex.ru/
    И картинки социалок тут понарядней, да и количество лайков показывают.

    Одно только огорчает, скрипт пока работает только для семи сервисов: Я.ру, ВКонтакт, Facebook, Twitter, Одноглазники, Мыло, Гугля+

    Ку (добавил чуть позже): за неделю кликабельность немного возрасла. Хотя это — ни о чем, тестировать нужно на большем количестве сайтов

    #2 Nov

  • Основатель
  • 762 сообщений
  • Источник

    Нужен скрипт социальных кнопок со счетчиками. Существует ли готовое решение?

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

    Что мне важно:
    Скрипт должен поддерживать VK, FB, Twitter, G+ и OK. ОК — опционально, но желательно.
    Скрипт должен уметь правильно отображать количество лайков. Кроме нативных кнопок пока обнаружил только два решения, способных на такой подвиг: habrahabr.ru/company/sports_ru/blog/130702 и sapegin.github.io/social-likes/ru
    Ну и третий пункт: хотелось бы чтобы всё это дело аккуратно плавало где-нибудь слева от записи в виде вертикального столбика.

    К сожалению пока находил только неполные решения. Social Likes — отлично считает уже имеющиеся лайки, но занимает очень много места в варианте из коробки. Pluso — отличный конструктор, только не умеет корректно считать. Тоже, к сожалению, касается и uptolike.ru. Share42 не имеет счетчиков как таковых, а скрпит шаринга от яндекса очень плохо поддаётся кастомизации, и, вроде бы, тоже довольно странно считает.

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

    Источник

    Читайте также:  Механические счетчики электроэнергии установка