June 2012

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:

{[['

']]}

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:

{[['

']]}

Tuesday, June 5, 2012

Related posts widget update

Related posts widget has become much better. What's new:

styles to control the layout;
thumbnails;
automatic recommendations (based on labels);
improver user interface (see below).

Interface

If you haven't got access to the management panel yet, do now.
Recommendations tab now has settings:

You can:

specify what widget should do in case no related posts were set for a page:
- pick automatically (based on labels);
- show nothing;
- show static HTML. Nothing stops you from adding javascript though;
show thumbnails (you should set feed URL);
set number of links to be displayed. If number of related (or automatically found) pages exceeds that number, then specified number of randomly picked links will be shown;
set max length of displayed titles (or links if it's set to not show the titles);
change widget layout;

Manual related posts creation interface has also changed and became more efficient:

← link still creates recommendation containers and ✓ still creates relations, but now when you select a container on the right panel links get highlighted:

darkgray — main page (container URL);
lightgray — related posts (recommendations);
lightgreen — automatically found related pages that you might want to use;

Widget code (for Blogger) you need to take from the same page , see above the recommendations list.

Possible issues

Not all the pages present on the right panel. That could happen if users from different countries read your blog, in this case pages can be saved into the database with their local domains: your-blog.blogspot.com.nl or your-blog.blogspot.co.uk. To resolve this issue you need to send domain parameter in the widget code. For example (for Blogger):

<script expr:src='"http://graddit.com/rate/eng/...url=" + data:post.url + "&domain=your-blog.blogspot.com&labels=...</script>

and wait a bit until database gets refreshed data.
No labels are shown. You need to update widget code, just take it from the main page. Again, you need to wait a bit before changes will be reflected.