Создание кнопки «Поделиться» в VK со счетчиком
Идея поста возникла у меня в результате переезда со стандартных социальных кнопок «Поделиться» на собственные кастомные. Основная причина конечно — это производительность сайта, у меня даже есть старый-престарый пост, в котором я описываю, почему не стоит использовать стандартные кнопки соц. сетей, и этот пост до сих пор актуален!
Пример кнопки — сразу под постом, перед формой подписки. Вы можете сами убедиться в рабочести моей кнопки, только обратите внимание — для ускорения загрузки страниц мой сайт кэширует счетчик кнопки на 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, а может быть и вообще какой-нибудь самописный движок.
function get_vk_counts_curl( $url ) { $api_url = 'https://vk.com/share.php?act=count&index=1&url=' . $url; $vk_connect = curl_init(); curl_setopt( $vk_connect, CURLOPT_URL, $api_url ); curl_setopt( $vk_connect, CURLOPT_RETURNTRANSFER, 1 ); // вернуть результат, а не выводить curl_setopt( $vk_connect, CURLOPT_TIMEOUT, 20 ); $return = curl_exec( $vk_connect ); curl_close( $vk_connect ); // закрываем соединение return intval( str_replace( array('VK.Share.count(1, ',');'),'',$return) ); }
Разбор по строчкам.
- 1 — при использовании метода получения количества репостов через cURL вам достаточно указать лишь URL страницы, на котором находится кнопка.
- 3 — возможно тут у вас возникнет вопрос, что такое index=1 , у меня этот вопрос тоже возник и я задал его агенту поддержки вконтакте. И вот ответ:
Способ 2. Через WordPress HTTP API
Ну думаю тут ясно, что этот способ только для WordPress. А это значит, что код с большой долей вероятности отправится в functions.php вашей текущей темы.
function get_vk_counts_wp( $url, $post_id ) { $cache_key = 'misha_shares_vk' . $post_id; $count = get_transient( $cache_key ); // попробуем сначала вытащить значение из кэша WP if ( $count === false ) { $response = wp_remote_get('https://vk.com/share.php?act=count&index=1&url=' . $url ); $body = json_decode( $response['body'] ); $count = intval( str_replace( array('VK.Share.count(1, ',');'),'',$response['body'] ) ); set_transient( $cache_key, $count, 3600 ); // сохраняем в кэш на час } return $count; }
- 2-5 и 11 — так как я не хочу, чтобы подключение к VK API лишний раз нагружало страницы моего сайта, то я кэширую число репостов на час.
Ну вот и всё. Я специально не стал давать CSS стили, чтобы вы сами могли оформить кнопку, как пожелаете. Также я не запрещаю использовать дизайн кнопки как у меня на сайте.
Ещё немного про VK
- Кнопка «Наверх», покруче, чем в вконтакте
- Почему не следует использовать стандартные кнопки «Поделиться», «Tweet» и «Share»?
- Как вывести количество подписчиков (участников) группы, страницы или события из вконтакте
Миша
Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.
Пишите, если нужна помощь с сайтом или разработка с нуля.
Курсы javascript
Реально ли для wordpress написать вот что. Как правильно подойти к этому.
Нажимаешь на кнопку, она тебе выводит текст, а то что на кнопку было произведено нажатие отправляется в бд или куда то в файл где к общему числу +1 добавляется.
Вероятно стоит подходить к этому реализацией через javascript. Посоветовали подумать в сторону jquery ajax
Идеальный вариант, это что бы был общий файл-таблица на которой будет выведен список по типу:
№ 143 — 1509 нажатий
№ 144 — 148 нажатий
№ 145 — 735 нажатий
То есть кнопка будет находится в разных записях и каждая иметь свой уникальный текст, который будет показан после нажатия.
Может есть подобные готовые решения?
Нашел кое что, что практически идеально подходит под требование, но немного не то. http://wp-kama.ru/id_430/plagin-dlya. k-counter.html
И вот ещё тематическую статью нашел: http://lifeexample.ru/php-primeryi-s. wordpress.html
Ниже инфа моих попыток решить задачу. Вполне вероятно что я на ошибочном пути и всё что ниже можно не учитывать, а нужно двигаться совершенно в другом направлении.
Относительно нашел решение установкой плагина Kama’s Click Counter и скриптом который идеально подходит для задачи:
Показать
Но есть проблема. Класс которой отвечает за запись +1 клик в админку (class=»count») делает свое дело. Но при нажатии, помимо того что скрипт показывает нужный текст, страница переходит по ссылке ?kcccount=javascript :;!p=302 выдавая ошибку:
Страница, которую вы пытаетесь просмотреть, не может быть показана, так как была обнаружена ошибка при передаче данных.
Интересна реализация через Kama’s Click Counter (очень успешно для задачи подходит этот плагин)
Но когда я добавляю класс count то код преобразуется в ссылку (href=»http://site.ru?kcccount=javascript :;!p=302) вместо того что бы просто быть href=»javascript :;» а так как это становится ссылкой, меня соответственно перебрасывает.
Проблема, что только лишь если проходишь по ссылке которую создает класс count, (в данном примере это http://site.ru?kcccount=javascript :;!p=302) происходит запись в базу +1 клик. Может как то можно реализовать, что бы count создавал нужный запрос но без редиректа?
_______________________
От ошибки избавился удалив кусок в файле плагина, то есть:
# перенаправляем $_url = explode('!p=', $url); $url = $_url[0]; if ($is_IIS) < header("Refresh:0;url=$url"); >else < if( !headers_sent() )< header("Location: $url"); header("Status: 303"); >else < print ""; > > exit;
Как сделать счетчик для нажатий по кнопке?
Из HTML элементов понадобится кнопка и место, куда выводить значение. Например, тег
Для счётчика завести переменную. Её значение будет обновляться.
На кнопке слушать событие «click», по нему должна срабатывать функция, которая увеличит значение переменной на 1 и выведет его в HTML элемент.
Как вы начнете выполнять этот план и что именно из этого плана не понятно?
Ответ написан более трёх лет назад
Neizvest @Neizvest Автор вопроса
Как сам цикл записать, этот не работает —
var button = document.getElementById(«button»);
button.addEventListener(‘click’, function(e) for (var i = 0;;i++)
Сергей Соколов @sergiks Куратор тега JavaScript
Neizvest, при одном вызове эта функция должна увеличить счётчик только 1 раз на 1.
i надо объявить вне функции, чтобы значение сохранялось между разными вызовами.
Попробуйте так:
var button = document.getElementById("button"); var i = 0; // начальное значение button.addEventListener('click', function(e) < i = i + 1; document.getElementById("text").innerHTML = i; >);Как добавить счетчик лайков на сайт
Узнайте, как добавить простой и эффективный счетчик лайков на ваш сайт с помощью HTML, CSS и JavaScript в этой практичной статье для новичков.
Алексей Кодов
Автор статьи
2 июня 2023 в 11:18
Счетчик лайков является отличным инструментом для увеличения вовлеченности пользователей на вашем сайте. В этой статье мы рассмотрим, как добавить простой счетчик лайков на ваш сайт с помощью HTML, CSS и JavaScript.
Шаг 1: Создание HTML-структуры
Сначала создадим основную структуру нашего счетчика лайков с помощью HTML. Вам потребуется контейнер с классом like-container , внутри которого будет кнопка с классом like-button и элемент для отображения количества лайков с классом like-count .
Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
Шаг 2: Оформление счетчика лайков с помощью CSS
Теперь давайте добавим немного стилей для нашего счетчика лайков с помощью CSS. Мы зададим размеры, цвета и отступы для кнопки и счетчика.
.like-container < display: flex; align-items: center; >.like-button < font-size: 24px; border: none; background: none; cursor: pointer; padding: 0; margin-right: 8px; >.like-count
Шаг 3: Добавление функциональности счетчика лайков с помощью JavaScript
Наконец, давайте добавим функциональность нашему счетчику лайков с помощью JavaScript. Мы будем слушать событие клика на кнопке лайка и увеличивать счетчик на 1 каждый раз, когда пользователь нажимает на кнопку.
const likeButton = document.querySelector('.like-button'); const likeCount = document.querySelector('.like-count'); likeButton.addEventListener('click', () => < // Получаем текущее значение счетчика лайков и увеличиваем на 1 const currentCount = parseInt(likeCount.textContent, 10); likeCount.textContent = currentCount + 1; >);
Вот и все! Теперь у вас есть простой и функциональный счетчик лайков на вашем сайте. Вы можете легко разместить его на любой странице и настроить внешний вид с помощью CSS. Удачи в вашей веб-разработке! ��