Fruitful Bookmarks (eng)

Sunday, August 18, 2013

Graddit Guard: protect content with password

Suppose, you need to protect content from being viewed, but you don't want to make the whole blog private. You just want content that can be accessed by visitors that have a password. Simple problem if your blog is on Wordpress or Drupal. Blogger blogs owners can not achieve this eassily. New Graddit widget "Guard" is made for this purpose. Look at the text below:
If you do not have password you will not see the hidden text. Now enter "123" and press "Open". Hidden text will be shown and you will not need to re-enter the password next time you visit the same page.

Text below will be shown after you tweet this page:

Tweet to unlock content.

Want to protect content in your blog?

Open widget page.
Enter password and text to protect. Press "Save" while typing your text to check how it will look on your page. If you press "Save and Lock" you will not be able to change password or text anymore.
Insert given code into your blog page or post. You will see the protected page because widget remembered you created it. All other visitors will see the prompt to enter password. To make sure it's working open your page in a different browser, or in incognito window, or clear the cookies.

That is all. Leave a comment to this post if you have questions.

Rate this posting:

{[['

']]}

You might like:

Sunday, April 28, 2013

Star ratings rich snippet on Google SERP with Graddit (for Blogger)

— this is how your blog can look like on Google search engine results page (SERP). It is an experimental feature from Graddit that allows you to create rating rich snippets based on real ratings information and add them to your posts, for Blogger only. Currently in order to update your posts with snippets you will need to:

Invite user "graddit@gmail.com" to be an author of your blog (Blogger Settings → Basic → Permissions → Blog Authors → + Add authors);
What for confirmation (leave a comment to this post to speed up the process);
Make graddit@gmail.com an admin of your blog. This is required to update posts by your request. Later adding graddit@gmail.com will not be necessary, but this is how it works right now. You can also revoke admin permissions once you are done with snippets and give it back only when you need it;
Subscribe. You can also leave your blog address in a comment to this post and I will give you 2 weeks of trial;
Login to admin, create an account if you don't have it yet (click "Generate secret key" for insctructions);
Go to Statistics tab, locate a post you would like to update (you may want to save your post first, just to be safe) and click star icon:

It will try to retrieve Blog ID and Rating ID and will show a confirmation window:

Click Ok. If system shows status "Ok", your post was successfully updated with ratings snippet. It can pass few days or even weeks before stars appear on SERP, but you can check if snippet is formed properly by checking URL of your post in this Google tool.

Disclaimer, recommendations and known issues
This will access your blog upon your request and will update post adding snippet to the end of it. It potentially can damage post content, for example, it will remove any newlines (not the <br/> tags that will remain, but \n - newlines that will be deleted), because this is how the posts content is presented by Blogger API and I could not find a workaround for it, so this method is not good if you have text in <pre> tags and want to keep newlines. In other cases removing newlines will not affect post layout. I strongly recommend to test it first on a test blog or test post. Also, do not update each and every post, Google might not like it, instead pick content that deserves to have snippet in SERP. Google does not guarantee snippets on SERP even if there is no errors in snippet code, that is stated in their documentation.
Try it and let me know here if you have any issues.

More interesting articles

Rate this posting:

{[['

']]}

You might like:

Saturday, March 30, 2013

Subscriptions

Graddit is launching paid subscriptions for ratings widget: http://www.graddit.com/eng/prices.

What are the plans and what is the difference

Free. Fully functional widget, ratings popup can display ads. Ratings popup looks like this:
;
Basic. 5 000 displays without ads daily; after that ads will be enabled; price is $3 per month;
Pro. 50 000 displays without ads daily; after that ads will be enabled; price is $10 per month;
Ultimate. 500 000 displays without ads daily; after that ads will be enabled; price is $25 per month;

There also will be functionality enabled for subscribers only.

Currently subscriptions can only be paid with Paypal. If you would like pay some other way or need higher limits please send your offers to sales@graddit.com.

More interesting articles

Rate this posting:

{[['

']]}

You might like:

"I like" widget for blogs

Now you can get heart "I like" widget for your blog? Open Graddit widgets, select Like widget on the left hand side and Platform on the right. "Generic" code would be good for single post, for example: I like

or:

Actually, you can use any symbols and images with this widget.
If you want it to show on each post automatically you need to select Blogger platform and follow instructions here. Instructions for Tumblr can be found here.

More interesting articles

Rate this posting:

{[['

']]}

You might like:

Saturday, March 2, 2013

Non-blocking ratings widget load

Sometimes ratings widget can take significant time to load, up to several seconds depending on connection speed and performance of the servers handling request. That leads to bad user experience, site looks stuck. And while battle over Graddit servers performce is not over you can still help your blog yourself. You can load widgets without blocking the whole page, in order to do that go to http://www.graddit.com/ratings-widget, tick "Non-blocking" checkbox and replace your old code with a new one. As stated in the hint there don't forget that it relies on jQuery, so this library should be included (preferably in <head> section of your template).

More interesting articles

Rate this posting:

{[['

']]}

You might like:

Sunday, January 27, 2013

Graddit Aggregator: related posts from multiple blogs

Graddit presents new widget called Aggregator. It allows you to display related posts grabbed from multiple blogs. Demonstration is avaliable here - it shows 20 posts labeled "graddit,blogger,widget,seo" from 3 blogs. Aggregator will be useful if you want to cross-link your own similar blogs. Besides, it can be used commercially to show links from sponsoring blogs.

How to setup widget:

open aggregator page;
read rules and limitations. There's paid and free versions. In short, free allows you to use 2 blogs and display widget not more than 500 times a day. First 1000 displays will work as in paid versions, so that you could experiment;
on the top press Get code link to open widget parameters tab;
provide blogs URLs;

configure other parameters. What can be configured:

what to display: related posts or random posts;
number of links;
links target attribute;

style. There are 4 predefined styles or you can choose none and make your own layout; styles samples:

Light	Gray

Blue	Dark

whether or not use inline styles. Choose no if you're making your own styles;
display thumbnails or just text;
default thumbnail.

on the right hand side select a platform to get properly generated code;
copy code and paste it to a desired place in your template.

Currently only Blogspot platform support is implemented. There's also experimantal support of Atom feeds. If you'd like to try atom you'll have to change few lines in generated code manually: add atom feed and set atom platform like this: (shown code aggregates posts from both blogger and atom feed):

var sites = {
 'http://fruitfulbookmarks-en.blogspot.com' : 'blogger',
 'http://ruletka.omg-linux.ru/atom.xml' : 'atom',
};

Other platforms and feed types will be added later.

Few words about paid version. You can automatically subscribe to paid version using Paypal. On the aggregator page you need to specify your blog address and set number of related blogs, then press Subscribe with Paypal. Aggregator will check your current subscription and if everything is fine you'll be able to move to payment page. Subscription can be cancelled at any time. Limitations of the paid version: up to 100,000 displays daily, up to 10 linked sites. If you think for your needs it's not enougth please email to sales@graddit.com.

Graddit Aggregator: related posts from multiple blogs, 4.04 out of 5 based on 23 ratings

More interesting articles

Rate this posting:

{[['

']]}

You might like:

Friday, January 25, 2013

Blogspot template with Graddit widgets: mlnpics

Download template

From time to time I'm going to modify and publish free Blogspot templates witn Graddit widgets included. First example mlnpics is based on Queen template from DZignine. Main page:

Post:

Key features:

used widgets: ratings, tops, aggregator;
default "Prev" and "Next" links are replaced with posts titles;
menu contains links to static pages, those pages display top posts (each page has it's own category). Order of the posts is controlled by graddit widgets and based on average rating. This kind of things are not provided by Blogspot platform by default — something that your visitors may find interesting;
users can navigate using Ctrl + left and Ctrl + right arrows, easier navigation = better user experience.

Live demo: http://mlnpics.blogspot.com.
Template source code is not yet published, please write your comments here if you think something should/might be changed. Download links will appear here later.

Important: template does not contain Graddit copyright, but it contains a copyright of the authors of the original template, that should stay untouched, you can not remove it.

Download template

More interesting articles

Rate this posting:

{[['

']]}

You might like:

Tuesday, December 4, 2012

How to delete old posts from ratings

Sometimes it happens that you need to delete a post from your blog. If you're using graddit best posts widget then your deleted post (if it was popular) will keep showing in tops for some time. As post is no longer existing its title, thumbnail and link itself will be broken. To speed up the process of removal of such posts from tops in Statistics tab of the graddit administer panel you now have new options:

X - remove rating history without rating total removal. This allows you to remove post from tops widget, but keep ratings stats (views, votes, etc.);
☠ - remove rating completely.

After rating removal corresponding row in statistics will be marked pink. If a rating was removed completely it will be eliminated from the grid after you refresh the stats page.

More interesting articles

Rate this posting:

{[['

']]}

You might like:

Sunday, November 4, 2012

How to sort blogger posts by popularity

Blogger offers 2 options to sort your posts: sort by newest and sort by oldest. With Graddit widgets you can sort posts by their popularity. Look at this page: http://fruitfulbookmarks-en.blogspot.com/p/top-posts.html. It displays 5 top articles from this blog. And this one: http://fruitfulbookmarks-en.blogspot.com/p/top-posts-about-blogspot.html shows best posts announcements tagged with "blogspot".
These aren't regular posts, these are Bloggers static pages. If you'll open their source code you'll see that there are no actual posts, only some javascript code. To create your own pages like those you'll need:

create an account if you still don't have it;
create a desired top here;

add graddit-extras.js into <head> section of your template:

<script src='http://static.graddit.com/js/graddit-extras.js' type='text/javascript'/>

create static HTML page, switch to HTML edit mode and add jQuery, if you don't have it already in your template:
```
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
```

add JS function that will process your posts:

<script type='text/javascript'>
function gradditLoadTopPosts(id) {
    var element = $("#" + id);
    if (element.length > 0) {
      var wrapperDiv = $("#top5");
      if (wrapperDiv.length == 1) {
        element.find("a").each(function(i, a) {
          var host = a.hostname;
          var blogHost = "fruitfulbookmarks-en.blogspot";
          if (host.indexOf(blogHost) >= 0) {
            var docHost = document.location.host + "";
            var level1Doc = docHost.substring(blogHost.length, docHost.length);
            var level1Post = host.substring(blogHost.length, host.length);
            var link = a.href;
            if (level1Doc != level1Post) {
              link = link.replace(blogHost + level1Post, blogHost + level1Doc);
            }
            var containerId = "top_posts_" + i;
            wrapperDiv.append("<div id='" + containerId + "' style='display: none;'></div>");
            var container = $("#" + containerId);
            container.load(link);
            setTimeout(function() {
              var post = container.find("div[class='post hentry']");
              if (post.length > 0) {
                var newText = "";
                if (i > 0) {
                  newText = "<hr style='width: 100%; clear: both;'/>"
                }
                newText += gradditCutText(post.html(), 900, 2) + "<" + "br /><" + "br/>";
                var startIdx = newText.indexOf("<h3 class=\"post-title entry-title\">");
                var endIdx = newText.indexOf("</h3>");
                newText = newText.substr(0, startIdx) + "<a href='" + link + "'>" + newText.substr(startIdx, endIdx - startIdx + 5) + "</a>" + newText.substr(endIdx, newText.length);
                container.html(newText);
                container.show();
              }
            }, 2000 * (i + 1));
          }
        });
      } 
    }
}
</script>

Couple of words about changes you might need to make to this function in order to make it working with your blog:

#top5 - this is id if the container element, you'll see it below; depending on the template you might need to change the names of the classes;
in line var blogHost = "fruitfulbookmarks-en.blogspot"; replace blog URL with your own; do not include country domain (.com, .co.uk, etc.)!
when calling function gradditCutText to cut text of your posts there are few parameters you might want to change: second parameter is max length of text, third one allows you to control how to cut it (0 - do nothing, 1 - cut to word, 2 - expand to word). If you don't want to cut text then pass both parameters equal to 0;

add HTML elements and tops script call with callback function:

<div id="top5"></div>
<div id="graddit_top_wrapper" style="visibility: hidden; display: none;"></div><script type="text/javascript" src="http://www.graddit.com/showtop/eng/33?id=graddit_top_wrapper&callback=gradditLoadTopPosts"></script>

Make sure to change top id (33 here) to your own that should be taken from administer page (when you create/manage tops).

It should be ready now. Besides that tops got new parameter: labels. Now you can specify which posts (with what tags) should be displayed in tops widgets. So (if you're familiar with JS) on a page you can display top posts filtered by categories. Try it, let me know what you think.

More interesting articles

Rate this posting:

{[['

']]}

You might like:

Saturday, October 20, 2012

Ratings widget for Tumblr

Graddit now supports Tumbl microblogging platform. Examples here. To insert a single rating you'll need to copy code from ratings page Generic tab and paste it into desired place while composing new post. To be able to use javascript inside posts you'll have to make some configuration changes:

To edit settings login to tumblr and press preferences icon (1). Set Edit post using to plain text/HTML (2).

You'll also need to add graddit.css styles in theme settings. Go to theme customization, press Edit HTML button

Add styles
<link type="text/css" rel="stylesheet" href="http://static.graddit.com/css/graddit.css"/>
to <head> section

Press Update Preview, then Save (if the button appeared). Everything is ready now to use single ratings.

If you'd like ratings to appear on each post automatically you'll need to make some more modifications to your theme template. First decide where you want ratings to appear: what kind of material, what part of post, should it be visible on the main page or only on internal pages, etc. Then try to find corresponding place in the template. Not with all the templates it will be easy to do; experiment with some harmless piece of text first (maybe even with comments). For example, for ratings to be displayed on the top of text posts below the titles on the main page and on internal pages, code needs to be added into {block:Posts} inside {block:Text} block right after closing {/block:Title}

Don't forget to save the template. Widgets code should be taken from the ratings page Tumblr tab.

Ask questions here if you have any issues with widgets in Tumblr.

Ratings widget for Tumblr, 4.62 out of 5 based on 8 ratings

More interesting articles

Rate this posting:

{[['

']]}

You might like: