Скрипт лайков для сайта

06.04.2015 18 16603

В данной статье мы разработаем собственную систему лайков на PHP и использованием Ajax. Что такое лайки я думаю вам не стоит обьяснять с таким изобилием социальных сетей в наши дни 🙂

MYSQL

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

И добавим в таблицу одну статью

Для начала подготовим html шаблон страницы

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

в data-id будем хранить ID нашей статьи которую будем лайкать.

Желательно блок с подключением к БД вынести в отдельный файл и потом везде его подключать, чтобы не дублировать везде доступы к БД.

Стили для нашей страницы мы вынесем в отдельный файлик

Javascript

После того как подготовили страницу и задали стили, перейдем к javascript. Наша задача будет отправить на сервер запрос с ID статьи и обратно получить количество лайков к статье. Это нужно для того чтобы обновить актуальную информацию по количеству лайков и вывести правильный результат.

Все это нужно сделать без обнволения страницы, т.е. методом Ajax. Использовать будем библиотеку JQuery.

Теперь осталось написать скрит для обработки запросов на сервере. Для этого создаем файлик like.php:

Мы в данной статье привели общее понимание как делается система лайков на PHP с использованием Ajax. Однако, для идеального скрипта его нужно еще дорабатывать и дорабатывать. Во-первых, еще нужно сделать защиту от накруток лайков, для этого нужно или записывать в cookie информацию о том, что пользователь уже лайкнул данную статью. Либо самое правильное решение позволить ставить лайки только зарегистрированным пользователям (как это делается в социальных сетях).

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

Комментарии

Сделал всё работает только как сделать чтобы с 1 усройства можно было поставить 1 лайк

"В ближайшее время постараюсь расписать эти 3 пункта по подробнее с примерами."
Администратор уже второй год пошел, для Вас ближайшее время это когда?
Сколько вешать в граммах?

Было бы здорово если бы Вы все-таки выполнили свое обещание, пожалуйста)
Если конкретно интересует вариант № 3

скачал ваш пример,сделал как указанно в статье,не работает.

Что конкретно у вас не работало? Ошибки какие то были?
Проверьте, может вы указали неверные доступы к БД.

Согласен оно не работает херня полная

Здравствуйте, вы писали что может реализуете лайки с авторизацией с примерами, если вы это сделали, где можно найти?

при клике на картинку,лайк не прибавляется,показывает 0.
доступы к бд верные

Админ, очень хотелось бы увидеть эти 3 способа

Думаю в ближайшее время найду свободную минутку и напишу статью о них )

У вас оибка в исходниках в Index.php, вы зачем -то делаете выход из папки

(знак "/" — первыйне нужен)

— вот так работает, это же относится и к другим путям)))

А так статья хорошая спасибо!))))

Это верно если из папки запускать, если же все это делается на http сервере нужно указывать адрес от корня сайта.
Т.к. например если у вас будет такого вида url http://site.ru/article/ , то css будет пытаться подгрузиться из такой директории http://site.ru/article/css/style.css — естественно это будет ошибкой

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

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

При перезагрузке страницы поле колличества лайков равно нулю!
Как исправить, но при первом же клике выводится число из БД.

Александр, нужно в файле index.html подключится к БД и выбрать статьи из таблицы articles, и потом вывести их и количество лайков к каждой статье.
Как это будет работать можете посмотреть в обновленном примере или посмотреть в статье (обновил описание)

Спасибо огромное!
Сейчас буду пробовать.

Привет! Отличная статья, но без записи cookies — не имеет смысла. Как прикрутить защиту от накрутки?

1. Самый лучший способ защититься от накрутки — сделать авторизацию на сайте и разрешить ставить лайки только зарегистрированным пользователям, при этом сохранять в БД (user_id и article_id) чтобы знать какой пользователь какую статью лайкнул. Таким способом врядли можно сделать накрутку лайков, разве что кто-то зарегистрирует много аккаунтов-ботов.
2. Второй способ сохранять IP пользователя который лайкнул статью (user_ip и article_id), но тогда не все пользователи смогут поставить лайк, например из-за динамического IP. Накрутить лайки в таком случае будет не трудно, нужно просто изменить IP (например подключить прокси)
3. Третий вариант — это записывать в куки браузера что этот пользователь уже поставил лайк. Самый легкий способ накрутить лайки — просто очистить куки )

