Как сделать лайк js
Добавил пользователь Алексей Ф. Обновлено: 04.10.2024
Вот имеется у меня ссылка на пост/комментарий/фото вконтакте, вида вк.ком/wall123456_789
Открываю исходный код, вижу:
Каким образом можно обратиться к тегу div с классом "class="fw_like_wrap fl_l"", и выполнить из него содержимое onclick? Хочется, чтобы это было реализовано через javascript, текст которого будет вставляться в адресную строку браузера на открытой странице, и по нажатию кнопки enter будет выполняться (т.е. ставить "лайк" на этой странице).
div onmouseover="wall.likeOver('123456_789')" onmouseout="wall.likeOut('123456_789')" onclick="wall.like('123456_789', '11210536216ecf0e32')">
Меняешь Onclik на . и тут тебе выбор. пропись на открытие или пропись на определенную букву введеную. твой выбор. пропись на открытие кстати OnEnter == Active
Наверняка, почти каждый из Вас знает, что такое лайки. Однако, помимо лайков в социальных сетях, можно сделать свою собственную систему лайков на PHP и Ajax. В этой статье мы это подробно разберём.
Безусловно, на практике настоятельно рекомендую хранить лайки в базе данных. Однако, в рамках данной статьи, чтобы код легко было проверить, я решил сделать хранение лайков в ini-файле. Итак, вот собственно файл likes.ini:
Формат следующий: "id_статьи=количество_лайков". Теперь займёмся подготовкой данных для вывода на страницу:
Код прокомментирован, поэтому проблем с его пониманием возникнуть не должно. Теперь приступим к HTML-коду:
Здесь мы просто выводим данные на страницу. Самому блоку можно задать, безусловно, различные стили (например, хотя бы cursor: pointer;) для красоты.
И, наконец, пришло время написать скрипт like.php, который и занимается увеличением числа лайков:
Также обратите внимание, что в данном скрипте при попытке добавить лайк к статье, которой нет в INI-файле, ничего не выйдет. Эта проблема решается добавлением новой строки в INI-файл, если в процессе цикла так и не было обнаружено искомой статьи. Но, учитывая, что всё равно лайки надо хранить в базе данных, я убрал эту дополнительную функциональность из кода.
Вот таким образом делается система лайков на PHP и Ajax.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 5 ):
какой у вас плагин для подсветки кода?
Насколько я понял по коду страниц, плагин этот: https://code.google.com/p/google-code-prettify/ Что же касается самой статьи, нужно понимать, что отдельно взятый "лайк" на практике соответствует не только статье, но и конкретному пользователю. Поэтому для реализации с БД логично было бы сделать отдельную таблицу с лайками, которая будет иметь поля с id лайка, id связанной статьи и id связанного пользователя. На мой взгляд проблема состоит именно в этом, чтобы правильно организовать связи, а отправка ajax - это уже дело техники. И если уж совсем "разложить по косточкам" - получать данные в json было бы даже несколько удобнее.
а после отправки запроса на like.php какой переменной будет обозначаться id статьи?
Хорошая статья Михаил, но, как мне кажется, пора уже отказываться полностью от шорт тегов в PHP.
ты знаеш как добавить код и куда поставить хммммммм
В этой статье хочу рассказать, как сделать систему лайков. На просторах интернета, этот способ расписан не раз, но я его дополнял и переделывал в процессе использования и хочу представить ряд статей по такому рейтингу статей, с помощью лайков. Поэтому эта статья нужна как введение в эту тему, без не не будет потом в дальнейшем понятно что и куда.
Суть данного способа в том, что с помощью Произвольных полей, в которые записывается количество нажатий на кнопку Нравится к статье. У каждой записи WordPress есть свои уникальные произвольные поля. Их может быть бесконечное количество, все зависит от того, что вы в них записываете. Подробнее о произвольных полях, можно прочитать в статье - Произвольные поля (custom fields) в WordPress
И так, приступим к системе лайков на WordPress. Для начала надо добавить код функции и не одной, которые будут выполнять подсчет лайков и запись их в базу данных. Открываете файл пользовательских функций function.php и добавляете код в самый конец перед закрывающим тегом PHP ?>. Если его нет, то просто в самый конец.
Перед изменением function.php, обязательно сохраните его копию, чтобы в дальнейшем, в случаи ошибки, вернуть все как было. Так же, можете использовать дочернюю тему. Если вы не знаете что это такое, то ознакомьтесь со статьей - Дочерние темы WordPress.
Система лайков будет использовать AJAX, то есть отправку без перезагрузки страниц. Так что, первое что сделаем - зарегистрируем файл со скриптом, в котором будет наш jQuery скрипт, что и будет отправлять ajax запрос.
У меня еще нет статьи о том как правильно подключать AJAX на WordPress, постараюсь исправится :), но а пока что так. Сначала, как и сказал - регистрируем файл со скриптом и через wp_localize_script задаем дополнительные данные для него, чтобы jQuery правильно сформировало ajax запрос.
Как видите - стандартная регистрация и подключение через wp_enqueue_script. Подробнее об этом методе можно прочитать в статье - Как и где подключить скрипт?. В данном примере мы подключаем файл post-like.js, который у нас должен лежать в папке с темой в папке js. Если у вас скрипты лежат в другой папке, то укажите свой путь. Будьте внимательны, если укажите неправильно, работать не будет.
- Главный параметр тут - в первой строке указываем like_post - название для нашего скрипта. Еще его называют - рабочее название.
- Во второй строке повторяем рабочее название, чтобы у нас была связь, далее через запятую указано название ajax_var - это название Javascript объекта, который будет содержать данные. Название должно быть уникальным, чтобы не вызвать конфликтов с другими скриптами! Это нужно для нашего jQuery скрипта. Позже в нем увидите, где оно используется.
- После этого идет масив с параметрами.
- url - тут указываем путь к ajax файлу WordPress.
- nonce - тут функция что создает уникальный токен, что связан с конкретным действием, пользователем, сеансом пользователя и окном времени. Это нужно для правильной работы нашего рейтинга с помощью лайков.
Переходим к следующему пункту. После добавленного кода добавляем еще две строки.
Теперь мы прикрепляем нашу указанную будущую функцию по подсчету и записи лайков в БД к WordPress AJAX. То бишь срабатывать она будет только в момент аякс события после нажатия на кнопку - МНЕ НРАВИТСЯ. Название нашей будущей функции указано как - post_like.
Собственно сама функция:
Расписывать подробно не буду, кто знаком с WordPress все и так поймет, тут все просто. Создаем и обновляем в зависимости от результата два произвольных поля, voted_IP - поле, куда записывается ip проголосовавшего и votes_count - сам счетчик лайков к записи.
Суть функции проста, когда ее запустят - если все правильно подключено и работает она сработает в противном случаи вы увидите ошибку. Далее она проверяет ip получает данные счетчика. В конце идет проверка, голосовал ли посетитель. Если нет, то данные записываются в произвольные поля и счетчик увеличивается на единицу.
Теперь очередь функции, что проверяет посетителя на то, имеет ли он право голосовать, нажимать на кнопку, будет ли засчитана его отметка.
Тут тоже все просто. В 3 строке указанна переменная - $timebeforerevote в которой указано число 120. Это время в минутах, то бишь 2 часа. Можете сменить значение на свое.
Далее все просто, получаются данные из произвольных полей, проверяется IP, по математической формуле время последнего голосования, если есть совпадение и если все ок - голос засчитывается, в противном случаи отклоняется.
Третья функция, которую мы добавим - уже функция, что выводит код кнопки, нажатие на которую запустит подсчет и добавление голосов.
Данная функция, в зависимости от того, можно ли голосовать посетителю выведет ему или активную кнопку(в данном примере это просто блок. Сделано для удобства, чтобы вы могли добавить любые классы, псевдоэлементы и тд.) или нет. Рядом с ней будет счетчик уже проголосовавших, нажавших на кнопку.
На этом пункте с function.php можно закончить. Теперь перейдем уже к фронтенду, то есть к скриптам и выводу.
Вернемся к нашему первому пункту, где мы подключали скрипт - post-like.js. Подключить - мы его подключили, но нужно его и создать. Создайте и разместите в той папке, которую указали. В нашем примере, это папка js в корне темы.
Внутрь файла нужно добавить следующий код.
По скрипту видно, что он сработает, если нажать на кнопку с классом noactive_svg. Получаем айди нашего поста и дальше через аякс передаем данные. Так же видно что тут мы указываем те параметры, что задавали еще в первом шаге - ссылку на аякс WordPress и тд.
Если все успешно, все переменные получены, данные отправлены - получается значение счетчика и выводится в элементе с классомlikecount. Так же кнопке присваивается класс is-active. Можете использовать этот класс, если хотите обозначить неактивную кнопку.
Остался последний шаг. Вызвать вывод нашей кнопки в коде темы. Вывод нужно делать внутри цикла. Это обязательно! Цикл выглядит примерно так:
Он находится в index.php,single.php,archive.php и тд. Все зависит от темы. Сказать точно не могу, так как зависит от того как разработчик создал и какова структура.
Внутрь этого цикла, как раз и нужно добавить следующую строку:
В зависимости в какую среду кода добавляете выберите вариант. Это элементарно для людей с опытом. но к сожалению, многие допускают ошибки.
В этом же примере, можете добавить свои стили и получить любой вид кнопки и счетчика отметок нравится.
На этом все, спасибо за внимание. 🙂
Если Вам был полезным мой труд, можете финансово поддержать сайт или отключить блокировщик рекламы, что займет 2 минуты :)
Когда пользователь нажимает кнопку "Нравится" на вашей веб-странице, запускается событие в приложении, которое регистрирует эту отметку "Нравится" на Facebook.
Изменения в социальных плагинах для Европейского региона
Вы можете заметить некоторые изменения в социальных плагинах, связанные с тем, что запрос согласия на использование файлов cookie для пользователей Продуктов Facebook в Европейском регионе был обновлен. Мы прекращаем поддержку социальных плагинов "Нравится" и "Комментировать" для пользователей в Европейском регионе, если они 1) не вошли в свой аккаунт Facebook и 2) не предоставили согласие на управление файлами cookie для приложений и сайтов. Если оба эти требования соблюдены, пользователь сможет видеть такие плагины, как кнопки "Нравится" и "Комментировать", и пользоваться ими. Если какое-либо из перечисленных выше требований не выполнено, пользователь не увидит эти плагины.
Ниже перечислены страны, относящиеся к Европейскому региону.
Европейский союз (ЕС): Австрия, Бельгия, Болгария, Венгрия, Германия, Греция, Дания, Ирландия, Испания, Италия, Кипр, Латвия, Литва, Люксембург, Мальта, Нидерланды, Польша, Португалия, Румыния, Словакия, Словения, Финляндия, Франция, Хорватия, Чехия, Швеция, Эстония.
Страны, входящие в Европейскую экономическую зону, Европейскую ассоциацию свободной торговли или Таможенный союз: [Европейская экономическая зона/Европейская ассоциация свободной торговли] Исландия, Лихтенштейн и Норвегия; Швейцария: [Таможенный союз ЕС] Монако, Нормандские острова, остров Мэн; заморские территории Великобритании на острове Кипр; [Европейский Таможенный союз] Андорра, Ватикан, Сан-Марино.
Особые территории государств-членов Европейского союза: Азорские острова, Гваделупа, Канарские острова, Мадейра, Майотта, Мартиника, Реюньон, Сен-Мартен, Французская Гвиана.
Индивидуальная настройка кнопки "Нравится"
С помощью конфигуратора кнопки "Нравится" можно получить ее код для веб-страницы.
Читайте также: