October 2011

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.

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.