Dynamic SEO-Friendly Tag Cloud Generator In jQuery

tagcloud.js is a flexible, customizable, SEO-friendly tag cloud generator that dynamically sets the corresponding text size for each tag based on priority (also called weight and frequency).

More Features:

• Configurable tag styles.
• Semantic markup. Based on HTML unordered list.
• Apply random colors to the background of your tags.
• Auto set the tag color based on the background color.

How to use it:

1. To get started, include the tagcloud.js jQuery plugin's files on the page.

<link rel="stylesheet" href="/path/to/jquery.tagcloud.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.tagcloud.js"></script>

2. Generate a tag cloud from a normal HTML list. The data-weight attribute is used to determine the font size of your tags based on their weight.

<ul id="myTagCloud">
  <li data-weight="60"><a href="#">HTML</a></li>
  <li data-weight="35"><a href="#">CSS3</a></li>
  <li data-weight="85"><a href="#">JavaScript</a></li>
  <li data-weight="100"><a href="#">jQuery</a></li>
  <li data-weight="78"><a href="#">React.js</a></li>
  <li data-weight="62"><a href="#">Angular</a></li>
  <li data-weight="53"><a href="#">Vue.js</a></li>
  ...
</ul>

$('#myTagCloud').tagCloud({
  // configs here
});

3. You're also allowed to define the tag list in JavaScript as follows:

<div id="anotherTagCloud"></div>

const myTagList = [
      { 
        name: 'HTML5',         
        link: '#', 
        weight: 90, 
        tooltip: 'Optional Tooltip' 
      },
      { 
        name: 'CSS3',
        link: '#', 
        weight: 35 
      },
      { 
        name: 'JavaScript',    
        link: '#', 
        weight: 85 
      },
      // more tags here
  ]

$('#anotherTagCloud').tagCloud({
  data: myTagList,
  tag: {
    format: '<a href="{tag.link}">{tag.name}</a>: {tag.weight}'
  },
});

4. Customize the tag cloud with the following configs.

$('Selector').tagCloud({

  // tag cloud container options
  container: {
    width: 500,
    height: 'auto',
    backgroundColor: '#f0f0f0',
    color: '#666666',
    padding: '10px 5px',
    fontFamily: '"Helvetica Neue",Helvetica,Arial,sans-serif'
  },

  // tag options
  tag: {
    // min font size
    minFontSize: 10,     
    // max font size
    maxFontSize: 40,  
    // black for light background, white for dark background
    color: 'auto',
    // enable text shadow
    textShadow: false,
    // '{tag.link}', '{tag.weight}', '{tag.percent}'
    format: '{tag.name}',
  },

  // an array pre-defined background colors
  backgroundColors: [
    '#db843d', '#92a8cd', '#a47d7c', '#058dc7', '#50b432', '#ed561b', '#24cbe5', '#64e572',
    '#ff9655', '#d6cb54', '#6af9c4', '#b5ca92', '#2f7ed8', '#5c40de', '#8bbc21', '#910000',
    '#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a', '#db843d', '#92a8cd',
    '#a47d7c', '#058dc7', '#50b432', '#ed561b', '#24cbe5', '#64e572', '#ff9655', '#d6cb54',
    '#6af9c4', '#b5ca92', '#2f7ed8', '#5c40de', '#8bbc21', '#910000', '#1aadce', '#492970',
    '#f28f43', '#77a1e5', '#c42525', '#a6c96a', '#db843d', '#92a8cd', '#a47d7c', '#058dc7',
    '#50b432', '#ed561b', '#24cbe5', '#64e572', '#ff9655', '#d6cb54', '#6af9c4', '#b5ca92',
    '#2f7ed8', '#5c40de', '#8bbc21', '#910000', '#1aadce', '#492970', '#f28f43', '#77a1e5'
  ],

  // black or white, based on background color
  defaultTagColor: 'auto',   

  // default background color
  defaultTagBackgroundColor:  '#ff9655',
  
});

Changelog:

2021-04-08

• Added options.tag.format;
• Changed options.data[].tag to .name

---

This awesome jQuery plugin is developed by peterthoeny. For more Advanced Usages, please check the demo page or visit the official website.