JavaScript: How to Create a Simple Like Button
I previously made a blog post about how to make a like button with Ruby on Rails, and since my Flatiron cohort has now moved on to JavaScript, I figured I would make a follow up post.
For the purposes of this post I’ll be hooking my JavaScript up to a very simple api with a data structure that looks like this:
And my fetch requests will be toward a localhost address, but the code I use is the same on the JavaScript side as the one I would use for a Rails API backend that had the same content.
Step 1:
The first thing we have to do is wait. Wait for the DOM content to finish loading before we start running our JavaScript so that we have a firm grasp of what elements will exist when our code runs. That will look somehting like this:
In the second .then of that fetch request we’ve called another function, passing in the data that gets returned from the fetch request, which will be a JavaScript object containing all the information about the first image.
Step 2:
Now we need to look at the inside of that addPictureToPage function, specifically the part pertaining to the likes:
Here we declare a variable and set it equal to the first HTML element with the class “likes”, and then, using our new variable, we set the inner text of said HTML element to equal ` $
Then we use a second querySelector to declare a variable equal to the HTML element we’re setting up as the button the user will press to like the image. By the way, the relevant part of the HTML looks like this:
Now that we have variable equal to the like button, we simply add an event listener that’s listening for a click on the like button element. It’s inside the body of this event listener that we start to get fancy. We assign the inner text of the likes counter element as equal to the return value of another function, incrementLikes, and we also pass the object containing information about the image into this function. That leads us to step three.
Step 3:
The first thing we do inside this new function is declare a variable called “likes” that we will set equal to zero for now. Then we do our first fetch request of the function, in this fetch request we find the current number of likes according to the server. You might be wondering why we didn’t just pass in the number of likes when we called the function, or why we aren’t just checking the number of likes stored in the image object that we did pass into the function. The reason for this is that that data is old by now. It might very well be out of date, its origins trace back to the first fetch request we made when the page first loaded, the user might have done all kinds of things on the page. Among those many things the user might have done, is they might have already clicked the like button, they might be clicking it again. It’s a bit unconventional for us to allow the user to like something more than once, but for this application we’re going for it. Now that we know we have the current number of likes, and we’ve stored it in our handy “likes” variable, we create a “newLikes” variable that’s equal to the old likes plus one, or in other words, we’re incrementing the likes. Now we just need to update our server, this is where the second fetch request comes in. We use a patch method in this fetch, and we set the likes value of this image equal to our “newLikes” variable. All that’s left is to format the return value to be something that makes sense for the context that we’ve called it in. We create a string expressing the updated number of likes, and then return that string.
10 CSS Like And Favorite Buttons
Since the invention of the 'like button' by Facebook more and more web developers are using it to increase the views of articles by sharing them on social websites. The attractiveness of the 'like buttons' may become the main reason for liking our site. An eye-catching design is important in every field. In his collection, we showcase free CSS and HTML like/favorite buttons you can easily adapt to your and your website needs. With a little effort, you can also integrate theme with facebook like system.
Как сделать лайки на сайте html
Конструктор имеет в наборе все основные соцсети и сервисы, которые можно подключить с его помощью:
- Яндекс.Коллекции.
- Вконтакте.
- Facebook.
- Одноклассники.
- МойМир.
- Google+.
- Pinterest.
- Twitter.
- Blogger.
- Delicious.
- Digg.
- Reddit.
- Evernote.
- LinkedIn.
- Livejournal.
- Pocket.
- Qzone.
- Renren.
- Sina Weibo.
- Surfingbird.
- Tencent Weibo.
- Tumblr.
- Viber.
- WhatsApp.
- Skype.
- Telegram.
Easy Social Share Buttons — это платный плагин, который поддерживает более 40 социальных сетей. Его преимущество в функциональности. Он позволяет разместить бар кнопок в любом месте, использовать счетчик подписчиков, отслеживать метрики эффективности и прочее. Плагин предлагает более 25 различных шаблонов для своих иконок.
Активация плагина стоит $12. После нее можно перейти к настройкам кнопок.
Заключение
Кнопки лайков и шейров позволяют пользователям делиться ссылками на ваш контент с друзьями в социальных сетях. Когда посетитель сайта нажимает кнопку шейра, ссылка на страницу, часть контента и изображение копируются. Публикация создается автоматически на странице личного аккаунта в сети. Кнопка лайка позволяет отмечать понравившиеся материалы вне ленты социальной сети.
Упоминания в социальной сети — это выход на свою целевую аудиторию непрямым способом. Ссылки в соцсетях подсказывают поисковому роботу, что публикация сайта «Х» отмечена пользователями, а значит его контент полезен. Устанавливают кнопки:
- вручную, встраивая фрагмент кода в страницы;
- автоматически, используя плагины.
Автоматическое внедрение кнопок реализуется с помощью плагинов, например, для WordPress. Разработок существует множество, мы рассмотрели следующие:
-
Easy Social Share Buttons — это платный плагин стоимостью $12. Он работает с разными соцсетями и прост в настройке. Основное преимущество — 25 готовых шаблонов like and share button;
Собственная система лайков на PHP и JQuery
Информация о лайках будет храниться у нас в Базе Данных MYSQL. Для начала создадим структуру таблицы.
И добавим в таблицу одну статью
Для начала подготовим html шаблон страницы
На странице мы будем выводить статьи из БД, поэтому нужно сначала подключится в БД и сделать выборку наших статтей:
в data-id будем хранить ID нашей статьи которую будем лайкать.
Желательно блок с подключением к БД вынести в отдельный файл и потом везде его подключать, чтобы не дублировать везде доступы к БД.
Стили для нашей страницы мы вынесем в отдельный файлик
Javascript
После того как подготовили страницу и задали стили, перейдем к javascript. Наша задача будет отправить на сервер запрос с ID статьи и обратно получить количество лайков к статье. Это нужно для того чтобы обновить актуальную информацию по количеству лайков и вывести правильный результат.
Все это нужно сделать без обнволения страницы, т.е. методом Ajax. Использовать будем библиотеку JQuery.
Теперь осталось написать скрит для обработки запросов на сервере. Для этого создаем файлик like.php:
Мы в данной статье привели общее понимание как делается система лайков на PHP с использованием Ajax. Однако, для идеального скрипта его нужно еще дорабатывать и дорабатывать. Во-первых, еще нужно сделать защиту от накруток лайков, для этого нужно или записывать в cookie информацию о том, что пользователь уже лайкнул данную статью. Либо самое правильное решение позволить ставить лайки только зарегистрированным пользователям (как это делается в социальных сетях).
Если будут вопросы пишите в комментариях, буду рад помочь.
Комментарии
Отлично работает, спасибо
Сделал всё работает только как сделать чтобы с 1 усройства можно было поставить 1 лайк
"В ближайшее время постараюсь расписать эти 3 пункта по подробнее с примерами."
Администратор уже второй год пошел, для Вас ближайшее время это когда?
Сколько вешать в граммах?
Было бы здорово если бы Вы все-таки выполнили свое обещание, пожалуйста)
Если конкретно интересует вариант № 3
скачал ваш пример,сделал как указанно в статье,не работает.
Что конкретно у вас не работало? Ошибки какие то были?
Проверьте, может вы указали неверные доступы к БД.
Согласен оно не работает херня полная
Здравствуйте, вы писали что может реализуете лайки с авторизацией с примерами, если вы это сделали, где можно найти?
при клике на картинку,лайк не прибавляется,показывает 0.
доступы к бд верные
Админ, очень хотелось бы увидеть эти 3 способа
Думаю в ближайшее время найду свободную минутку и напишу статью о них )
У вас оибка в исходниках в Index.php, вы зачем -то делаете выход из папки
(знак "/" — первыйне нужен)
<link href="css/style.css" rel="stylesheet"> — вот так работает, это же относится и к другим путям)))
А так статья хорошая спасибо!))))
Это верно если из папки запускать, если же все это делается на 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 пункта по подробнее с примерами.