В ближайшее время постараюсь расписать эти 3 пункта по подробнее с примерами.

Наверняка, почти каждый из Вас знает, что такое лайки. Однако, помимо лайков в социальных сетях, можно сделать свою собственную систему лайков на PHP и Ajax. В этой статье мы это подробно разберём.

Безусловно, на практике настоятельно рекомендую хранить лайки в базе данных. Однако, в рамках данной статьи, чтобы код легко было проверить, я решил сделать хранение лайков в ini-файле. Итак, вот собственно файл likes.ini:

Формат следующий: " > $data = parse_ini_file("likes.ini"); // Парсим INI-файл
$likes = $data[$id]; // Получаем количество лайков у статьи
?>

Код прокомментирован, поэтому проблем с его пониманием возникнуть не должно. Теперь приступим к HTML-коду:

Здесь мы просто выводим данные на страницу. Самому блоку можно задать, безусловно, различные стили (например, хотя бы cursor: pointer;) для красоты.

Переходим к JavaScript: наша задача при клике отправить запрос на сервер, передав ID статьи:

Здесь мы перехватываем клик по контейнеру #like. Далее отправляем запрос, передав соответствующий ID. Получив положительный ответ от сервера, увеличиваем количество лайков на 1 в блоке. Если пришёл ответ false от сервера, то сообщаем об ошибке.

И, наконец, пришло время написать скрипт like.php, который и занимается увеличением числа лайков:

