How to create a page in Blogger to show all tags/labels

There’s no straightforward way to fetch all existing tags in a Blogger hosted blog or site. Today I’ll show you how to work around this issue.

Using the Blogger API the only way to get all tags is to fetch all the posts and scrape the tags, remove the duplicates, and you’re left with all the tags available in the blog. Depending on the number of posts you have, this might turn out to be a very time consuming call.

I’ll show you a better and easier way to do this using the Labels widget.
The idea here is to only show the widget on a specific page. This specific page should be created beforehand.

I use the default code for the Labels widget (you can add it to your template via Layout > Add Gadget) and wrap all the code inside the main includable with a couple of conditions to test if it’s a static_page and to check if the page name is the one where I want to show the tags.

Why these conditions? In my case I want to show the tags on a static_page so I check for that. You can see here all the available pageTypes you can use.

I also want to show the tags in a specific page named Tags. I could have chosen to check for a specific URL, using data:blog.url data property but since I have both a test and production environment it’s best for me to use the page name.

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
  <b:includable id='main'>
    <b:if cond='data:blog.pageType == "static_page"'>
      <b:if cond='data:blog.pageName == "Tags"'>
        <b:if cond='data:title'>
          <h2><data:title/></h2>
        </b:if>
        <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
          <b:if cond='data:display == &quot;list&quot;'>
            <ul>
              <b:loop values='data:labels' var='label'>
                <li>
                  <b:if cond='data:blog.url == data:label.url'>
                    <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
                  <b:else/>
                    <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
                  </b:if>
                  <b:if cond='data:showFreqNumbers'>
                    <span dir='ltr'>(<data:label.count/>)</span>
                  </b:if>
                </li>
              </b:loop>
            </ul>
          <b:else/>
            <b:loop values='data:labels' var='label'>
              <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
                <b:if cond='data:blog.url == data:label.url'>
                  <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
                <b:else/>
                  <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
                </b:if>
                <b:if cond='data:showFreqNumbers'>
                  <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
                </b:if>
              </span>
            </b:loop>
          </b:if>
          <b:include name='quickedit'/>
        </div>
      </b:if>
    </b:if>
  </b:includable>
</b:widget>