Как сделать лайки на сайте html

Как сделать свои собственные лайки на сайте?

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

UPD: Возможность того, что человек может зайти с другого компьютера и ещё раз проголосовать не критична!

• Вопрос задан более трёх лет назад
• 5225 просмотров

Комментировать
Решения вопроса 0
Ответы на вопрос 3

Ищу работу. Контакты в профиле.

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

Про привязку к ip забудьте.

Ответ написан более трёх лет назад
Нравится 4 1 комментарий

Александр Тимофеев @aldtimofeev Автор вопроса
если честно, мне сложно понять как из этого скомпоновать в итоге лайки

Full-stack web-developer
Это делается на сервере.
Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
☺Нужен VPS? Два месяца бесплатно. Смотри профиль☺

Их надо сохранять куда-то (в базу) — т.е. одним фронтендом не обойтись. Используются ajax-запросы. Реализация со стороны фронтенда, примерно такая:

$('#like').click(function(e) < $.post . >);

А на бекенде уже обрабатывайте и проверяйте IP на дубликаты — зависит от выбранной платформы. Кстати если проверять по IP — все пользователи за NAT-ами не смогут ваши лайки использовать нормально.

Ответ написан более трёх лет назад
Нравится 1 1 комментарий

Проверять на IP вообще не вариант в современном интернете то! Легче отследить накрутку если только авторизованный пользователь может голосовать.

Курсы javascript

Добрый день, подскажите как реализовать лайкирование как это сделано в вк? До меня просто не доходит как это работает. Ведь при нажатии на кнопку лайк или дизлайк выполняется ajax запрос на сервер, что занимает какое то время особенно если очень медленный интернет. Но на кнопку нажимать я могу быстро, визуально без перезагрузки страницы меняется кнопка, но запрос не всегда успевает выполнится.То есть например нажимаю лайк запрос еще не выполнился как я сразу нажал на дизлайк и начал выполнять другой запрос и получается каша. Я сделал такую заглушку чтобы кнопка не активировалась пока запрос до конца не выполнится. Но это нимного тормознуто, в вк это не так. Пожалуйста помогите

Пишем функцию лайков для постов блога

Для чего нужна функция лайков? В первую очередь, чтобы пользователи могли оценить Вашу запись, а также видеть, как её оценивают другие. Как сделать самостоятельно такой функционал — я расскажу в данном посте. Если Вам понравится данный пост — поставьте лайк! 🙂

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

❶ Создаём таблицу. Назовём её likes . Если Вы используете phpMyAdmin — находясь в корне всех таблиц, ниже кнопки «Создать таблицу» вводим имя likes , количество столбцов ставим 3 , нажимаем » Вперёд «.

Первому столбцу вводим имя — id , тип — INT , Индекс — PRIMARY (во всплывающем окне нажимаем ВПЕРЁД), ставим галочку A_I (auto increment).

Второму столбцу вводим имя — client_ip , тип — VARCHAR , длина — 15 .

Третьему столбцу вводим имя — article_id , тип INT

Сравнение ставим utf8_general_ci , тип InnoDB .

Если Вы работаете с базой данных из консоли — находясь в режиме sql выполняем команду:

CREATE TABLE likes (id INT NOT NULL AUTO_INCREMENT, client_ip VARCHAR(15) NOT NULL, article_id INT NOT NULL, PRIMARY KEY (id)) ENGINE = InnoDB CHARSET=utf8 COLLATE utf8_general_ci;

Далее, для оптимизации таблицы сделаем уникальными связку «IP пользователя» — «ID поста» . Это нужно для того, чтобы, если вдруг пользователь попытается проголосовать повторно за один и тот же пост, не происходило лишней записи в базу данных. Таким образом, с одного IP адреса проголосовать за один пост можно будет только один раз.

ALTER TABLE likes ADD UNIQUE INDEX (client_ip, article_id);

❷ Далее создаём файл, назовём его like.php

В файле первым делом создаём подключение к базе данных:

$link = mysqli_connect('имя_хоста', 'имя_пользователя', 'пароль', 'имя_БД'); $link->set_charset('utf8'); $link->query("SET NAMES utf8 COLLATE utf8_general_ci"); ?>

Если у Вас уже есть подключение к базе данных в отдельном файле, то просто подключаем этот файл через requi re_once() .

Затем в файле like.php создаём переменные и делаем запрос к БД на вставку новых данных:

$clientIp = $_POST['ip']; $article_id = $_POST['id']; $sql ; $query = mysqli_query($link, $sql); ?>

❸ Затем создаём PHP функцию для подсчёта лайков:

ction quantityLikes($postID) < // функция принимает ID поста global $link; $sql ; // выбираем IP из таблицы likes с уникальными значениями $query = mysqli_query($link, $sql); $likes = mysqli_fetch_all($query, 1); return $likes; > ?>

В результате вызова данной функции мы получим ассоциативный массив со значениями вида:

Array ( [0] => Array ( [client_ip] => 77.111.247.27 ) [1] => Array ( [client_ip] => 80.92.29.98 ) . )

