2012

Tuesday, December 4, 2012

How to delete old posts from ratings

Sometimes it happens that you need to delete a post from your blog. If you're using graddit best posts widget then your deleted post (if it was popular) will keep showing in tops for some time. As post is no longer existing its title, thumbnail and link itself will be broken. To speed up the process of removal of such posts from tops in Statistics tab of the graddit administer panel you now have new options:

X - remove rating history without rating total removal. This allows you to remove post from tops widget, but keep ratings stats (views, votes, etc.);
☠ - remove rating completely.

After rating removal corresponding row in statistics will be marked pink. If a rating was removed completely it will be eliminated from the grid after you refresh the stats page.

More interesting articles

Rate this posting:

{[['

']]}

You might like:

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.

More interesting articles

Rate this posting:

{[['

']]}

You might like:

Saturday, October 20, 2012

Ratings widget for Tumblr

Graddit now supports Tumbl microblogging platform. Examples here. To insert a single rating you'll need to copy code from ratings page Generic tab and paste it into desired place while composing new post. To be able to use javascript inside posts you'll have to make some configuration changes:

To edit settings login to tumblr and press preferences icon (1). Set Edit post using to plain text/HTML (2).

You'll also need to add graddit.css styles in theme settings. Go to theme customization, press Edit HTML button

Add styles
<link type="text/css" rel="stylesheet" href="http://static.graddit.com/css/graddit.css"/>
to <head> section

Press Update Preview, then Save (if the button appeared). Everything is ready now to use single ratings.

If you'd like ratings to appear on each post automatically you'll need to make some more modifications to your theme template. First decide where you want ratings to appear: what kind of material, what part of post, should it be visible on the main page or only on internal pages, etc. Then try to find corresponding place in the template. Not with all the templates it will be easy to do; experiment with some harmless piece of text first (maybe even with comments). For example, for ratings to be displayed on the top of text posts below the titles on the main page and on internal pages, code needs to be added into {block:Posts} inside {block:Text} block right after closing {/block:Title}

Don't forget to save the template. Widgets code should be taken from the ratings page Tumblr tab.

Ask questions here if you have any issues with widgets in Tumblr.

Ratings widget for Tumblr, 4.62 out of 5 based on 8 ratings

More interesting articles

Rate this posting:

{[['

']]}

You might like:

Monday, October 15, 2012

External related posts

Related posts widget got better. Now you can link to external pages with one click right on recommendations tab in administrator interface.
Screenshot:

How it works:

In "switch to" field (1) you enter URL of a page from site you want to link to (that site should have ratings widget installed and a key should be generated). Press Enter and wait until it's loaded.
Chose a parent page on the left panel. Click link (2) to connect recommended page.
If you setup widget to display thumbnails, for external pages they should be specified manually. For Blogspot users it's easy, just click on (3).

Don't forget to save changes. Every time you switch to a new site it's address will be displayed below as a link for quick switching. To switch to pages of the site that you're currently managing click on "Self" link. Links display up to 3 recently used sites.

Important: to be able to switch to site this site's "Allow other users to see my ratings" option should be turned on.

Reminding what is what on recommendations page. On the left panel there're the parent pages that you're creating recommendations for. Parent page you're working on right now is expanded and marked green. On the right panel there're the pages of your site. To create new parent page click on "←"; to connect page with parent click on "✓". Lightgray boxes mark pages already connected to selected parent, lightgreen boxes mark pages picked automatically based on labels (but not yet connected).

Coming soon: automatic feed detection (to avoid manual thumbnails setup) and automatic detection of similar pages from external sites.

More interesting articles

Rate this posting:

{[['

']]}

You might like:

Friday, September 21, 2012

Hacking Blogger Dynamic Views to support custom widgets

Blogger Dynamic Views are cool, but they support only few official widgets. Today we're hacking dynamic views to support any custom widgets (using Graddit widget as an example, of course).

Disclaimer. This is dirty hacking, it can stop working at any time and can even negatively affect behaviour of your blog. You were warned.

So, the goal is to make widgets appear when user expands a post in any view (Classic, Flipcard, Magazine, Mosaic, Sidebar, Snapshot and Timeline).

First, open Blogger dashboard and go to Template tab; click Edit HTML and then Proceed button.

For dynamic views we can't change a part of the template that displays posts - it will not work. But we still can change head section. Add the following lines to <head>...</head>:

<link href='http://static.graddit.com/css/graddit.css' rel='stylesheet' type='text/css'/>
<script src='http://static.graddit.com/js/graddit-extras.js' type='text/javascript'/>

These are styles and some cool scripts. Actually, we will need only one function called gradditBloggerDynamicViewsRatingsHack. Now go to the very bottom of the template and add this call just before closing </body> tag:

<script type='text/javascript'>setTimeout(function(){gradditBloggerDynamicViewsRatingsHack();},1000);</script>

Or this if you want also to display related posts (You Might Like widget):

<script type='text/javascript'>setTimeout(function(){gradditBloggerDynamicViewsRatingsHack(true);},1000);</script>

Now save template and close editor. Click Customize button to add some styles (without them stars will not show properly). Select Advanced and then click Add CSS. Add this:

.article .article-content .ffbs_rate img {
  padding: 0;
  border: 0;
  border-image: none;
  -webkit-border-image: none;
  vertical-align: middle;
}

.article .article-content .ffbs_stats {
  font-size: 10px;
}

.article .article-content a {
  border: 0;
}

Click Apply to Blog.

Now it should be working, open your blog and try! Here's live demo: http://ffbs-widgets.blogspot.com/.
Did it work for you?

More interesting articles

Rate this posting:

{[['

']]}

You might like:

Sunday, September 16, 2012

Graddit polls widgets

Graddit presents new widgets for polls that you can build into your blogs and sites. Here's a simple poll example:

{[['Bad',' | '],['Average',' | '],['Awesome']]}

Number of options and text can be changed. Take code from graddit page, options are set like this:

{[['Bad','  |  '],['Average','  |  '],['Awesome']]}, where '  |  ' are the separators between options; number of options should match the number that is passed to the script as a parameter (3 in this example).

I can be not just text, but any HTML valid element. For example, images:

Who rocks?

{[['

',' '], ['

']]}

And of course general polls. How do you like the new widgets?

{[['So so'],['Okay'],['Perfect']]}

More interesting articles

Rate this posting:

{[['

']]}

You might like:

Monday, September 3, 2012

Graddit ratings statistics

There's a new tab in admin panel called "Statistics" that allows you to see detailed data about ratings, views, votes and feedbacks numbers. Also you could get some interesting details such as Google Pagerank, Alexa Rank, Facebook and Twitter mentions (later this will be extended). Here's the tab screenshot:

It's sortable. To get information about a page click corresponding ⟳ link. Leave your suggestions here in comments.

More interesting articles

Rate this posting:

{[['

']]}

You might like:

Friday, July 6, 2012

Styling best posts and related posts widgets

Play a bit with the styles of top posts or related posts in the administer interface and you could get cool looking widgets like this:

More interesting articles

Rate this posting:

{[['

']]}

You might like:

Sunday, June 24, 2012

Managing widgets behavior with the callback functions

    By default widgets are displayed on the pages at the place where you set them initially. How to make widget to be shown only when a user riches bottom of the page and be hidden when user scrolls up? To make a solution easier widgets support callback parameter. Using this parameter you can pass control to your function after widget call has completed. More than that, file http://www.graddit.com/js/graddit-extras.js already contains working callback function. Let's see how it works using top posts widget as an example.

Here's the widget call code (it's being called right from this place):
<div id='callback_example' style='visibility: hidden; display: none; position: fixed; right: 10px; bottom: 10px;'>Read our best!</div><script type="text/javascript" src="http://www.graddit.com/showtop/eng/4?id=callback_example&callback=gradditDisplayWidgetCallback"></script>

The call is here, but you can't see the widget; it's behavior has been changed by gradditDisplayWidgetCallback function. From now on it will be displayed on the right bottom corner of the page when you scroll it all the way down. And disappear when you scroll back up.

    If you'd like to use javascript function from the example above you'll need to include the js file in your template:

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

    That's it! Remeber: you need to include graddit-extras.js and set callback function in the widget call code. From time to time I'll be adding some useful functions into graddit-extras.js (check for updates).

    Reminder: widgets layout can be easily changed from the admin panel.

Rate this posting:

{[['

']]}

You might like:

How to translate Graddit rating widget to any language

Graddit rating widget supports two languages: english and russian. That is defined by sending "eng" or "rus" parameter to server (read more). Of course, it doesn't look very good when your website is on any different language. Let's see how we can solve this issue using the most popular widget (yellow stars) code as an example. Here's the initial code:

<b:if cond='data:blog.pageType != "static_page"'>
  <div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'>
    <b:if cond='data:post.labels'>
      <b:loop values='data:post.labels' var='label'><data:label.name/>,</b:loop>
    </b:if>
  </div> Rate this posting:
  <div expr:id='data:post.id' style='padding-left: 3px; padding-right: 3px; display: inline; visibility: hidden;'>{[['<img src="http://img.graddit.com/img/star.png"/>']]}</div>
  <script expr:src='"http://graddit.com/rate/eng/5/" + data:post.id + "?stats=" + data:post.id + "&info=info-" + data:post.id + "&info_delay=2&class_star=ffbs_star_img&class_star_set=ffbs_star_img_set&class_star_vote=ffbs_star_img_vote&views=yes&id=" + data:post.id + "&url=" + data:post.url + "&labels=labels_" + data:post.id + ""' type='text/javascript'/>
</b:if>

Bold text is the div element we are going to change. In addition to what you see there now it can contain the following data attributes:

data-label-votes - text for "votes";
data-label-views - text for "views";
data-label-rating - text for "rating"'
data-label-info-rating - text for ratings in popup with detailed votes information.

Check this example to understand it better. The following code (with average=yes parameter added to display rating number):

<b:if cond='data:blog.pageType != "static_page"'>
  <div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'>
    <b:if cond='data:post.labels'>
      <b:loop values='data:post.labels' var='label'><data:label.name/>,</b:loop>
    </b:if>
  </div> Rate this posting:
  <div data-label-votes='voted: ' data-label-views='viewed: ' data-label-rating='rated at: ' data-label-info-rating='Details' expr:id='data:post.id' style='padding-left: 3px; padding-right: 3px; display: inline; visibility: hidden;'>{[['<img src="http://img.graddit.com/img/star.png"/>']]}</div>
  <script expr:src='"http://graddit.com/rate/eng/5/" + data:post.id + "?stats=" + data:post.id + "&info=info-" + data:post.id + "&info_delay=2&class_star=ffbs_star_img&class_star_set=ffbs_star_img_set&class_star_vote=ffbs_star_img_vote&views=yes&average=yes&id=" + data:post.id + "&url=" + data:post.url + "&labels=labels_" + data:post.id + ""' type='text/javascript'/>
</b:if>

Will display rating with custom labels:

{[['

']]}

See how it differs from the default one below.

Rate this posting:

{[['

']]}

You might like:

Tuesday, June 5, 2012

Saturday, May 12, 2012

Best posts widget (with thumbnails)

Graddit tops widget can now show thumbnails. Like this:

Or like this:

best posts of the week:

To control this widget there're few new paramters on the tops management panel:

Feed URL — your RSS feed URL, (in json-in-script format). This field will be populated automatically when you create a new top.
Default image — picture to be shown if no pictures found.
Image style, li style and Container style — style of the corresponding html elements, allow you to change the layout of the widget. For your convenience there're 2 presets: for vertical display and for horizontal display.

Enjoy. Feel free to comment and ask questions.

More interesting articles

Rate this posting:

{[['

']]}

You might like:

Sunday, May 6, 2012

Graddit rating widget code update

If you're using Graddit rating widget in Blogger you need to update your widget code; just take new code from Graddit main page. The changes are not critical, but add labels support (for future automatic recommendations) and solve issue with incomplete URLs in admin panel.

More interesting articles

rating widgets for websites, blogs and comments

Rate this posting:

{[['

']]}

You might like:

Friday, May 4, 2012

Ratings from Graddit: related posts and tops

Today's topics: what are and how to setup and display the recommendations (related posts) and tops widgets.

In order to be able to use widgets described below you need to get access to the account management panel. Open the link, click on "Generate secret key" and follow the instruction. After you login to the management panel you'll see 3 tabs: Settings, Recommendations and Tops.

Settings

Let's leave this page for now, it is created for the future purposes. All what you can do there now is change the secret key and allow/forbid token generation. If generation is forbidden you couldn't reset the secret key with a token. You might need to reset secret key if you lost it; restoration of a secret key via email isn't yet implemented.

Recommendations

Please check out the possible issues below before reporting any problems with this page.
Here you can create the lists of related (recommended) materials for each page on your website where you have rating widget installed. At the left hand side of the page you'll find the relations you've already created; at the right hand side - pages you can create relations for. For example, if you want to create relations for the page with URL http://fruitfulbookmarks-en.blogspot.com/2012/04/how-to-duplicate-rating-information.html, you need to click "←" link near that URL; that creates a container. Then by pressing "✓" you could add the related URLs into the container. Click on the image above to see a bigger image, that will help to understand the process better. When you add the links their titles will be loaded automatically. You can change them though. You can change the links as well, but you'll have to set the titles manually in this case. Save the recommendations. There are 2 ways to display the widget:

copy the code (for now there's only code for Blogger) and paste it into the desired place of your blog's template. In this case for all the pages of your blog the related posts will be displaying automatically (of course if you created them first).
if you wish to display a particular list of recommended materials then click the "Preview" link and copy the given code into the desired place of your page (or post). In this case (if you haven't forgotten include styles http://graddit.com/css/graddit.css) when viewing the page you'll see something like this:
With some code added:
<div id='graddit_recommendation' style='display: inline; visibility: hidden;'><div style='background-image: url(http://img.graddit.com/favicon.ico); display: inline-block; width: 16px; height: 16px;'></div> You can change this title</div><script src='http://graddit.com/rec/eng/6527129645013929210?id=graddit_recommendation'></script>
you can get something like this (with changed title):
You can change this title

Possible issues.

Resolved; update widget code. At the right hand side you can't see the pages' URLs, mostly the URLs of the main page. That can happen if you have rating widget shown at the main page (not under cut only), in this case when people vote ratings get assigned with the main page URL. This will be fixed soon. Nevertheless, if you could figure out real addresses of the displayed ratings, the related posts will be shown at the proper pages. If you don't want to get too deep into the mechanism of the ratings just wait for the fix.
For now you can't create recommendations not related to a page with the rating widget installed. This will be fixed soon.
Manually create recommendations is too hard and boring. Is there a way to make it in automatic mode? Yep, it's boring, but it gives you much more control over the process and you can add materials more relevant to the shown pages. I'm planning to implement some automation though. You will be able to display related URLs for the pages without manually created recommendations; the options will be: show random links for the given set, display another widget using callback function, automatic links based on labels (tags).

Update. Related posts widget has become better; read more.

Tops

Tops are a bit easier to control. Top is a lists of pages that got more votes, rating or views:

You can set:

number of displayed links;
maximum top refresh time (in minutes, not less than 60 and not more than 1440 - these limits will be changed after I'll get some stats data);
sort criteria (number of votes/number of views/average rating);
options:

only for the last preiod - if ticked, top will be formed based on short period of time information; if not ticked, the current values of views/votes/rating will be taken as a base;
less rated records first - sort order;
exclude main page - links to the main page will not be displayed in the top widget;
load titles - load pages titles when displayed in tops. Loading will not happen every time top is displayed; data will be cached for the period of 12 hours (maximum);
drop URL parameters - recommended to be set; this will help you to get rid of the links to the same pages having different parameters in the URLs (for example, ?showComment=...). Of course if these parameters are not important for your site;
show ratings near to links - show sort criteria values. I recommend to have it turned on before you actually expose top to the users and turn it off then; users don't need to see this and might get confused;

inline styles - try various parameters to change the layout of your top widget;
"cut text after" - maximum number of characters in the displayed URL (or titles); 0 - do not cut.

Playing with online styles can help you get something like this:

More interesting articles

Rate this posting:

{[['

']]}

You might like:

Thursday, April 19, 2012

How to duplicate rating information using javascript

As a response to the question from the previous post I'm going to explain how to duplicate rating information using JS callback function (in Blogger). So, what we want to do:
- show ratings below the posts (as usually);
- duplicate rating information and show it above the posts (without ability to vote).

Steps:

0. Make a backup copy of the template;

1. Open template editor (don't forget to select "Expand Widget Templates" checkbox);

2. Find ratings widget call and add parameter "callback=previewRating", something like this:
...class_star_vote=ffbs_star_aimg_vote&callback=previewRating&views=yes&average=yes...

3. At the desired place of the template write a div that will hold ratings duplicated information:
<div expr:id='"graddit_preview_rating_" + data:post.id'>Rating: </div>
for example, you can place it just before post body (before <data:post.body/>)

4. Somewhere (preferably on top) in your template write callback function, like this one:

<script language='javascript'>
function previewRating(key, id, stats, average, amount, votes, data, views) {
    var div = document.getElementById("graddit_preview_rating_" + id);
    if (div != null) {
        var avg = Math.round(average);
        var tmp = div.innerHTML;
        for (var i = 0; i &lt; avg; i++) {
            tmp += "<span class='ffbs_star_set'>&amp;#9733;</span>";
        }
        for (var i = avg; i &lt; amount; i++) {
            tmp += "<span class='ffbs_star'>&amp;#9734;</span>";
        }
        div.innerHTML = tmp;
    }
}
</script>

5. Save the template. You're done, ratings should be now showing right after title (before post body) of each post.

As you see, callback function is a powerful tool that gives you unlimited control over your ratings.

Reminder: the code above should be used with blogger templates only, it will not work with a different template system; you should adapt it to the templater or for pure HTML just remove redundant special characters. Let me know if you faced any problems with that.

More interesting articles

Rate this posting:

{[['

']]}

You might like:

Image style:
Title style:
li style:
Container style:
	Cut text after 20 characters and then "cut to word";

Fruitful Bookmarks (eng)

Tuesday, December 4, 2012

How to delete old posts from ratings

Sunday, November 4, 2012

How to sort blogger posts by popularity

Saturday, October 20, 2012

Ratings widget for Tumblr

Monday, October 15, 2012

External related posts

Friday, September 21, 2012

Hacking Blogger Dynamic Views to support custom widgets

Sunday, September 16, 2012

Graddit polls widgets

Monday, September 3, 2012

Graddit ratings statistics

Friday, July 6, 2012

Styling best posts and related posts widgets

Sunday, June 24, 2012

Managing widgets behavior with the callback functions

How to translate Graddit rating widget to any language

Tuesday, June 5, 2012

Related posts widget update

Saturday, May 12, 2012

Best posts widget (with thumbnails)

Sunday, May 6, 2012

Graddit rating widget code update

Friday, May 4, 2012

Ratings from Graddit: related posts and tops

Today's topics: what are and how to setup and display the recommendations (related posts) and tops widgets.

Thursday, April 19, 2012

How to duplicate rating information using javascript