if ($parts[0] == $_POST[" > $new_likes[] = implode("=", $parts); // Формируем новую строку вида " > >
$text = implode("
", $new_likes); // Преобразуем массив с новыми данными в строку с разделителем в виде перехода на новую строку
echo file_put_contents("likes.ini", $text); // Записываем строку в файл и выводим false в случае неудачи
?>

Вот и всё. Однако, безусловно, данный скрипт крайне далёк от того, что должно быть. Дальше эту структуру уже надо наращивать в зависимости от Ваших целей. Что, скорее всего, потребуется?. Во-первых, защита от накруток, хотя бы записывать в cookie информацию о том, что пользователь уже у этой статьи поставил лайк. Либо можно позволить ставить лайки только зарегистрированным пользователям (как это делается в социальных сетях).

Также обратите внимание, что в данном скрипте при попытке добавить лайк к статье, которой нет в INI-файле, ничего не выйдет. Эта проблема решается добавлением новой строки в INI-файл, если в процессе цикла так и не было обнаружено искомой статьи. Но, учитывая, что всё равно лайки надо хранить в базе данных, я убрал эту дополнительную функциональность из кода.

Вот таким образом делается система лайков на PHP и Ajax.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

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

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 5 ):

какой у вас плагин для подсветки кода?

Насколько я понял по коду страниц, плагин этот: https://code.google.com/p/google-code-prettify/ Что же касается самой статьи, нужно понимать, что отдельно взятый "лайк" на практике соответствует не только статье, но и конкретному пользователю. Поэтому для реализации с БД логично было бы сделать отдельную таблицу с лайками, которая будет иметь поля с id лайка, id связанной статьи и id связанного пользователя. На мой взгляд проблема состоит именно в этом, чтобы правильно организовать связи, а отправка ajax — это уже дело техники. И если уж совсем "разложить по косточкам" — получать данные в json было бы даже несколько удобнее.

а после отправки запроса на like.php какой переменной будет обозначаться id статьи?

Хорошая статья Михаил, но, как мне кажется, пора уже отказываться полностью от шорт тегов в PHP.

ты знаеш как добавить код и куда поставить хммммммм

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2019 Русаков Михаил Юрьевич. Все права защищены.

Всем привет! Не так давно я установила себе кнопки социальных сетей со счетчиками, которые выполнены в едином стиле. Хочется отметить, что сервис Social Likes предоставляет возможность установить одним блоком кнопки лайков со счетчиками от самых популярных социальных сетей: Вконтакте, Одноклассники, Twitter, Facebook, Мой мир, Google+.

Раньше у меня выводились кнопки Вконтакте, Twitter, Facebook, Google+ в одну строку, но для каждой использовался свой скрипт, который генерировался на официальном сайте. Как добавить такие кнопки Вконтакте, Twitter, Facebook я писала в статьеhttps://inetsovety.ru/kak-dobavit-knopki-vkontakte-facebook-i-twitter/ Сейчас я занялась ускорением блога. Анализируя свой блог на скорость загрузки, я заметила, что загрузка каждой из этих кнопок оказывает влияние на суммарную скорость загрузки страницы. Было принято решение найти альтернативный способ вывода. К сожалению, разновидностей кнопок со счетчиками, да еще и в классическом стиле оформлении не так много.

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

На многих моих сайтах стоят кнопки от share42.com, в частности в статье https://inetsovety.ru/plavayushtaya-panel-knopok-sotssetey/ Но у этих кнопок нет счетчиков. Но мне нравится способ их вывода. На самом сервисе я выбираю оформление кнопок, потом скачиваю архив с двумя файлами, которые потом загружаю на хостинг. Загрузка кнопок осуществляется с моего хостинга. Принцип работы кнопок соцсетей от Social Likes похожий.

Установка кнопок Social Likes

1. Первым делом переходим на сайт http://sapegin.github.io/social-likes/ru/
2. Подбираем оформление кнопок. Вариантов оформления несколько. Мне больше всего понравилось классическое оформление. Кстати, кому не нужны счетчики возле кнопок лайков, отключите их. Можно выбрать положение кнопок: горизонтальное, вертикальное и одной кнопкой. Также можно указать, кнопки каких соцсетей будут выводиться.
   
3. Посмотреть, как выглядят кнопки можно в самом верху. После того, как Вы определились со стилем кнопок, нажимайте на большую оранжевую кнопку с надписью "Скачать кнопки".
4. Сделайте резервную копию шаблона перед дальнейшей установкой кнопок.
5. Нужно распаковать скачанный архив. В нем будет 3 файла. Файлы social-likes.min и social-likes_classic мы будем копировать на хостинг в папку сайта, а из файла index возьмем код вывода кнопок. Тот же самый код показан на сайте Social Likes над кнопкой "Скачать кнопки":
   
6. Состоит код вывода кнопок из двух частей. Отмеченная цифрой 1 на картинке выше часть кода добавляется в файл header.php до закрывающего тэга шапки . Обратите внимание на следующий момент. Нужно указать правильный адрес к файлам social-likes.min и social-likes_classic, которые Вы загрузили на хостинг. Я эти файлы загрузила в папку social-likes в корневой папке сайта. Соответственно адрес к файлу у меня такой: https://inetsovety.ru/social-likes/. Вот мой код:

Также, если в файле header.php уже есть код с содержанием jquery, то еще раз добавлять его не нужно. Значит библиотека jquery уже подключена.

Вторую часть кода добавляем в файл single.php в то место, где будет выводиться блок кнопок. Вот пример моего кода:

Собственно на этом процесс установки закончен. Откройте любую свою запись и проверьте работоспособность кнопок Social Likes. Если кнопки не отображаются, проверьте не совершили ли Вы ни одной из следующих ошибок:

• не правильно указан адрес к файлам;
• два раза подключается jquery. В одном из бесплатных шаблонов, у меня jquery подключался следующей строкой:

если Вы добавили код вызова файлов кнопок выше строки вызова библиотеки, то кнопки не будут отображаться (будет просто текст).

Надеюсь у Вас получится быстро установить кнопки. Если возникнут вопросы, пишите в комментариях. Попробуем разобраться вместе.