How to sort blogger posts by popularity

Sunday, November 4, 2012

How to sort blogger posts by popularity

Blogger offers 2 options to sort your posts: sort by newest and sort by oldest. With Graddit widgets you can sort posts by their popularity. Look at this page: http://fruitfulbookmarks-en.blogspot.com/p/top-posts.html. It displays 5 top articles from this blog. And this one: http://fruitfulbookmarks-en.blogspot.com/p/top-posts-about-blogspot.html shows best posts announcements tagged with "blogspot".
These aren't regular posts, these are Bloggers static pages. If you'll open their source code you'll see that there are no actual posts, only some javascript code. To create your own pages like those you'll need:

create an account if you still don't have it;
create a desired top here;

add graddit-extras.js into <head> section of your template:

<script src='http://static.graddit.com/js/graddit-extras.js' type='text/javascript'/>

create static HTML page, switch to HTML edit mode and add jQuery, if you don't have it already in your template:
```
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
```

add JS function that will process your posts:

<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-en.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>

Couple of words about changes you might need to make to this function in order to make it working with your blog:

#top5 - this is id if the container element, you'll see it below; depending on the template you might need to change the names of the classes;
in line var blogHost = "fruitfulbookmarks-en.blogspot"; replace blog URL with your own; do not include country domain (.com, .co.uk, etc.)!
when calling function gradditCutText to cut text of your posts there are few parameters you might want to change: second parameter is max length of text, third one allows you to control how to cut it (0 - do nothing, 1 - cut to word, 2 - expand to word). If you don't want to cut text then pass both parameters equal to 0;

add HTML elements and tops script call with callback function:

<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/eng/33?id=graddit_top_wrapper&callback=gradditLoadTopPosts"></script>

Make sure to change top id (33 here) to your own that should be taken from administer page (when you create/manage tops).

It should be ready now. Besides that tops got new parameter: labels. Now you can specify which posts (with what tags) should be displayed in tops widgets. So (if you're familiar with JS) on a page you can display top posts filtered by categories. Try it, let me know what you think.

44 comments:

kawsarNovember 23, 2012 at 2:06 AM
Hi
Is this the same as top viewed posts or isit different
Thanks
ReplyDelete
Replies
kawsarNovember 26, 2012 at 8:18 PM
This comment has been removed by the author.
ReplyDelete
Replies
kawsarNovember 28, 2012 at 8:28 PM
hello again fruitfulbookmarks
i have tried to following this blog page tutorial

How to sort blogger posts by popularity

i got stuck on step 5

after copying that script, when saving blogger gives a error

"Error parsing XML,Open quote is expected for attribute "{1}" associated with an element type "class"."

so it wont save? what do i do?

also your demo pages is not working either

http://fruitfulbookmarks-en.blogspot.com/p/top-posts.html
http://fruitfulbookmarks-en.blogspot.com/p/top-posts-about-blogspot.html

both these page content are blank

ReplyDelete
Replies
kawsarDecember 11, 2012 at 10:02 AM
hey fruits have you updated those site yet because i still cannot see the preview its empty page i am trying to follw this guide but theres a problem with your script blogger dosnt parse it corectly so it wount save template you see
ReplyDelete
Replies
kawsarDecember 12, 2012 at 6:51 AM
hi now i pasted into static page

i have done everything you said but there is no difference in tops the tops on the static page is exactly the same as my sidebar widget tops, i think somethink must be wrong
ReplyDelete
Replies
kawsarDecember 13, 2012 at 2:12 AM
and here is the static page link

http://bengalipiffs.blogspot.co.uk/p/top-post.html

ReplyDelete
Replies
kawsarDecember 13, 2012 at 8:32 AM
i just done what you said and its still the same fruits this time page loads and its same as the sidebar widget and after 5 seconds the page turns into full screen and the top widget keeps looping all the way down have a look

http://bengalipiffs.blogspot.co.uk/p/top-post.html

this is how statis page looks

<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 = "bengalipiffs.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>

<div id="top5">
</div>
<div id="graddit_top_wrapper4"></div>
<script src="http://www.graddit.com/showtop/eng/39?id=graddit_top_wrapper4" type="text/javascript"></script>
ReplyDelete
Replies

Add comment