Fruitful Bookmarks (eng)

Sunday, June 24, 2012

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:

Saturday, November 26, 2011

Rating widgets for websites, blogs and comments

    Tumblr instructions are here.

    Graddit presents rating widgets for your websites, blogs and comments. There's a number of predefined widgets on this page you can choose from.

   Copy and paste generic widget code and corresponding styles into you pages. There's also code prepared for use for Blogger and Blogger comments:

Instrunctions for Blogger you could find below, but first here's explanation of some of the parameters.

Important parameters

This div element contains information about the symbols used to display rating: "☆" is empty star, "★" – filled star; It can also contain any valid HTML element, like images or spans. id of the div is important, as it's passed to the server (see below).

This div element will contain text with the number of votes, views and average rating. Its id is also passed to the server, but you can omit the whole div, in this case the previous div (rate) will be used instead.

<script type='text/javascript' src='	http://www.graddit.com/rate/	eng	/	5	/	mjov07w	?	id=rate	&	stats=stats	'></script>
don't change it		language		number of stars		unique rating ID		id of an element where rating will appear		id of an element where number of votes will be shown

You can also pass the following parameters:

...&top=no — this prevents rating from appearing in statistics;

...&callback=my_function_name

If this parameters is passed, after rating is loaded your function with name "my_function_name" will be called with the following parameters:

"key"	rating id
"id"	id of the div with rating widget loaded
"stats"	id of the div with text (number of votes)
"average"	average rating
"amount"	number of stars
"votes"	number of votes
"data"	raw votes data

This gives you the full control over the rating widget.

How to add rating widgets on your blog

Select a widget and copy code from a Blogger tab.
In the settings of your blog select Design tab (in old interface; in new interface it'll be Template tab), save old template (Backup/Restore button), Edit HTML and select "Expand Widget Templates":
Old Blogger interface New interface
You can backup your template now if you haven't done it yet - select all, copy and save into a file. In the template text find string "<data:post.body/>" and paste widget code after it. If there's more than one such string you might need to try it first: add some string (like '!!!'), save and check if that is the place where you want your new widgets to be displayed; than remove !!! and paste widgets code. You can separate rating from the text with one or two new lines with <br/><br/>, like this:
Add the following line into <head>...</head> section of your page:
<link type="text/css" rel="stylesheet" href="http://static.graddit.com/css/graddit.css" />
Save the template and check that rating appeared under all the posts in your blog. If you don't want it to be shown on main page of the blog, but only when one opens a post, you should change widget code line

"<b:if cond='data:blog.pageType != "static_page"'>"
to
"<b:if cond='data:blog.pageType == "item"'>"
To add rating to all the comments in your blog take widget code from Blogger Comments tab and put it after line <data:commentPostedByMsg/> in the template.

    Rate beat on the right hand side of the main page shows the latest rated records among all the sites using rating widget.

    You can also see the statistics of all rated records of a certain website. You can administer your widgets and see more detailed statistics here.

    Below there's an example of how rating may look like in your blog.

Rating widgets for websites, blogs and comments, 4.18 out of 5 based on 104 ratings

More interesting articles

Rate this posting:

{[['

']]}

You might like:

Sunday, October 23, 2011

Integrating Fruitful Bookmarks with Blogger (blogspot.com)

    The result of such integration you can see now on the left and on the right hand sides of this page (on top). Here is the explanation of what's that and how to do that.
    With the help of the links on the left hand side (↓ и ↑) visitors can save and load the position of reading. Of course, it gives only a part of the functionality provided by a real storage and bookmarklets, but it works without a storage and users (and even site administrator) don't need to create it. To implement it you need to take the second script from this page: http://www.fruitfulbookmarks.com/#site, change it a bit (to match Blogger template requirements, you need to change all 2 "&&" entries with its HTML analog "&") and add it to the template of your blog, for example at the end of it, right before closing </body> tag.

    The controls on right hand side help your visitors to report any errors, mistakes, misspellings, etc. to the blog administrator. How to get these controls is described here: http://fruitfulbookmarks-en.blogspot.com/2011/10/how-to-track-misspellings-and-errors-on.html. Modify styles as you wish and get a useful tool which makes your blog on blogspot.com more handy.

More interesting articles

Rate this posting:

{[['

']]}

You might like:

How to track misspellings and errors on site or blog

Visitors can help you finding errors and misspellings in the texts on your site or blog. Misspellings, mistakes, inaccuracies, punctuation, all this will be found by the users and reported to you with the help of Fruitful Bookmarks services. To inplement it on your site you need to:

go to Fruitful Bookmarks;
create a storage, you'll need an identifier (ID containing 10 characters) of this storage for the next step;
add to HTML of your pages the styles and load the related controls (see example below).

The styles examples (names should remain the same):

div.ffbs_correction_main {
    position: fixed;
    top: 40px;
    right: 1px;
    width: 240px;
    height: 33px;
    border: 1px solid #20cc20;
    z-index: 9999;
    background: #ffe0e0;
    padding-left: 2px;
    padding-right: 2px;
    overflow: auto;
    opacity: 0.8;
    -moz-border-radius: 4px;
    border-radius:      4px;
}

span.ffbs_moreless {
    border-bottom: 1px dashed black;
    font-size: 8px;
}

span.ffbs_moreless:hover {
    cursor: pointer;
}

span.ffbs_lookup {
    border-bottom: 1px dashed black;
    font-size: 10px;
}

span.ffbs_lookup:hover {
    cursor: pointer;
}

span.ffbs_highlight {
    color: red;
    background: #d0d0d0;
    border: 1px dotted #0099cc;
}

    How to load the controls:
    <script src='http://www.fruitfulbookmarks.com/correction/init/ID OF YOUR STORAGE/eng/collapse'></script>

    Some details regarding this address: http://www.fruitfulbookmarks.com/correction/init/ID OF YOUR STORAGE/eng/collapse:

ID OF YOUR STORAGE — this is the 10-chars ID of the recently created storage;
eng — language of the controls;
"collapse" means controls will appear collapsed initially (only header, without suggested corrections). The other possible option is "expand";

    To suggest a correction user should select text and press Ctrl+Enter, then put corrected text into the popped up window. After page refresh the suggested correction will be shown in the corrections "window". Being expanded this window will show the users suggestions and sites administrator could fix the error.

    An example of how it could look like you can see at the right hand side of this blog (on top).

    If you found any issues with the algorythm, please comment.

    If you found any errors in this post, please use Ctrl+Enter to report.

More interesting articles

Rate this posting:

{[['

']]}

You might like:

Monday, July 18, 2011

Bookmarklets update.

To improve service behavior in certain cases bookmarklets code has been updated. We recommend to update your bookmrklets. To do this just open your storage and replace old bookmarklets (on the browser toolbar) with the new ones.

More interesting articles

Rate this posting:

{[['

']]}

You might like:

Old Blogger interface	New interface