Как сделать счетчик лайков js
Обновлено: 05.07.2024
Полный ответ: ну . JavaScript - это клиентский скрипт. Вам понадобится сценарий на стороне сервера. Лучший пример - PHP. Если вы изучите его основы, вы сами поймете, как это сделать.
например, в файле main.php,
в файле like.php,
Вам понадобится какой-то бэкэнд для обработки процесса сохранения нового лайка в вашей базе данных. Это можно сделать, например, с помощью PHP.
Вероятно, вы также захотите получить некоторые данные из серверной части, чтобы показать общее количество лайков.
Добавьте виджет кнопки Лайк на ваш сайт с помощью нескольких строк HTML-кода!
Позвольте посетителям голосовать, оставляя лайки и дислайки на вашем сайте!
Получайте мгновенную статистику и аналитику!
Получайте тысячи лайков и репостов!
41 тема
Плагины и руководства
44 языка
Google Rich Snippets
Сделайте ваш сайт привлекательным для посетителей в результатах поиска!
Повысьте рейтинг в поисковых системах!
Увеличьте число кликов!
Произвольные темы
Для мобильных
92 параметра
Проголосовав, пользователи могут поделиться ссылкой в социальных сетях: ВКонтакте, Одноклассники, Twitter, Facebook и т.д.
Онлайн-отчёты
Статистика голосования
График голосов
Сбор пожертвований
Асинхронная загрузка
REST API
- Получайте статистику по лайкам для вашего сайта в форматах JSON, CSV и HTML с помощью простейшего REST API.
- Изменяйте количество лайков и дислайков для кнопок на вашем сайте.
Отзывы
Просто упомяните @likebtn в Твиттере и мы добавим ваш отзыв
Партнёрская программа
Зарабатывайте деньги с LikeBtn!
Разместите нашу реферальную ссылку или баннер на веб-сайте, получайте вознаграждения в виде 25% пожизненно от всех платежей, сделанных привлечённым клиентом (в том числе от всех его будущих платежей по продлению тарифных планов).
Реферальные вознаграждения выплачивается вам через PayPal (для России только на счета категории Личный) в конце каждого месяца. Что если у меня нет счета PayPal?
В дополнении к голосованию через соц. сети хочу поделиться кодом получения количества лайков с помощью php кода, а не javasript.
Кто не желает читать методы поиска, прошу в самый конец поста, там я выложил код целиком и ссылку на файл. По тексту будет мало кода по причине местного парсера, который пожрет половину кавычек.
А нафига оно мне?
Ответ прост. На всех сайтах где требуются лайки в принципе, мы добавляем 4 социальных сети: facebook (fb), vkontakte (vk), google+ (g+) и twitter (tw). Вариант на js может получать количество всех лайков кроме G+, нехитрый запрос в гугле (Иногда задумываюсь: чтобы мы без него делали? На книжках бы разорились!) дает ссылку на некий ресурс, откуда мы почерпнем необходимые знания, но к сожалению этот вариант вовсе не для js. Дальнейшее гугление ничего не дает и принимается волевое решение: к черту js! давай на php. (в дальнейшем в этой связи были свои разочарования, которые мы с успехом преодолели).
Copy-Past и немного фантазии
Честно сказать как работает код получения g+ лайков, я не сильно и разбирался. Скопировал, вставил в файл php, поправил на свои параметры — все работает, значит, пользуемся на здоровье. Я пытался найти официальную документацию по поводу этого кода, но у меня ничего не получилось, наверное, я просто не старался. Ниже код, который я взял с указанного ресурса.
Так вот. Дергать весь остальной код оттуда, я посчитал излишним, мы и сами с усами. Получить контент документа функцией file_get_contents() мы давно умеем, а если не умеем, то читаем документацию, а дальше все аналогично js за исключением разбора json, в php это делается явным образом через json_decode(). Первым сюрпризом для меня было, что fb отдает данные не в json (а может надо было указать формат выдачи в запросе. ), а в xml. Но это мы быстро победили. Все остальное было просто забрал json, вытащил нужную инфу и вот. Ну в общем все тут понятно. должно быть. Наверное. Ниже есть место для комментов ежели что.
Разбор полетов
Все соц сети окромя VK работают по url страницы, для VK нужен уникальный id записи или еще чего-то. Ваша фантазия тут будет уместна.
Код подсчета количества лаков fb.
Код подсчета количества лаков vk. (Не забудьте сменить YOUR_ID на контактовский id сайта)
Код подсчета количества лаков twitter.
Не забываем создать id для сайта в vk. В приложенных файлах есть код как подключить и вывести сами кнопки лайков.
Информация о лайках будет храниться у нас в Базе Данных MYSQL. Для начала создадим структуру таблицы.
И добавим в таблицу одну статью
Для начала подготовим html шаблон страницы
На странице мы будем выводить статьи из БД, поэтому нужно сначала подключится в БД и сделать выборку наших статтей:
в data-id будем хранить ID нашей статьи которую будем лайкать.
Желательно блок с подключением к БД вынести в отдельный файл и потом везде его подключать, чтобы не дублировать везде доступы к БД.
Стили для нашей страницы мы вынесем в отдельный файлик
Javascript
Все это нужно сделать без обнволения страницы, т.е. методом Ajax. Использовать будем библиотеку JQuery.
Теперь осталось написать скрит для обработки запросов на сервере. Для этого создаем файлик like.php:
Если будут вопросы пишите в комментариях, буду рад помочь.
Комментарии
Сделал всё работает только как сделать чтобы с 1 усройства можно было поставить 1 лайк
Было бы здорово если бы Вы все-таки выполнили свое обещание, пожалуйста)
Если конкретно интересует вариант № 3
скачал ваш пример,сделал как указанно в статье,не работает.
Что конкретно у вас не работало? Ошибки какие то были?
Проверьте, может вы указали неверные доступы к БД.
Согласен оно не работает херня полная
Здравствуйте, вы писали что может реализуете лайки с авторизацией с примерами, если вы это сделали, где можно найти?
при клике на картинку,лайк не прибавляется,показывает 0.
доступы к бд верные
Админ, очень хотелось бы увидеть эти 3 способа
Думаю в ближайшее время найду свободную минутку и напишу статью о них )
У вас оибка в исходниках в Index.php, вы зачем -то делаете выход из папки
— вот так работает, это же относится и к другим путям)))
А так статья хорошая спасибо!))))
Не везде и не всегда, на хостинге у меня уже нужно прописывать локально а не отталкиваться от корня сайта.
Все работает, пытаюсь сделать так, чтобы можно было удалять лайки еще, а не только ставить, ничего не выходит. Как бы получается что-то, то коряво работает очень
Александр, нужно в файле index.html подключится к БД и выбрать статьи из таблицы articles, и потом вывести их и количество лайков к каждой статье.
Как это будет работать можете посмотреть в обновленном примере или посмотреть в статье (обновил описание)
Спасибо огромное!
Сейчас буду пробовать.
В ближайшее время постараюсь расписать эти 3 пункта по подробнее с примерами.
Счетчик лайков с конфетами
Что это
Видеообзор
Что понадобится
Как собрать
Сборка устройства состоит из аппаратной и программной части.
Hardware-часть
Общий вид устройства.
Переходите к программной части.
Software-часть
В качестве примера возьмем адрес facebook-страницы Амперки:
и простым перетягиванием ярлыка файла скрипта (drag-and-drop) перенести файл getLikes.php в файловую систему сервера.
В заключении проверьте успешность работы скрипта. Для этого перейдите по адресу:
Если при этом веб-браузер отобразит пустое окно с единственной строкой: fan_count=4,218 (число может быть иным), то все сделано верно.
Пишем функцию лайков для постов блога
Для чего нужна функция лайков? В первую очередь, чтобы пользователи могли оценить Вашу запись, а также видеть, как её оценивают другие. Как сделать самостоятельно такой функционал — я расскажу в данном посте. Если Вам понравится данный пост — поставьте лайк! 🙂
Первым делом нам нужно создать таблицу в базе данных. Допустим, у нас сайт с базой данных MySQL. Если у Вас в проекте используется другая БД — перечень действий будет аналогичным, за исключением некоторых команд.
Первому столбцу вводим имя — id , тип — INT , Индекс — PRIMARY (во всплывающем окне нажимаем ВПЕРЁД), ставим галочку A_I (auto increment).
Второму столбцу вводим имя — client_ip , тип — VARCHAR , длина — 15 .
Третьему столбцу вводим имя — article_id , тип INT
Сравнение ставим utf8_general_ci , тип InnoDB .
Если Вы работаете с базой данных из консоли — находясь в режиме sql выполняем команду:
❷ Далее создаём файл, назовём его like.php
В файле первым делом создаём подключение к базе данных:
Если у Вас уже есть подключение к базе данных в отдельном файле, то просто подключаем этот файл через requi re_once() .
Затем в файле like.php создаём переменные и делаем запрос к БД на вставку новых данных:
❸ Затем создаём PHP функцию для подсчёта лайков:
В результате вызова данной функции мы получим ассоциативный массив со значениями вида:
Поскольку мы передавали ID конкретного поста, то мы получаем список IP-адресов только для данного поста.
❹ При загрузке страницы нам нужно определять, голосовал ли данный пользователь ранее за данный пост. Т.е. нам нужно определить его IP-адрес и проверить, есть ли он в массиве, полученном нами выше. К сожалению, стандартная функция PHP in_array() не подходит для проверки вхождения значений в ассоциативных массивах, поэтому мы будем использовать свою функцию:
Функция возвратит нам true или false в зависимости от того, будет ли присутствовать IP-адрес пользователя в массиве адресов ранее голосовавших пользователей. Вызывать функцию будем со следующими параметрами:
❺ Далее заходим в файл шаблона, формирующий наш пост и в верху файла пишем PHP-код:
Далее в html-разметке вставляем:
Таким образом, уже при загрузке страницы мы выводим разные иконки для новых или голосовавших ранее пользователей: для новых стандартно используется с пустым сердечком, для голосовавших — с заполненным. Также выводим в разных случаях разный title .
В data-параметрах для новых пользователей мы указали IP-адрес и ID данного поста. Эти параметры мы будем использовать в javascript-запросе к серверу при нажатии на иконку лайка.
❼ И напоследок, минимальный набор стилей:
В итоге мы имеем удобный функционал:
- считающий лайки;
- с уникальными значениями в базе данных;
- с возможностью проголосовать 1 раз только с одного IP;
- не требующий никаких авторизаций через социальные сети или сервисы;
- не требующий зависимостей и сторонних библиотек.
Подписывайтесь на группу в ВКонтакте, вступайте в сообщество на Facebook, чтобы всегда быть в курсе актуальных выпусков
W e b d e v e l o p m e n t b l o g !
IP не вариант т.к. может изменятся.
Проще было бы если лайкать было разрешено только авторизированным пользователям. Торгда можно ограничить наверняка.
Ip — вещь непостоянная, и полагаться на него не нужно. Хотя, в добавок можно ещё и порцию куков клиенту подсунуть. И если повезёт, и пользователь окажется малограмотным, то даже после смены ip ему не позволит лайкнуть проверка на куки.))
Проще было бы если лайкать было разрешено только авторизированным пользователям. Торгда можно ограничить наверняка.
Ip — вещь непостоянная, и полагаться на него не нужно. Хотя, в добавок можно ещё и порцию куков клиенту подсунуть. И если повезёт, и пользователь окажется малограмотным, то даже после смены ip ему не позволит лайкнуть проверка на куки.))
IP не вариант т.к. может изменятся.
согласен полностью, что ip это не самое надёжное, но и на регестрацию я пойти не могу, задумка в том и была, что бы обойтись как то без регистрации. а вот с куками тоже можно подумать
Немного перелотал скрипт, столкнулся с проблемой.
Изучаю php, по-этому пробую все, в данном случае добавление лайка по IP и проверка данного IP в БД, если есть, то лайк убавляется.
Не пойму почему IP не удаляется в БД, подскажите пожалуйста:
Да этот вариант самый первый пробовал, ща попробую куки удалить
Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.
Счетчики и показания © 2022
Внимание! Информация, опубликованная на сайте, носит исключительно ознакомительный характер и не является рекомендацией к применению.
Читайте также: