sethcottle/littlelink

A lightweight DIY alternative to services like Linktree.

LittleLink

The DIY self-hosted LinkTree alternative. LittleLink has more than 100 branded button styles you can easily use, with more regularly added by our community in this repo and in LittleLink Extended.

---

🌞 Themes and Accessibility

LittleLink offers both light and dark themes right out of the box. If the default color schemes don't match your preference, you can easily customize them by updating the values in skeleton-light.css or skeleton-dark.css. For those who prefer an automatic adjustment, setting your CSS to skeleton-auto.css enables the theme to adapt based on the device's system settings. To enhance visual accessibility in both light and dark modes, buttons lacking sufficient contrast with the background are outlined with an inverse stroke to ensure visibility. While LittleLink emphasizes accessibility, it's important to acknowledge that not all brands incorporated into LittleLink achieve this standard. Branded buttons that come into LittleLink always retain the original essence of the brand and some branded buttons might fall short of optimal accessibility in terms of contrast.

---

🥇 Performance

LittleLink epitomizes simplicity and minimalism. When evaluating the LittleLink sample page (which mirrors a typical LittleLink setup for an individual) through tools such as Google PageSpeed Insights, showcases LittleLink's excellence with 100/100 in Performance, Accessibility, Best Practices, and SEO. My initial vision for LittleLink was to craft it from the fundamentals. I chose Skeleton as the foundation, enabling me to create something minimal and quick, removing the unnecessary bloat you would get from using a large framework for a page that requires nothing more than simplicity.

---

☁️ Deploy

No need for gulp, npm, or anything else to make LittleLink work—it uses the bare essentials. You can automatically fork and deploy LittleLink with Vercel, Netlify, or Amplify using the button below. LittleLink is also easy to host through GitHub Pages or on your home lab server, CDN, or other frontend hosting services. To edit, all you need is a little basic HTML knowledge to add a link to the exisiting buttons or you can create your own. See our adding custom buttons to your own fork wiki. It's simple, promise. 🤞

---

One-Click Deployments

---

🤝 Contributions

Please reference the submitting a new brand to LittleLink wiki before opening a PR.

---

📦 Community Extras

🛸 LittleLink Extended

Looking for more niche services to add to your copy of LittleLink? Check out LittleLink Extended. Users can add more niche services to this repository to help keep the core LittleLink repository less cluttered and more focused on delivering branded experiences for the majority of users.

🎨 Figma

Duplicate the LittleLink Template on Figma Community to help plan out and design your LittleLink page.

🐋 Docker

• Techno Tim is building LittleLink-Server. Check out his video!

• Drew is building a super simple Docker implementation of LittleLink.

🗃️ Misc

• Khashayar is building LittleLink Admin which lets you host your own admin portal to manage LittleLink!

• Julian is building LittleLink Custom which approaches the admin portal with an easy-to-use "plug-and-play" mentality!

---

💖 Supporters

You can support LittleLink by buying me a coffee. You can also have your name or your company added to this section and the supporters page of the LittleLink.io website.

🏢 Business Supporters

• links.dev

✨ Individual Supporters

• Drew Davis

• Robotter112

🐙 GitHub Sponsors

• Your Name Here

❤️ Patreon Members

• Your Name Here

🥰 More Ways to Support LittleLink

---

📊 Analytics

To help build a more privacy focused product, we recommend using Fathom Analytics*. View our Fathom analytics dashboard**.

* This is a referral link. Using this link to sign up for Fathom is an easy way to help support LittleLink!

** Analytics in this dashboard start May 03, 2022. View this Google Sheets file with the generic unique pageview data from Google Analytics.

littlelink's Issues

"Fanboy’s Annoyance" blocklist blocks .button-twitter

Ublock Origin has a filterlist called "Fanboy’s Annoyance".
This list blocks elements with the class "button-twitter".

Other buttons from littlelink wont get blocked by this filterlist.
I dont know if you want to consider renaming that class, i just wanted to mention it here fyi.

Add Idea

Hello,

could you Integrate Teamspeak 3 and Tellonmy too?

thanks a lot :)

Include an option for PayPal

Add version to index.html or VERSION file

I installed littlelink some time ago and I can't find the version I used.

It would be nice to have a quick and easy way to identify the running version, either with a comment in index.html or just a VERSION file packaged with the sources.

