Как вывести рейтинг фильма с КиноПоиска и IMDb на JavaScript

Как вывести рейтинг фильма с КиноПоиска и IMDb на JavaScript

02015-08-261315114Денис Абдуллин

Наконец-то делимся простым и удобным скриптом для вывода рейтинга фильмов и сериалов. Ранее мы выкладывали версию PHP, на этот раз оно не требуется.

В этом материале описано, как получать текущий рейтинг фильма или сериала с КиноПоиска и IMDB и использовать на своем сайте, только на JavaScript. Все что нужно будет записывать в качестве статичной информации – это ID фильма с КиноПоиска. Да, КиноПоиск сам выдаст свой рейтинг и IMDB. Быстрая загрузка, практичность и важность для сайтов с кино и сериалами.

Также скрипт позволяет вывести количество проголосовавших на КиноПоиск и отдельно IMDb.

Установка

1. Загрузите movieRating.js в файловый менеджер.

2. Страница материала и комментариев к нему, перед </body>:

Код

<script type="text/javascript">
var kp_id = "$OTHER1$"; // Доп. поле в котором будет ID фильма.
</script>
<script src="/movieRating.js"></script>

3. Страница материала и комментариев к нему. Там, где хотите видеть рейтинг:

Код

<div>
<p><strong>КиноПоиск:</strong> <span id="kp_rating">Загрузка...</span> (<span title="Количество голосов" id="kp_num_vote">Загрузка...</span>)</p>
<p><strong>IMDb:</strong> <span id="imdb_rating">Загрузка...</span> (<span title="Количество голосов" id="imdb_num_vote">Загрузка...</span>)</p>
</div>

В дополнительное поле $OTHER1$ добавляете ID фильма с kinopoisk.ru.

Пример

Фильм «Безумный Макс: Дорога ярости», его страница на КиноПоиск: http://www.kinopoisk.ru/film/453406/

453406 – это ID фильма, который нужно добавить в доп. поле.

Безумный Макс на КиноПоиске

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

Вот очень хороший пример, правда рейтинг только один:

Рейтинг фильма КиноПоиск и IMDB

Согласитесь, здорово. Знаете еще интересные примеры вывода рейтинга или есть идеи, то просим поделиться с нами в комментариях. Многие люди при выборе фильма, при решении что посмотреть, обращают внимание на рейтинг, такую вещь следует сделать заметной и привлекательной. Обратите внимание, что пример выше в целом простой и рейтинг фильма от КиноПоиск в таком оранжевом круге послужит хорошим акцентом.


Содержимое movieRating.js:

Код
$.ajax({url:"http://rating.kinopoisk.ru/"+kp_id+".xml",dataType:"xml",success:function(data){$(data).find("rating").each(function(){var kp_rating=$(this).find('kp_rating').html();var kp_num_vote=$(this).find('kp_rating').attr('num_vote');var imdb_rating=$(this).find('imdb_rating').html();var imdb_num_vote=$(this).find('imdb_rating').attr('num_vote');$("#kp_rating").html(kp_rating);$("#kp_num_vote").html(kp_num_vote);$("#imdb_rating").html(imdb_rating);$("#imdb_num_vote").html(imdb_num_vote)})}});

Исправленный код, выводит значение 0, если на сайте kinopoisk у фильма отсутствует рейтинг IMDb:

Код
$.ajax({ url: "http://rating.kinopoisk.ru/" + kp_id + ".xml", dataType: "xml", success: function(data) { $(data).find("rating").each(function() { var kp_rating = $(this).find('kp_rating').html(); var kp_num_vote = $(this).find('kp_rating').attr('num_vote'); var imdb_rating = $(this).find('imdb_rating').html(); var imdb_num_vote = $(this).find('imdb_rating').attr('num_vote'); $("#kp_rating").html(kp_rating); $("#kp_num_vote").html(kp_num_vote); $("#imdb_rating").html(imdb_rating||0); $("#imdb_num_vote").html(imdb_num_vote||0) }) } })

Все вопросы задавайте в комментариях.


Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (14)
Владлена Челова 2015-12-03 в 06:02 / МатериалСпам
Спасибо! Отличный и нужный скрипт.
1
Денис Лузин 2016-09-02 в 09:43 / МатериалСпам
Почти такая же проблема как и у Ивана, только вообще ни в каком из браузеров не работает (пишет загрузка и все). Делал все по инструкции. Экспериментировал на двух фильмах - На краю стою и Мой парень - ангел (в других фильмах на сайте дополнительное поле не заполнено). Может подскажете, в чем ошибка? Заранее спасибо.
0
Николай Риженко 2015-10-11 в 14:48 / МатериалСпам
спасибо большое)
1
Fil 2015-09-02 в 10:23 / МатериалСпам
- Скрипт выведет только числа, а то, как оформить блок с рейтингом фильмов, решайте сами.

Картинкой, это уже на PHP
2
Марк Яковенко 2015-09-11 в 08:38 / Материал
Добавлен исправленный код JavaScript, замените, кому нужно. Код взять из материала.
2
ramaz churukba 2015-09-03 в 11:06 / МатериалСпам
Всё, оформил вопрос снят :)
1
AlinKo 2015-08-26 в 13:22 / МатериалСпам
От души, то что мне нужно!) спасибо огромное
4
ramaz churukba 2015-09-02 в 08:59 / МатериалСпам
А как выводить рейтинг картинками?
0
iVAN The 2016-06-06 в 21:08 / МатериалСпам
Подскажите в чем может состоять проблема? В Гугл хром, опере, и мазиле и Яндекс браузерах работает отлично, а вот в IE, Safary на андроидах планшетах и т.д не отображает, выводится лишь Загрузка... Это у меня что-то или сам скрипт работает лишь на определённых браузерах?
0
Ivan 2016-10-16 в 03:30 / МатериалСпам
Денис, случайно попал на эту тему, и увидел твой коммент, так вот, твоя проблем не в установке скрипта. Дело в изменении протокола на сайте, у меня тоже одно время не работал, пока я не заметил, а после просто в скрипте изменил на https:// и всё пошло дальше)
0
Don Don 2017-05-29 в 10:54 / МатериалСпам
Спасибо. Код обновите, добавьте https вместо http для ссылки в коде, а то не работает. Для php версии тоже самое.
0
AlinKo 2017-03-31 в 08:15 / МатериалСпам
Кто подскажет, возможно как то вывести в вид материалов?
0
Don Don 2017-06-08 в 14:24 / МатериалСпам
Перестал на днях скрипт работать, выдает ошибку:

XMLHttpRequest cannot load https://rating.kinopoisk.ru/252089.xml. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://domain.ru' is therefore not allowed access.
0
Dima 2017-06-11 в 10:00 / МатериалСпам
Почему то сначала все отлично работало (огромное спасибо за скрипт), но теперь на этой неделе не работает, пишет "Загрузка..."
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.