What do I need to build my very own URL Shortening Service for clean Social Media links using a WordPress backend?
(I would like to jump straight to the point of “building”. Therefore, I suggest readers looking for the Why behind this project to jump straight to the last paragraph of this article.)
#1 A Domain
I was looking to find a domain that I can use to shorten URLs to the rather long domain of thebigc-agency.de. I picked tbc-a.de which is only five characters without the TLD and eight characters with the TLD. This is a saving of 9 characters compared to the main domain! I would call this quite significant. I register the domain with my current webhoster and the domain is included in my subscription – another win.
#2 A clean WordPress install
In the second step I setup a basic WordPress installation. Utlilizing the PLESK WordPress Toolkit I can set it up with just three clicks. I harden security via checklist and start customizing my backend.
Since the process of setting up and customizing WordPress I am going to skip it for the purpose of this article. If you are interested in a typical WordPress setup project, I recommend reading the Website Setup Series article series.
#3 A minimalistic WordPress Theme
This new site should – admittedly – not only be able to forward links, but also feature some features usually handled by profile link distributors like Linktree. This means that I need to be able to create small profile pages for each of my social network profiles. These profiles would in turn feature links to other social network profiles as well as recently posted content. I expect this use case to be mostly handled on mobile. With this in mind I need small screen theme setup which does not put a lot load on the server.
Fortunately, I don’t have to start from scratch. I can simply export the customizer settings from thebigc-agency.de and import them again to configure things like colors, fonts and layouts on tbc-a.de.
Because I expect 90% of traffic to be mobile in nature, I pick a narrow layout and try to avoid elements that are large in height or width.
#4 The Redirection plugin
For the technical URL shortening mechanics, I use the WordPress plugin Redirection. Strictly speaking, I misuse the plugin for my requirements. This is because the plugin is actually intended to generate 301 redirects for posts that have been moved or permanently migrated within a domain. But it can theoretically also redirect fictional URLs to external domains. That’s enough for my purposes.
On an even more abstract level, Redirection actually only provides a graphical user interface for managing the server .htaccess. However, this makes my life a lot easier and fulfills the purpose I was looking for.
The configured URLs can also be grouped. The groups are used primarily to define which server technology executes the 301 redirect:
- nginx
- Apache
- WordPress
The fastest redirect method is nginx, closely followed by Apache. However, both technologies depend on the individual infrastructure being installed and active in the web hosting subscription. To be on the safe side, I could simply use “WordPress” as the forwarding technology. But because I am pretty sure that an nginx server is connected upstream of my Apache server, I select nginx.
#5 Ein System
Amongst other things what bothers me about bit.ly and other short URL services is that I need a premium subscription to make the URLs descriptive or readable. Not so with my own URL shortener! For the URLs redirecting to my THE BIG C Agency content, I want them to meet the following three criteria:
- The URLs have to be significantly shorter than the URLs of the original domain!
- The URLs have to be easy to type into the browser.
- The short URLs must be memorable and logical – even without typing in the browser directly.
For example, I imagine that I name the short URLs for instagram as follows:
tbc-a.de/[Social Network Short][Link ID]The links in posts instagram could look something like this:
- tbc-a.de/insta20
- tbc-a.de/insta21
- tbc-a.de/insta22
The generated links fulfill all three requirements. To illustrate the underlying principle: The URLs I would generate for facebook posts, would look something like this:
- tbc-a.de/fb20
- tbc-a.de/fb21
- tbc-a.de/fb22
So for every new link to be generated via Redirection I can simply add “one” to the previously highest link number per network:
A little annoying, but certainly exciting for tracking nerds: By postfixing the target URLs with utm parameters:
?utm_source=instagram&utm_medium=socialI can still track the traffic origin on thebigc-agency.de despite the detour via the tbc-a.de domain,
#6 A frontend application?
At this point, it becomes clear that although the process is not particularly technical, it is a little bumpy in certain places. In a perfect world I would actually like to have a front-end application that handles the following link creation steps programmatically for me:
- Availability on a subpage of the shortener domain
- The page can only be accessed by logged-in users
- I simply paste the thebigc-agency.de post into an input field
- The frontend application generates the link in redirection based on the selected redirect group (e.g. instagram = /insta)
- And automatically counts the link IDs based on the highest existing network ID. (e.g. /insta22 +1 = /insta23)
- Then standard utm_ parameters are appended and the finished short URL is spit out again for me to copy.
I did not yet run any test. But I could imagine that this could be implemented within WordPress, but I won’t go that far since I actively tried limiting the scope for my first URL shortener. Interestingly, the Redirection plugin has a reasonably well documented API that can be used for this: Redirection REST API Documentation.
#7 Linktree Features?
As mentioned earlier, I would be nice to also have Linktree like features on the domain. Small profile pages I can link from my social network profiles and that guide people through my content. Basically a link-in-bio service. I can actually implement this relatively simply thanks to the WordPress frontend.
However, I will deal with this – also for SEO reasons – in a separate blog post.
My former self hosted URL experience
As my BETA-NET experiment has shown, I’m a big fan of self-hosting projects and software. There are a few open source URL shortening services out there, but none of them really produced promising results for me. Names like Shlink, YOURLs and Polr come to mind.
- Some installations had stability issues.
- Others had too high server requirements (or simply didn’t run on a simple Apache server).
- And all of them had really bad user experience.
Accordingly, I looked for a more stable alternative – preferably in the WordPress ecosystem – and found none. So this little project was born. A little cumbersome, but functional. If I can now get the link-to-bio service up and running I should be well prepared for me and my small agency needs!