thanks a lot for your time.

Multi-user

Hello,

Is it possible to manage several users at once with littlelink ?

I'd like to create by myself a littlelink page for at least 30-40 people. Is this doable in an easy way ?

On the website, I'd like several people to have their littlelink page.

Exemple.com/user1
Exemple.com/user2
...

Dark mode renders differently on chrome vs firefox

So I have noticed that for some reason, the deployed website looks darker on chrome based browsers while looking lighter on firefox, both of which look nowhere close to what is shown on the sample dark mode website

Am I missing something here?

On the left I have chrome instances, followed by firefox to the right

Improvement: Searchbar

Please add a search bar, so people can find the links they're interested in easier

bandcamp branding

I've added bandcamp to my collection.

here's the icon:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="#FFF" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm48.2 326.1h-181L199.9 178h181l-84.7 156.1z"/></svg>

and brand colour is #61929c so css should be something like:

/* bandcamp */
.button.button-bandcamp {
  color: #FFFFFF;
  background-color: #61929c }
.button.button-bandcamp:hover,
.button.button-bandcamp:focus {
  filter: brightness(90%) }

thanks for you great project

There is no LICENSE

... so technically, others are not allowed to use this repo. Please specify what license applies to this code.

Any plans for analytics integration?

I could see it would be create to have drop in for google analytics to track link clicks,

RSS Feed Implementation

How about integrating an RSS feed? For this, however, Javascript would be required. But if the feature is easy to use, it would be a win for the project.

How to use the Signal button

Do you have any examples of how one would use the signal button? What would you put for the link?

    <a class="button button-signal" href="#" target="_blank" rel="noopener">
        <img class="icon" src="images/icons/signal.svg" alt="Signal Logo">Signal</a>
    <br>

Add Request

If possible please add a TikTok and E-Mail button because i cant do it myself. Thanks

logo idea

You probably already considered this and decided against it, but if you rotated the logo 90 degrees the L's would sort of look like the angle brackets of an HTML link.

whatsapp branding

Would be great to have whatsapp too

Best regards!

Icons missing

Hi,

I have copied all files to my web server and have not changed any of the paths. The .svg files are available. In addition, no icons are displayed on the page. But when I open it on my localhost, the .svg files are loading.

timbo036

Internet Archive logo?

Hello, I would like to use your template, but I am a media preservationist with a large library of stuff on The Internet Archive and that would be the first thing in my list of links. Would it be possible to get an Internet Archive icon?

Updater not working

I logged in today and saw "An update is available". I ran the updater from within the app. It backed up, applied it, and claimed to have updated successfully. When I was returned to the admin screen it still reported "An update is available". I logged in from a private window: "An update is available".

So, I ran the updater again and it bricked. White screen.

I restored from backup and had the same result, but only ran the updater once. Is the issue with the version detection?

New Website to add - Etsy

Hello

Is there a way to add Etsy store to littlelink?

Buttons don't auto-adjust height when multiline

If you have an amount of text that is larger than the max amount of chars for one line.

I feel like it should automatically adjust the height of the button to accommodate for the text

vimeo branding

hi,

I've added vimeo to my brands.
Colour is #1ab7ea according to their own page: https://press.vimeo.com/brand-guidelines

and logo is:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#FFF" d="M26.926 10.627c-.103 2.25-1.675 5.332-4.716 9.245C19.066 23.957 16.406 26 14.23 26c-1.348 0-2.49-1.244-3.42-3.732l-1.867-6.844C8.25 12.937 7.51 11.69 6.715 11.69c-.173 0-.778.365-1.815 1.09l-1.088-1.4a300.012 300.012 0 0 0 3.374-3.01c1.522-1.315 2.666-2.007 3.427-2.076 1.8-.173 2.907 1.057 3.322 3.69.45 2.84.76 4.608.935 5.3.52 2.356 1.09 3.534 1.713 3.534.483 0 1.21-.764 2.18-2.294.97-1.528 1.488-2.692 1.558-3.49.14-1.32-.38-1.98-1.553-1.98-.554 0-1.125.126-1.712.378 1.137-3.722 3.308-5.53 6.513-5.426 2.378.068 3.498 1.61 3.36 4.62z"/></svg>

thanks for your project!

Threds Icone looks broken

it looks like the Threads icon is empty.

How to increase button width

Hi, Imma noob, i would like to increase the button width and put a picture instead of solid color/gradient

Can i play with the source code.

Can i play with the source code.

Script flagged as malware

In phpstan.phar there seems to be a command being flagged as malware (php.shell.php.eval.githubusercontent). Screenshot attached
https://imgur.com/a/CZ61eLP

unable to deploy to vercel

when i try to deploy to Vercel: https://vercel.com/new/clone?project-name=littlelink&demo-title=LittleLink%20Demo&demo-description=Imported%20from%20GitHub.&repository-name=littlelink&repository-url=https%3A%2F%2Fgithub.com%2Fsethcottle%2Flittlelink

I receive this error: littlelinkAn unexpected error occured. Our team has already been notified and are working to resolve the issue, please try again shortly.

it create the app in vercel
and make the repo in github
but this one is empty.

Add stackoverflow :pray:

Hi,

First of all thanks so much for this product <3
Help me a lot building my freelance website www.learniapps.com

I was wondering if you could add a stackoverflow button ?
I am a software engineer and it would be perfect to promote my stackoverflow profile

Regards,
Florent

littlelink Remedies LinkTree's SEO Issues?

Hopefully this is an acceptable place to have a discussion...
There are well known SEO problems with using LinkTree. littlelink can fix the SEO issue of not owning the domain you're using for links, but does anyone know how much that remedies the overall SEO issue of this "one link" approach? Perhaps there are littlelink users who have done SEO investigations that can share optimizations they've used or any downsides or fixes they've experience from self-hosting on their own domain name.
Thanks!

Suggestion: Add npm image

Add the npm logo.

https://www.npmjs.com

Request for more links

Found this project thanks to Techno Tim on Youtube.

Please add links for Signal, Matrix and Session private messengers.

overflow? long text support

Hi, i would like to have buttons that support long text eg overflow moves to the next line

Mastodon verification not working

The mastodon verification does not seem to be working (At least not for my mastodon.social profile).
Although the rel=me attribute is already present in the index.html body, the verified symbol only showed up after I added another link to my profile from the page header.
I am not sure though if the problem is that the link is not in the header or that there are multiple rel attributes on the link.

Do you know what the source of this Problem is? Have you tested the currently active version?

how do i integrate it in my own

Would prefer you integrate overflow for buttons in your own fork. I believe it directly negates the goal of LittleLink having the support built-in. I want to encourage the use of short text to help keep external links as readable and uniform as possible. Ideally, your text is really no longer than Find us on Facebook. You also have a little wiggle room to change the button width to something larger than 300px, which was just chosen to help support as many mobile screen sizes as possible.

Originally posted by @sethcottle in #9 (comment)

how can i add email on little link

https://ibb.co/5jckQXN
actually to add anything on little link it alaways ask for URL that mean i have to add HTTPS://
but how can i add https on email ?

another thing , i couldnt find any easy solution to install it as my localhost , i am using docker , i dont know docker stuff too much. any easy doc ?
thanks for reading my bad English

Addition of Two Links

Thoughts about Cash App and Stream Labs being added as links?
If approved, I wouldn't mind working on it and sending a PR

New sites to add

Hi,
Thanks for littlelink soft. It's really good.
I have request to add this sites to littlelink:

• ListenBrainz
• Discogs
• Mixcloud
• Filmweb (Polish movies database)
• GOG.com

I hope You to add those sites in future releases.
Good luck.

Avoid icons folder on root level

Please consider one of the three things:

1. Merge folder "icons" with folder "images". As both just hold images
2. Make folder "icons" a subfolder of images.
3. Rename folder "icons" into something else

The reason for my request is because of this

Default installations of Apache usually alias /icons to Apache’s icons directory which cannot be overridden in an .htaccess file. If you do not control the Apache configuration of a server, and for maximum compatibility, it is always best to never have an /icons directory at a website’s root level.

Avoiding the use of "icons" folder on root level would just improve overall compatability with webservers.

Thanks in advance

Adding Mastodon link entry

add gh-pages branch?

Hello, I have a fork with a gh-pages branch that deploys LittleLink to GitHub pages here.

I found it useful to add a .nojekyll file and move the site to a docs/ folder to make gh pages act nicely.

I do not want to make these changes to the main branch, so there is no PR. But if you would like to add GitHub pages to the deployment options, this fork may be useful.