How to shorten a URL with vanilla JavaScript and the Shrtcode API

Shrtcode is a free link shortening service.
They have a web GUI, but they also have an API you can call to shorten URLs. Today, we’re going to look at how to use it to shorten URLs.
The API endpoint is https://api.shrtco.de/v2/shorten, with the url to shorten as a query string parameter.
To shorten the URL for my website, I would do this.
// The URL to shorten let url = ‘https://gomakethings.


This content originally appeared on Go Make Things and was authored by Go Make Things

Shrtcode is a free link shortening service.

They have a web GUI, but they also have an API you can call to shorten URLs. Today, we’re going to look at how to use it to shorten URLs.

The API endpoint is https://api.shrtco.de/v2/shorten, with the url to shorten as a query string parameter.

To shorten the URL for my website, I would do this.

// The URL to shorten
let url = 'https://gomakethings.com';

// Call the API
let request = await fetch(`https://api.shrtco.de/v2/shorten?url=${encodeURIComponent(url)}`);

I’m using async and await in this example. I’m also passing the url into the encodeURIComponent() function to encode it for use in a URL.

Next, you would use the Response.json() method to convert the API response into an object.

// Call the API
let request = await fetch(`https://api.shrtco.de/v2/shorten?url=${encodeURIComponent(url)}`);

// Get the response
let response = await request.json();

The API response object has a few properties and variants under the result property. The one we want is full_short_link.

// The shortened URL
let shortened = response.result.full_short_link;

Want to really dig in to topics like this? Check out my Vanilla JS Pocket Guides—short, focused ebooks and video courses made for beginners. Let's make this the year you master JavaScript!


This content originally appeared on Go Make Things and was authored by Go Make Things


Print Share Comment Cite Upload Translate Updates
APA

Go Make Things | Sciencx (2022-11-08T14:30:00+00:00) How to shorten a URL with vanilla JavaScript and the Shrtcode API. Retrieved from https://www.scien.cx/2022/11/08/how-to-shorten-a-url-with-vanilla-javascript-and-the-shrtcode-api/

MLA
" » How to shorten a URL with vanilla JavaScript and the Shrtcode API." Go Make Things | Sciencx - Tuesday November 8, 2022, https://www.scien.cx/2022/11/08/how-to-shorten-a-url-with-vanilla-javascript-and-the-shrtcode-api/
HARVARD
Go Make Things | Sciencx Tuesday November 8, 2022 » How to shorten a URL with vanilla JavaScript and the Shrtcode API., viewed ,<https://www.scien.cx/2022/11/08/how-to-shorten-a-url-with-vanilla-javascript-and-the-shrtcode-api/>
VANCOUVER
Go Make Things | Sciencx - » How to shorten a URL with vanilla JavaScript and the Shrtcode API. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/11/08/how-to-shorten-a-url-with-vanilla-javascript-and-the-shrtcode-api/
CHICAGO
" » How to shorten a URL with vanilla JavaScript and the Shrtcode API." Go Make Things | Sciencx - Accessed . https://www.scien.cx/2022/11/08/how-to-shorten-a-url-with-vanilla-javascript-and-the-shrtcode-api/
IEEE
" » How to shorten a URL with vanilla JavaScript and the Shrtcode API." Go Make Things | Sciencx [Online]. Available: https://www.scien.cx/2022/11/08/how-to-shorten-a-url-with-vanilla-javascript-and-the-shrtcode-api/. [Accessed: ]
rf:citation
» How to shorten a URL with vanilla JavaScript and the Shrtcode API | Go Make Things | Sciencx | https://www.scien.cx/2022/11/08/how-to-shorten-a-url-with-vanilla-javascript-and-the-shrtcode-api/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.