Bookmarklets: Adding Sources to Trickle the Easy Way

05 May 2021

Using a Bookmarklet is the quickest and easiest way to add a source to Trickle using a browser on Mac or PC. Setting up a bookmarklet takes less than 30 seconds, if you know how!

The first time you add a link to Trickle, you’ll probably do it by copying the web address for the page you want to save and then pasting it on your My Trickle page. This method works well, but it requires a bit of switching back and forth between different browser tabs. Luckily, there is a better way!

If you’re on a smartphone, you can use a shortcut as we describe in this blog post. If you’re using a computer like a Mac or a PC, you can add a Bookmarklet to your browser. This post will explain how to set it up.

Content

What is a Bookmarklet
Example Bookmarklet
Creating a Bookmarklet for Trickle
- Bookmarkleter Tool (Easiest method!)
- Manual Method (Chrome)
- Manual Method (Safari)
- Any other browser

What is a Bookmarklet?

Web browsers like Chrome, Safari, Internet Explorer or Firefox let you save links to websites so that you can easily find them again. These saved links are called bookmarks or favourites, depending on the browser, we’ll just call them bookmarks from now on.

Bookmarklets use the bookmark feature in your browser not to navigate to a website, but to execute a command in Javascript.

Example Bookmarklet

Javascript might sound frightening to any non-coders reading this, but it doesn’t need to be. Here’s a quick example of what a bookmarklet can do. You can do this live in your browser, just add a bookmark and paste the Javascript below where the URL usually goes. Let’s name this example bookmarklet: “Pinkify“. Can you guess what effect running the following Javascript code on a website would have?

javascript:(function(){document.body.style.background = 'pink';})();

If you guessed that it would change the background colour to pink, then you were absolutely right. And don’t worry, that change only takes place locally on your computer, so you haven’t just coloured Wikipedia pink for everyone in the world.

Creating a Bookmarklet that adds sources to Trickle

Now, let’s make use of these Bookmarklets to help us quickly add a source to Trickle without needing to copy the link, navigate to the Trickle site and manually paste the address. We’re going to create an “Add to Trickle” bookmarklet. If you run it while visiting a specific webpage, the browser will copy the address for that page and automatically open Trickle and paste it for you. So saving a source takes just two clicks.

There are two ways to add this code to your bookmarks. Both are really easy, but we’ll walk through them step-by-step.

Bookmarkleter Tool (Easiest method!)

Developer Chris Zarate created a nifty tool for creating bookmarklets which is available to all on Github. Using this tool is the easiest way to create an “Add to Trickle” bookmarklet. Here’s how:

Click the following link: https://chriszarate.github.io/bookmarkleter/
Leave all the Options as they are

Give the Bookmarklet a name like “Add to Trickle“
Paste the following Javascript where it says “Paste your Javascript here”

javascript:(function(){location.href='https://trickle.app/?url='+encodeURIComponent(location.href)}());

Ensure that the Bookmarks Bar (Chrome) or the Bookmarks Sidebar (Safari) is open

Drag the link to the Bookmarks Bar (Chrome) or to the Bookmarks Sidebar (Safari)

Drag the link to the Bookmarks Bar in Chrome

Your Bookmarklet is ready to be used! Whenever you find something you want to save to Trickle: just open the page in your browser and click the bookmarklet. Note that you might have to sign in to Trickle if you aren’t logged in already.

Manual method for the CHROME browser

Chrome is the most popular browser globally. Let’s look at how to create a bookmarklet in this browser.

Open your Chrome Browser
Click the Menu button at the top right (three vertical dots)

Hover your mouse over the Bookmarks Option, which opens an additional list containing a list of your existing bookmarks
Now click on Bookmarks Manager
Click the Menu button of the Bookmarks Manager (again three vertical dots, but not the same ones as before! These are slightly below the three dots you clicked to open the Chrome menu.)
Click on Add new bookmark

Name the Bookmark something like “Add to Trickle“
Paste the Javascript in the box marked URL (this makes the bookmark into a bookmarklet!)

javascript:(function(){location.href='https://trickle.app/?url='+encodeURIComponent(location.href)}());

Find the new Bookmarklet at the very bottom of your bookmarks list, drag and drop it closer to the top of the list to make it easier to access (optional)

Show the Bookmarks Bar (optional): Open the Chrome Menu again and hover over Bookmarks, then click Show Bookmarks Bar

Manual method for the SAFARI browser

Safari is the second most-popular browser. Here is how to create a bookmarklet for Safari:

Open the Safari browser
Open Bookmarks in the Sidebar
Open any website e.g. https://trickle.app

In the Menu Bar at the top of your Mac’s display, you should see the apple symbol and the word “Safari” (if not make sure you have Safari open and that it’s the last app you clicked on)

Click on Bookmarks
Click Add Bookmark
Rename the Bookmark to something like “Add to Trickle“

Make a note of what folder you are adding the bookmark to (Favorites is the default)
Click Add — a bookmark has been created, but it doesn’t contain the Javascript code yet
Copy the Bookmarklet Javascript from below (highlight the text then Command+C)

javascript:(function(){location.href='https://trickle.app/?url='+encodeURIComponent(location.href)}());

Now find the new “Add to Trickle” bookmark and two-finger-tap or right-click it
Click on Edit Address…

Delete the web address (URL) that’s currently there
Paste the Javascript into the box where the URL previously was

Drag the Bookmarklet to the top of your favourites (optional)

Bookmarklet in any other browser

It should be easy to add a bookmarklet to any other browser e.g. Firefox or Microsoft Edge. Simply add a new bookmark and paste the Javascript where the URL normally goes. The process should be similar to what we described above.

Here’s the Javascript:

javascript:(function(){location.href='https://trickle.app/?url='+encodeURIComponent(location.href)}());

If you are using a browser other than Chrome or Safari and you’re struggling to set up your Bookmarklet, then don’t hesitate to reach out via our on-site chat or at support@trickle.app.