2 Ways to Shorten URLs and Trade-offs of Each

Here’s a how-to and trade-offs of 2 plugins for shortening URLs

Google Shorten URL
Pros: Dead-simple set up; Free if <1Mil conversions/day; analytics dashboard
Con: If you’re not dedicated server, you cannot lock down the API via an IP (as the Bubble IP is not constant) or via your domain (as Bubble does a server redirect)

Step-up:

  1. Add Google URL Shortener Plugin in Bubble
  2. Enable API via google console (https://console.developers.google.com/) → Library
  3. Get your API key in credentials tab. Also, add IP or domain restriction if you’re on a dedicated Bubble plan. If you’re not on a dedicated plan, you cannot lock down the API.
  4. Add your API key in the Bubble plugin “API Key”
  5. Then use “GET data from External API” in Bubble to convert URLs

@CoBubble’s Rebrand.ly plugin
Pro: Ability to use your domain as the short URL (eg. re-brand it)
Con: Rebrand.ly is $99/mo for analytics – (Founder wrote me that they’re re-working pricing)

Step-up:

  1. Add Rebrand.ly Plugin in Bubble
  2. Create a Rebrand.ly Account
  3. Get an API key (API for custom short URLs - Code snippet)
  4. Enter the API key in the Bubble Plugin.
    ( I put the key in each box, and it works. Not sure why there are multiple… )
  5. Head back to Rebrand.ly to rebrand the URL shortener. Add your domain in Rebrand.ly (https://rebrandly.com/newdomain). You’ll need access to your DNS set up to add the CNAME for rebrandly.
  6. You’ll also need your domain_id. The easiest way to get this is to go to https://developers.rebrandly.com/docs/domains-list-endpoint. Find the “/v1/domains” section. Then, click try it out. Enter your API key from step 3. This will return your domain_id.
  7. Now, head back to bubble to use “GET data from External API” in Bubble to convert a URL.

The final products look like so:

  • I’ve converted the raw “Eventbrite URL” using google and rebrandly. My brand is “Meetaway” so you can see the URL that my users will see.

Within the editor, I selected “GET data from External API” and set up the following:
For Google:


For Rebrand.ly

12 Likes

I must be doing something wrong since I am not seeing any shortened URL when I follow the steps above. Did anybody else have trouble with Rebrandly where they couldn’t see the shortened URL? Any steps above incorrect or incomplete?

Hi. It’s been awhile since I’ve worked with rebrandly.

Registering the CNAME may take ~24hrs.

Head back to Rebrand.ly 1 to rebrand the URL shortener. Add your domain in Rebrand.ly 1 (https://rebrandly.com/newdomain 1). You’ll need access to your DNS set up to add the CNAME for rebrandly.

Hey @kramwe,

It’s worth noting that Google is discontinuing their URL Shortener as per their blog post. :slight_smile:

Thanks. Saw this, we’re good for awhile. Rebrandly also redid their pricing and it’s now more favorable to startups.

Thanks for the feedback. So perhaps I just have to wait a day and see where we are at “if my shortened URLs show up”.

You might be getting a lot of interest in your walkthrough based on cobubble’s news about the URL shortener from Google. You have the best walkthrough yet but it might be out of date.

Thanks. Let me know if this doesn’t work. I’d dust off the instructions.

1 Like

I guess where I need help is at the Rebrandly site itself. I am not sure I am using the right ID since there is no specific domain_id field that I am seeing? Perhaps I am in the wrong part of https://developers.rebrandly.com/docs/domains-list-endpoint

Could you provide a little more clarification as to what we are supposed to do to get the right ID? The right spot and the right method?

You’re trying to get your domain_id?

This is how:
Go to: https://developers.rebrandly.com/docs/delete-link-endpoint section: /v1/domains
You’ll see a “test it out” feature. Simply click that. Push “try out” and you’ll be prompted to enter your API key. If you’ve entered a valid key, you’ll see a 200 response below. The “id” field = your domain_id.

Well got that done. Still not showing the short URL in my app though. More tellingly when I use my share buttons like email, it shows as HTTP://Undefined

So somewhere along the line I am doing something wrong.

I redid all the steps above just as stated. I will wait a bit longer to see if the Cname is not working correctly.

Ok so here is what happened. Apparently the api sends the fields description and name to Rebrandly, even if those fields are blank. This is not supported in the free version of rebrandly. So I assume you have to upgrade to their premium accounts to enable this API. Alternatively the api developers can set the fields to not send when blank, so only the URL gets sent.

“This error happens because you trying to send the field “description” along with the link,
but your Rebrandly plan does not include the Link Notes feature (only premium plans have, the FREE plan does not have notes/description).
Please double check documentation here https://developers.rebrandly.com/docs/create-a-new-link,
to fix it it should not pass that field to API when you create links.”

#bad UX. I’m glad you were able to solve it though I wish you had these hrs of your life back. Thanks for posting. Hope this clears the way for anyone else using rebrandly.

1 Like

Ok so new issue. Rebrandly api makes multiple links of same url which eats up your allowance. Can anybody make sense of the response as to how to avoid this within the constraints of bubble api

Gianni (Rebrandly Support)
Jun 4, 1:06 PM UTC

Hi Brad,
Here is Gianni from tech team,
if you use API, you can make sure that every destination got a specific slashtag and not more than once.
A technique you can use is Hashing: you can Hash (applying a hash function, there are libraries in many languages to do that) your destination URLs when you create a link, and “derive” from them, for example, a 6/7 digits slashtag which would be unique to your destination.

Whenever you want to create a new link,
before to trigger the Create operation for the link, you could check whether a link already exists with the same slashtag (where the slashtag is derived from your destination URL, so every destination would get the same slashtag every time).
Here is how you can check via API whether a link already exists with a given domain and slashtag

I once had this issue as well. To fix it I saved a field on a piece of data (an Event page), I called it Short Link (type: text).

I then made the Rebrandly call once when the even was created and save this short link result directly on the Event. Then I only need to display the ‘Short Link’ from there on out instead of calling the Rebrandly API every time. So on the event page, you would reference the saved Data field and not use the ‘Get data from API’ every time the page loads on a text field


Geoff | Top Shelf Templates
Check out a Best Selling Bubble Template
Check out one of The Most Used Bubble Template (FREE)

3 Likes

This worked like a charm. Thanks for the tip once again!!!

Don’t know if this is useful to anyone else - but I was looking for an easy solution to this for a long time, so thought I would share here.

So using the tiny url shortener plugin: TinyURL URL Shortener Plugin | Bubble I managed to get it to work like it shows on the screenshots below. It does not give you the pretty URL’s with your domain name, but it does give you a much more shareable friendly url at least.

1 Like

@kristerbagnkop Great solution! Works perfect for me.

1 Like

Hello all,

Question: I installed the plugin TinyURL…but it does not appear anywhere ( except for in the Plugin list). What am I doing wrong?

@SenorPelota in your Text to Copy in the AirCopy config, choose get data from external API, then pick the URL shortener

1 Like

@ambroisedlg, Thanks you got me on the right path!
For future dwellers on this topic…You really only need TInyURl.

When you want a TinyURL, for instance when a user hits a button, in the action where you want to place the shortend URL ( for instance, adding it to Database via Make change to…'you only need to ‘Get data from Extarnal API’-> Choose TinyURL in the list, Choose in the parameter field what URL you want to shorten, and Presto, it is done ( and goes fast as well).

1 Like