Hacking Blog

Home » Posts filed under graddit

Tampilkan postingan dengan label graddit. Tampilkan semua postingan

Hacking Blogger Dynamic Views to support custom widgets

Posted by wanasta Jumat, 21 September 2012 0 comments

Blogger Dynamic Views are cool, but they support only few official widgets. Today we're hacking dynamic views to support any custom widgets (using Graddit widget as an example, of course).

Disclaimer. This is dirty hacking, it can stop working at any time and can even negatively affect behaviour of your blog. You were warned.

So, the goal is to make widgets appear when user expands a post in any view (Classic, Flipcard, Magazine, Mosaic, Sidebar, Snapshot and Timeline).

First, open Blogger dashboard and go to Template tab; click Edit HTML and then Proceed button.

For dynamic views we can't change a part of the template that displays posts - it will not work. But we still can change head section. Add the following lines to <head>...</head>:

<link href='http://static.graddit.com/css/graddit.css' rel='stylesheet' type='text/css'/>
<script src='http://static.graddit.com/js/graddit-extras.js' type='text/javascript'/>

These are styles and some cool scripts. Actually, we will need only one function called gradditBloggerDynamicViewsRatingsHack. Now go to the very bottom of the template and add this call just before closing </body> tag:

<script type='text/javascript'>setTimeout(function(){gradditBloggerDynamicViewsRatingsHack();},1000);</script>

Or this if you want also to display related posts (You Might Like widget):

<script type='text/javascript'>setTimeout(function(){gradditBloggerDynamicViewsRatingsHack(true);},1000);</script>

Now save template and close editor. Click Customize button to add some styles (without them stars will not show properly). Select Advanced and then click Add CSS. Add this:

.article .article-content .ffbs_rate img {
  padding: 0;
  border: 0;
  border-image: none;
  -webkit-border-image: none;
  vertical-align: middle;
}

.article .article-content .ffbs_stats {
  font-size: 10px;
}

.article .article-content a {
  border: 0;
}

Click Apply to Blog.

Now it should be working, open your blog and try! Here's live demo: http://ffbs-widgets.blogspot.com/.
Did it work for you?

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

Graddit ratings statistics

Posted by wanasta Senin, 03 September 2012 0 comments

There's a new tab in admin panel called "Statistics" that allows you to see detailed data about ratings, views, votes and feedbacks numbers. Also you could get some interesting details such as Google Pagerank, Alexa Rank, Facebook and Twitter mentions (later this will be extended). Here's the tab screenshot:

It's sortable. To get information about a page click corresponding ⟳ link. Leave your suggestions here in comments.

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.

How to translate Graddit rating widget to any language

Posted by wanasta 0 comments

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.

Graddit rating widget code update

Posted by wanasta Minggu, 06 Mei 2012 0 comments

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.

How to duplicate rating information using javascript

Posted by wanasta Kamis, 19 April 2012 0 comments

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.

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.

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.

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