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

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

26.08.2015405310uTrojan

Наконец-то делимся простым и удобным скриптом для вывода рейтинга фильмов и сериалов. Ранее мы выкладывали версию 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) }) } })

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




Сохраните в социальную сеть
Комментарии (10)
AlinKo 26.08.2015 в 13:22Спам
От души, то что мне нужно!) спасибо огромное
4
ramaz churukba 02.09.2015 в 08:59Спам
А как выводить рейтинг картинками?
0
Fil 02.09.2015 в 10:23Спам
- Скрипт выведет только числа, а то, как оформить блок с рейтингом фильмов, решайте сами.

Картинкой, это уже на PHP
2
ramaz churukba 03.09.2015 в 11:06Спам
Всё, оформил вопрос снят :)
1
Марк Яковенко 11.09.2015 в 08:38
Добавлен исправленный код JavaScript, замените, кому нужно. Код взять из материала.
2
спасибо большое)
1
Спасибо! Отличный и нужный скрипт.
1
iVAN The 06.06.2016 в 21:08Спам
Подскажите в чем может состоять проблема? В Гугл хром, опере, и мазиле и Яндекс браузерах работает отлично, а вот в IE, Safary на андроидах планшетах и т.д не отображает, выводится лишь Загрузка... Это у меня что-то или сам скрипт работает лишь на определённых браузерах?
0
Денис Лузин 02.09.2016 в 09:43Спам
Почти такая же проблема как и у Ивана, только вообще ни в каком из браузеров не работает (пишет загрузка и все). Делал все по инструкции. Экспериментировал на двух фильмах - На краю стою и Мой парень - ангел (в других фильмах на сайте дополнительное поле не заполнено). Может подскажете, в чем ошибка? Заранее спасибо.
0
Ivan 16.10.2016 в 03:30Спам
Денис, случайно попал на эту тему, и увидел твой коммент, так вот, твоя проблем не в установке скрипта. Дело в изменении протокола на сайте, у меня тоже одно время не работал, пока я не заметил, а после просто в скрипте изменил на https:// и всё пошло дальше)
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт