Fruitful Bookmarks (eng): 2011

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

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

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

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

Sunday, June 5, 2011

New feature: quotation.

You can now create quotes. For example, open this link http://www.fruitfulbookmarks.com/quote/c743b5a6-8fe5-11e0-98c1-25775ea19ffa, after the page opens browser will navigate to a certain position and highlight some text — this is quote. To create a quote for a web page you should use the new "abc" bookmarklet you'll find on Fruitful Bookmarks (on the left-hand side). Drag it to the toolbar of your browser, then open a web site, select a short fragment of text and click on the bookmarklet; copy link from the opened popup message. That's it, you may now send this link to somebody and don't need to explain what and where to look for. This may be combined with short URL services, like this: http://tinyurl.com/3rndzvr.

More interesting articles

Wednesday, May 4, 2011

Fruitfulbookmarks. Online bookmarks saving position.

Most of the online bookmarks services offer more or less the same set of features. Although it seems to be almost impossible to offer new functionality, Fruitful Bookmarks have something unique. This service allows you to save and restore position of view of the web pages. And not only pages, it works with images as well. Standard functions are also there, currently users are able to:

save bookmarks in one click (using bookmarklets). Position of view is saved along with URL and title and may be later restored in one click as well;
manage bookmarks using AJAX interface;
share bookmarks with other users;
have more than one bookmarks storage;
websites owners can integrate service into their pages;
and all this without need of registration.

How it works. To use this service you don't have to register; you need to create bookmarks storage and drag-n-drop offered bookmarklets on the panel of your browser (if you use Internet Explorer, you must first save bookmarklets to Favorites and then drag them to panel). Next steps are even more simple: click "↓" to save bookmark (and position); when you need to restore it click "↑". There are other options and also some limitations. For details please refer to help.
About all new features and bugfixes read in this blog. We hope you'll have a fruitful experience with our service.

More interesting articles

Old Blogger interface	New interface