Hacking Blog

Home » Posts filed under widget

Tampilkan postingan dengan label widget. Tampilkan semua postingan

Graddit polls widgets

Posted by wanasta Minggu, 16 September 2012 1 comment

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']]}

Styling best posts and related posts widgets

Posted by wanasta Jumat, 06 Juli 2012 0 comments

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:

Managing widgets behavior with the callback functions

Posted by wanasta Minggu, 24 Juni 2012 0 comments

    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.

Ratings from Graddit: related posts and tops

Posted by wanasta Jumat, 04 Mei 2012 0 comments

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:

Rating widgets for websites, blogs and comments

Posted by wanasta Sabtu, 26 November 2011 0 comments

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.

Integrating Fruitful Bookmarks with Blogger (blogspot.com)

Posted by wanasta Minggu, 23 Oktober 2011 0 comments

    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

Posted by wanasta 0 comments

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.

New feature: quotation.

Posted by wanasta Minggu, 05 Juni 2011 0 comments

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.

Fruitfulbookmarks. Online bookmarks saving position.

Posted by wanasta Rabu, 04 Mei 2011 0 comments

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.

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