Поскольку мы передавали ID конкретного поста, то мы получаем список IP-адресов только для данного поста.

❹ При загрузке страницы нам нужно определять, голосовал ли данный пользователь ранее за данный пост. Т.е. нам нужно определить его IP-адрес и проверить, есть ли он в массиве, полученном нами выше. К сожалению, стандартная функция PHP in_array() не подходит для проверки вхождения значений в ассоциативных массивах, поэтому мы будем использовать свою функцию:

tion is_in_array($array, $key, $key_value) < $within_array = false; foreach($array as $k=>$v) < if(is_array($v)) < $within_array = is_in_array($v, $key, $key_value); if($within_array == true) < break; >> else < if($v == $key_value && $k == $key) < $within_array = true; break; > > > return $within_array; > ?>

Функция возвратит нам true или false в зависимости от того, будет ли присутствовать IP-адрес пользователя в массиве адресов ранее голосовавших пользователей. Вызывать функцию будем со следующими параметрами:

is_in_array($likesArr, 'client_ip', $_SERVER['REMOTE_ADDR'])

❺ Далее заходим в файл шаблона, формирующий наш пост и в верху файла пишем PHP-код:

$likesArr = quantityLikes($post['id']); // в функцию quantityLikes мы передаём ID текущего поста. В моём блоге - это $post['id']. В Вашем это будет другое значение $likes = count($likesArr); // считаем лайки с помощью подсчёта общего значения количества элементов массива ?>

Далее в html-разметке вставляем:

$likesArr, ‘client_ip’, $_SERVER[‘REMOTE_ADDR’])): ?> $likes?> $likes?>

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

В data-параметрах для новых пользователей мы указали IP-адрес и ID данного поста. Эти параметры мы будем использовать в javascript-запросе к серверу при нажатии на иконку лайка.

❼ И напоследок, минимальный набор стилей:

.icon_head < height: 15px; width: 15px; cursor: pointer; >.noClick < pointer-events: none; /* делаем элемент некликабельным */ >

В итоге мы имеем удобный функционал:

• считающий лайки;
• с уникальными значениями в базе данных;
• с возможностью проголосовать 1 раз только с одного IP;
• не требующий никаких авторизаций через социальные сети или сервисы;
• не требующий зависимостей и сторонних библиотек.

Подписывайтесь на группу в ВКонтакте, вступайте в сообщество на Facebook, чтобы всегда быть в курсе актуальных выпусков
W e b d e v e l o p m e n t b l o g !

Кнопка «Мне нравится» — рейтинг для сайта

Добавьте виджет кнопки Лайк на ваш сайт с помощью нескольких строк HTML-кода!

Позвольте посетителям голосовать, оставляя лайки и дислайки на вашем сайте!

Получайте мгновенную статистику и аналитику!

Получайте тысячи лайков и репостов!

Получить код Получить плагин
10 лет успеха!

41 тема

Плагины и руководства

WordPress

Joomla

Drupal

WIX

Weebly

Shopify

Squarespace

uCoz

Blogger

Tumblr

vBulletin

44 языка

Google Rich Snippets

Сделайте ваш сайт привлекательным для посетителей в результатах поиска!
Повысьте рейтинг в поисковых системах!
Увеличьте число кликов!

Произвольные темы

Для мобильных

92 параметра

• Вам не нужно разрабатывать скрипт кнопки «Мне нравится» и «Не нравится» самостоятельно — просто скопируйте код кнопки «Мне нравится» и вставьте в HTML-код своего сайта.
• Настраивайте кнопку «Мне нравится» полностью под свои нужды.
• Задавайте произвольные тексты для кнопок лайк и дислайк.
• Настраивайте внешний вид с помощью CSS.

Поделиться

Проголосовав, пользователи могут поделиться ссылкой в социальных сетях: ВКонтакте, Одноклассники, Twitter, Facebook и т.д.

Онлайн-отчёты

Статистика голосования

График голосов

Сбор пожертвований

Выводите кнопки «Отблагодарить рублём» во всплывающем окне и собирайте пожертвования без каких-либо комиссий!

Асинхронная загрузка

Кнопка «Мне нравится» загружается асинхронно, поэтому не замедляет работу вашего сайта.

REST API

• Получайте статистику по лайкам для вашего сайта в форматах JSON, CSV и HTML с помощью простейшего REST API.
• Изменяйте количество лайков и дислайков для кнопок на вашем сайте.

Генератор кода кнопки «Мне нравится»

Тарифный план сайта

Отзывы

Просто упомяните @likebtn в Твиттере и мы добавим ваш отзыв

Партнёрская программа

Зарабатывайте деньги с LikeBtn! Разместите нашу реферальную ссылку или баннер на веб-сайте, получайте вознаграждения в виде 25% пожизненно от всех платежей, сделанных привлечённым клиентом (в том числе от всех его будущих платежей по продлению тарифных планов). Реферальные вознаграждения выплачивается вам через PayPal (для России только на счета категории Личный) в конце каждого месяца. Что если у меня нет счета PayPal? Начать зарабатывать