Showing posts with label random labels. Show all posts
Showing posts with label random labels. Show all posts

December 16, 2012

Display random labels on blogspot blog

2 comments: Author: tec at 12/16/2012 05:14:00 pm Labels: , , ,
This Javascript snippet will retrieve random labels from a blogspot blog and display it in sidebar or anywhere else, useful if you've too many labels and only want show 'x' number of random labels on each page load.

Technology used:

Javascript, YQL, JSON feed

Usage:

- Configure and include the snippet and add label div to blog template/html.

View/Copy snippet:

Data hosted with ♥ by Pastebin.com - Download Raw - See Original
  1.     /**
  2.     * @author Manish Raj
  3.     * @website http://www.technoslab.in
  4.     */
  5.    
  6.     // Configure
  7.     var blog_url = 'www.technoslab.in'; // Just the host. Example. yourblog.blogspot.com
  8.     var max_labels = 50; // Maximum number of random labels to show.
  9.     var label_element = 'labels'; // id of the element where labels would be displayed. Example: <div id="labels"></div>
  10.    
  11.     function showLabels(){
  12.         var queryUrl = 'http://query.yahooapis.com/v1/public/yql?q=select%20feed.category%20from%20json%20where%20url%3D%22http%3A%2F%2F' + blog_url + '%2Ffeeds%2Fposts%2Fsummary%3Falt%3Djson%26max-results%3D0%22&format=json&callback=labelCb'
  13.         var script = document.createElement('script');
  14.         script.setAttribute('type', 'text/javascript');
  15.         script.setAttribute('src', queryUrl);
  16.         document.getElementsByTagName('body')[0].appendChild(script);
  17.     }
  18.    
  19.     // Label Callback
  20.     function labelCb(response){
  21.         var html = '';
  22.         if(response.query.count > 0){
  23.             response.query.results.json = response.query.results.json.shuffle();
  24.             for(var i = 0; i < response.query.count && i < max_labels; i++){
  25.                 html += '<a href="http://'+blog_url+'/search/label/'+response.query.results.json[i].feed.category.term+'">'+response.query.results.json[i].feed.category.term+'</a>, ';
  26.             }
  27.         }
  28.         document.getElementById(label_element).innerHTML = html;
  29.     }
  30.    
  31.     // From SO: http://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array-in-javascript
  32.     Array.prototype.shuffle = function () {
  33.     for (var i = this.length - 1; i > 0; i--) {
  34.         var j = Math.floor(Math.random() * (i + 1));
  35.         var tmp = this[i];
  36.         this[i] = this[j];
  37.         this[j] = tmp;
  38.     }
  39.         return this;
  40.     }
  41.    
  42.     // Load and show labels
  43.     window.onload = function(){
  44.         showLabels();
  45.     }


Or Download: http://pastebin.com/raw.php?i=PkZY87yV
Read More
Subscribe to: Posts (Atom)