Blogger: сортируем посты по популярности

2012-11-04

Стандартно платформа Blogger предоставляет только две опции для сортировки постов: от новых к старым и наоборот. Виджеты Graddit дают возможность отобразить посты по убыванию или возрастанию их рейтинга. Посмотрите на эту страницу: http://fruitfulbookmarks-ru.blogspot.com/p/blog-page.html. На ней отображены 5 лучших постов из этого блога (по убыванию рейтинга). А на этой: http://fruitfulbookmarks-ru.blogspot.com/p/blogspot.html — анонсы лучших постов по теме "blogspot" (т.е. у которых есть метка blogspot).

Это не посты, а статические страницы, которые движок Blogger позволяет создавать. Если вы откроете исходный код этих страниц, то увидите, что на самом деле в них нет никаких постов, а лишь немного кода на javascript. Чтобы создать такую же страницу вам нужно:

  1. если вы всё ещё не создали аккаунт, сделайте это;
  2. создайте топ с нужными параметрами на закладке топов;
  3. В секции <head> своего шаблона подключите graddit-extras.js:
    <script src='http://static.graddit.com/js/graddit-extras.js' type='text/javascript'/>
  4. Создайте обычную HTML страницу, переключитесь в режим редактирования HTML и подключите jquery. Конечно, если эта библиотека ещё не подключена у вас в самом шаблоне:
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
  5. Добавьте функцию, которая будет отвечать за загрузку и обработку ваших постов:
    <script type='text/javascript'>
    function gradditLoadTopPosts(id) {
    var element = $("#" + id);
    if (element.length > 0) {
    var wrapperDiv = $("#top5");
    if (wrapperDiv.length == 1) {
    element.find("a").each(function(i, a) {
    var host = a.hostname;
    var blogHost = "fruitfulbookmarks-ru.blogspot";
    if (host.indexOf(blogHost) >= 0) {
    var docHost = document.location.host + "";
    var level1Doc = docHost.substring(blogHost.length, docHost.length);
    var level1Post = host.substring(blogHost.length, host.length);
    var link = a.href;
    if (level1Doc != level1Post) {
    link = link.replace(blogHost + level1Post, blogHost + level1Doc);
    }
    var containerId = "top_posts_" + i;
    wrapperDiv.append("<div id='" + containerId + "' style='display: none;'></div>");
    var container = $("#" + containerId);
    container.load(link);
    setTimeout(function() {
    var post = container.find("div[class='post hentry']");
    if (post.length > 0) {
    var newText = "";
    if (i > 0) {
    newText = "<hr style='width: 100%; clear: both;'/>"
    }
    newText += gradditCutText(post.html(), 900, 2) + "<" + "br/><" + "br/>";
    var startIdx = newText.indexOf("<h3 class=\"post-title entry-title\">");
    var endIdx = newText.indexOf("</h3>");
    newText = newText.substr(0, startIdx) + "<a href='" + link + "'>" + newText.substr(startIdx, endIdx - startIdx + 5) + "</a>" + newText.substr(endIdx, newText.length);
    container.html(newText);
    container.show();
    }
    }, 2000 * (i + 1));
    }
    });
    }
    }
    }
    </script>
    Пара слов об изменениях, которые вам нужно будет сделать, чтобы подстроить функцию под ваш блог:
    • #top5 - это id контейнера, вы увидите его ниже; также, в зависимости от шаблона, вам, возможно, придётся изменить имена классов, которые обрабатываются в функции. Экспериментируйте.
    • в строке var blogHost = "fruitfulbookmarks-ru.blogspot"; замените адрес блога на свой; не пишите домен страны (.ru, .co.uk) или .com!
    • при вызове функции для обрезания текста постов gradditCutText второй параметр - это максимальная длина текста, а третий - полезная опция, которая позволяет обрезать посты с точностью до слова (0 - ничего не делать, 1 - обрезать до слова, 2 - удлинять до слова). Если вы не хотите обрезать текст совсем, укажите оба паратметра равными 0;
  6. добавьте элемент-контейнер для постов и вызов топа с callback функцией:
    <div id="top5"></div>
    <div id="graddit_top_wrapper" style="visibility: hidden; display: none;"></div><script type="text/javascript" src="http://www.graddit.com/showtop/rus/31?id=graddit_top_wrapper&callback=gradditLoadTopPosts"></script>
    Не забудьте заменить ID топа (31 в этом примере) на свой собственный, который можно найти в коде топа в админке.

Всё готово. А ещё в топах появилась возможность фильтровать посты по меткам. То есть (если вы дружите с JS) можно на одной странице, например, показывать лучшие посты по категориям. Конечно, это не совсем сортировка, а просто отображение N лучших постов. Но ведь можно, скажем, показывать не 5, а 20 постов, разбить на страницы и приделать листалку страниц. Если это приобретёт популярность, я обазательно расширю функциональность.



Оцени и поделись
{[['']]}


Ещё больше полезного: