Как сделать избранное на сайте

Обновлено: 08.07.2024

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

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

Для этого установите на сайте маленький скрипт, написанный на javascript. С помощью этого скрипта вы сможете помочь посетителю быстро добавить в закладки ваш проект.
Можно вывести кнопку, можно вывести картинку или текст с намеком о том, что он может на нее нажать.

Ближе к делу. Вот такой результат будет, если вы установите скрипт, который я вам предлагаю:

Кроссбраузерное добавление страницы в закладки реализуется с использованием JavaScript. Для добавления страницы в Избранное браузеров Internet Explorer и браузеров, работающих на движке IE, вызывается стандартный метод AddFavorite . Однако здесь есть одна важная деталь. Если страница IE открыта как embedded-объект в другом приложении, например в плагинах или при использовании компонентов для работы с html, то объект window.external присутствует, но его метод AddFavorite не срабатывает. Это наиболее частая ошибка разработчиков, которые просто копируют код друг у друга без его понимания и тестирования. Также большой ошибкой будет использование на своем сайте только одного этого способа.

Браузеры на движке Gecko, такие как Firefox, Netscape, K-Meleon и другие, имеют объект window.sidebar и метод для добавления addPanel . Третий параметр метода недокументирован и является необязательным, поэтому в скрипте заменяется просто пустой строкой. Обратите внимание, что по умолчанию ссылка добавляется не совсем в закладки, а в боковую панель браузера. Для добавления страницы в нужную папку закладок выберите ее в выпадающем меню.

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

Пример ссылки "Добавить в Избранное" для этого скрипта:

Рабочий пример реализации вы можете увидеть прямо на этой странице. Использование конструкций try-catch позволяет скрипту правильно отрабатывать в любых нестандартных ситуациях, например в окне IE Tab, открытом в браузере Firefox. Также скрипт корректно работает в различных экзотических браузерах, которые нельзя однозначно определить через UserAgent или DOM-свойства . Всякие хваленые коммерческие поделки типа DLE в этой ситуации молча обламываются.

Ищется документация по движку WebKit (браузеры Safari, Chrome) в части добавления страницы в закладки. Кто найдет — большая просьба поделиться.

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

Для того, чтобы реализовать систему закладок, необходимо:

  • Добавить таблицу, которая реализует отношение Many-to-Many между пользователем и статьёй или комментарием.
  • Добавить view, который будет обрабатывать данный запрос.
  • Добавить url для обработки запроса на добавление или исключение объекта из избранного.
  • Написать html-код, который будет отвечать за отображение счётчика добавленного в закладки.
  • Добавить javascript обработчик, который будет вызывать AJAX-запрос.

На данном сайте в качестве иконки счётчика используется иконка звезды из Bootstrap.

  1. 1. Many-to-Many таблица для закладок
  2. 2. views.py
  3. 3. urls.py
  4. 4. html
  5. 5. javascript
    1. 1. Настройка AJAX на использование CSRF токена
    2. 2. Обработчики добавления в закладки и их подключение

    Many-to-Many таблица для закладок

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

    Далее наследуемся от этой модели, чтобы создать две отдельных модели данных для комментариев и статей.

    Здесь добавим поле obj , которое будет отвечать за внешний ключ на таблицу контента: Article или Comment. Важно, чтобы поле называлось одинаково в обеих моделях. Тогда можно будет написать один view для всех таблиц закладок.

    views.py

    Для обработки запроса на добавление в закладки или удаление из закладок создадим view, которое сможет работать с любой таблицей закладок, которая будет удовлетворять общему виду, представленному выше.

    Заметьте, что в данном коде использовалось сравнение obj_id=pk , что означает, что мы пытаемся найти запись в таблице закладок по id объекта. Поскольку во всех моделях - это поле одинаковое, то проблем возникнуть не должно с подобным синтаксисом.

    urls.py

    А теперь посмотрим, как будут выглядеть url для обработки запросов на добавление контента в закладки.

    Чтобы выполнить этот запрос пользователь должен быть авторизован, за что отвечает декоратор login_required .

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

    В моём случае html-код выглядит так:

    Здесь имеется несколько кастомных атрибутов:

    • data-id - отвечает за pk контента, который можно добавлять в закладки.
    • data-type - тип контента, это же название фигурирует и в url.
    • data-action - действие, которое нужно совершить, в данном случае добавление в закладки
    • data-count - счётчик, показывающий сколько пользователей добавили контент в закладки

    Что касается следующего кода like_obj.get_bookmark_count, то это тоже единообразный метод, которая добавляется в модели контента, например для статей будет выглядеть следующим образом:

    javascript

    AJAX-запросы для данного функционала создаются с помощью библиотеки jQuery .

    При работе с AJAX необходимо учитывать несколько нюансов:

    1. Если у вас мультиязычный сайт, у которого различаются url по текущему языку, то лучше сделать отдельное api для AJAX, которое будет независимо от языка, иначе нужно будет учитывать язык в url при создании AJAX-запроса. Если не учитывать язык, то будет производится редирект AJAX-запроса на текущий url с учётом языка, и запрос не будет срабатывать. То есть редиректов быть не должно.
    2. Django не примет AJAX-запрос, если он не будет настроен на использование CSRF токена, который служит для борьбы с подделкой межсайтовых запросов. При каждом запросе страницы Django подмешивает CSRF токен в Cookies, оттуда его и можно будет взять.

    Настройка AJAX на использование CSRF токена

    Следующий код можно включить в скрипт на каждой странице сайта, где нужно использоваться AJAX. Он автоматически будет настраивать AJAX на использование CSRF Токена.

    Обработчики добавления в закладки и их подключение

    В ниже следующем коде формируется AJAX-запрос на вызов добавления или удаления из закладок контента. В данном случае код будет универсален как для статей, так и для комментариев.

    В url запроса можно наблюдать следующую строку "/api/" + type + "/" + pk + "/" + action + "/", которая означает, что модуль для AJAX запросах висит на префиксе /api/ , то есть на этот url он подключён в основном urls.py файле проекта, далее идёт тип контента, его первичный ключ и действие которое нужно совершить. Поскольку все эти данные забираются из атрибутов data, то итоговый url будет выглядеть следующим образом:

    • /api/article/112/bookmark/ - для статей
    • /api/comment/14/bookmark/ - для комментариев

    В обработчике успешного результата можно добавить подсвечивание звёздочки закладки для текущего пользователя и т.д.

    Для Django рекомендую VDS-сервера хостера Timeweb .

    Рекомендуем хостинг TIMEWEB

    Рекомендуем хостинг TIMEWEB

    Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.

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


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

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

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

    Далее, чтобы скрипт заработал, вставляем где у вас будет сама кнопка такую ссылку:

    Данный скрипт способен определять все известные браузеры, единственный его недостаток, это вместо добавления в избранное в Google Chrome пользователям будет выводиться информация о нажатии клавиш быстрого доступа.

    Другими словами, будет выводиться окно, в котором будет написано, что необходимо нажать сочетание клавиш Ctrl+D, это вызывает неудобства, но с другой стороны, при помощи данного функционала, вы всё же сможете повлиять на решение посетителей о добавлении сайта в закладки.

    Использование данного функционала не обязательно, но в то же время может повлиять на качество площадки. Воспользуйтесь данным скриптом и сделайте свой сайт ещё лучше.

    Читайте также: