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

Bastien Soret
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
March 13, 2024

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 ?

1 answer

0 votes
Radek Dostál
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 13, 2024

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:

image.png

 

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.

 

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events