How can I easily retrieve the Tiny URL link of a Confluence page ?

[Bastien Soret]

Hello,

As you know, Confluence is set by default to display “pretty url” when the name of the page doesn’t have any special character in it and the page ID when it has one.

In our documentation, we’re often changing the titles of the user stories and referencing them in multiple places which makes us lose a lot of time to change the links.

We have the possibility to go in the page information, get the “Tiny URL” of the page and use it as reference link so that we don’t have any issue when changing the name.

What could be an easy solution to retrieve the Tiny URL link of a Confluence page to show it directly on my page to avoid going in the page information ?

[Radek Dostál]

The tiny url should be present in each page's DOM, so my thinking is we can grab it from it.

If you open dev tools and try to run

document.querySelector("head > link[rel='shortlink']").href

it should retrieve the tiny url.

The issue is with getting it on the page - to do that dynamically for all pages, the only reasonable way I found so far was to insert some javascript to the page layout:

Space Tools -> Look and Feel -> Layout -> Main Layout (create new/edit)

And insert:

<p id="tinyurl"></p>
<script>
      document.querySelector("p#tinyurl").innerText = document.querySelector("head > link[rel='shortlink']").href;
</script>

Below the page title, like this:

<h1 id="title-text" class="with-breadcrumbs">
  #if ($sitemeshPage.getProperty("page.title-text-span"))
    $sitemeshPage.getProperty("page.title-text-span")
  #else
    #pageTitleLink()
  #end
</h1>

<!-- custom tinyurl display -->
<p id="tinyurl"></p>
<script>
      document.querySelector("p#tinyurl").innerText = document.querySelector("head > link[rel='shortlink']").href;
</script>
<!-- end -->

</div>
</div><!-- \#main-header -->
        #end

And that results in this:

Given some tweaking you could position that better. Create a link element, etc.

Alternatives would probably be global js for all Confluence, or adding html/js to an html macro, so not great. The layout seems the most reasonable to me as long as you ensure it does not throw an exception later on and break the page altogether, so making sure stuff is not undefined and such seems like a must.