WordPress School: Bookmarklets and User Scripts

In the last tutorial in Lorelle’s WordPress School free online course covering the web browser, your gateway to the web and WordPress, we covered bookmarks and how to save a web page for later access and reading. In this tutorial, we take bookmarks a little further by exploring browser bookmarklets and user scripts, small but powerful JavaScript programs to extend the functionality of your web browser on the web and with WordPress.

I highly recommend you read the previous tutorial before going forward to learn the basic terminology and functionality of bookmarks and using the bookmark bar.

Browser Bookmarklets

A bookmarklet is a JavaScript saved as a bookmarklet to your bookmark bar or in your bookmark manager. There are bookmarklets you click to activate and others that will activate automatically when you load the web page or website associated with the bookmarklet’s code.

Think of bookmarklets as mini-programs. They contain instructions to take action on the web page you are viewing. For example, if you are using the bookmarklet to send a web page to your Kindle app for reading later, you must click the bookmarklet name on the bookmark toolbar to initiate the action to save the web page in a format and send it from the browser to your Kindle. There are several steps in the process of that sending, each controlled by the program code in the bookmarklet. To do it yourself would involve those steps. Letting the bookmarklet do it for you saves you those steps.

Like bookmarks, bookmarklets can get cumbersome to keep organized, so take care in placing them where you can find them and consider creating folders for them, which may be added to the bookmark bar for drop down selections.

WordPress Press It Bookmarklet While there are thousands of bookmarklets out there, let’s focus on ones that will help you with WordPress, research and writing for the web, and related topics. Then we will look at user scripts, bookmarklets managed with Greasemonkey or Tampermonkey. While they are basically similar, user scripts require the code libraries and functionality of a userscript manager and go beyond the actions of bookmarklets.

The first and most powerful bookmarklet for WordPress was Press It. Added to your browser bookmarks, you’d select the text on a web page, click the bookmarklet, and it would generate a simplified version of the WordPress Post interface with the selected text in the awaiting post along with a link to the source, ready and waiting for you to add your words. With the ever-changing interface and improvements in WordPress, this was changed to the Press This bookmarklet.

To find the Press This bookmarklet in WordPress:

Go to WP-Admin > Tools > Available Tools and look for the Press This button.
Click and drag the bookmarklet to your bookmark bar
When viewing a web page you wish to write about and share with your readers, you may either click the bookmarklet or highlight text on the web page you wish to quote or reference and then click the bookmarklet.
- If you selected text on the page, it comes into the post as plain text in a paragraph. Please select it and wrap a blockquote HTML tag around it or use the Quote Post Format to ensure the reader instantly knows these are not your words.
- Better yet, wrap it in a blockquote and include your own words explaining why you recommend this post and why these words were important to you above the post or below the citation link, incorporating the content into your site with your thoughts, not just theirs.
- Add categories and tags, and publish or Save as Draft and close.

The Press This bookmarklet is similar to the Reblog feature of WordPress.com. The reblog this is found when you are signed into WordPress.com on the main admin bar when visiting a WordPress.com site. There are pros and cons to reblogging and using the Press This bookmarklet without original content, as debated last year on The Daily Post.

Press This is the official bookmarklet for WordPress, but over the years they have been many more. Most WordPress-related bookmarks solved a problem with WordPress rather than enhanced the experience.

For example, if you have a reason for needing the post ID number in WordPress for designing custom WordPress Themes or Plugins, or for use in a WordPress Shortcode, it can be hard to find when all you see is the pretty permalinks and you don’t know where to look. WinkPress created two handy bookmarklets to quickly display the post ID and the default URL for the WordPress post, which might be considered an alternative shortlink as the pretty permalinks are much longer than http://lorelle.wordpress.com/?p=143598.

Change the Bookmarklet Name

Lorelle WordPress School Tips and Techniques Badge. Some bookmarklet names are long or not as specific as I need them to be such as “Sally’s Bookmarklet.”

To rename a bookmarklet, right click on the bookmarklet and choose Properties. Edit the name or the code as necessary.

With the changes in the WordPress interface, formerly called the Administration Panels, Admin Screens, Backend, Dashboard, and now WP-Admin, many are very frustrated with the new interface currently called New or Modern, and want the old Classic interface back. Enter some great bookmarklets and user scripts to help you. I’ll cover the user scripts later but if this annoys you, check out the bookmarklets section on how to get back to the classic editor.

One of the features I wish was built into the core of WordPress is the ability to search and replace through the content of a site. Yes, I can do this with a database search and replace on a self-hosted site, but why can’t I do a simple such search in WordPress. We all have those moments when we realize we’ve been misspelling a word, used the wrong word, or changed our site name or had someone we’ve blogged about change their site name and we need to replace it.

While we wait for WordPress to include such a feature I use the Replace Text In Page Bookmarklet. It replaces the text on a web page with a word of your choice. While this is amusing on published web pages, I use in in the Edit Post screen. Edit the post, click the bookmarklet, type in the word that needs replacing, then the next word to replace it, and go, and all the references are changed in my content. A quick check to ensure nothing else was changed, like the word in a URL, and I’ve just done a quick search and replace on my post. I update the post and go on. It isn’t a search and replace for the whole site but it fixes posts individually.

Useful Bookmarklets

The most important bookmarklet you should add to your browser right now is the Google+ Bookmarklet to Share to Google+. This will help you share great finds on WordPress and WordPress news with our WordPress School Google+ Community.

Want to translate a web page? While we are waiting for the browsers to catch up with instant translations, Google has a list of bookmarklets called the Translation Browser Buttons. Click and drag the language you speak into your bookmark bar. Visit a web page not in your language, or the language you wish it translated into, click the button or select the phrase or section you wish translated and click. It loads the web page into Google Translate.

Hongkiat has a huge list of URL shortening services for the major short link services including TinyURL and Bit.ly. While you may not wish to use short links in your WordPress post links, it is handy for social media sharing.

Many social media services offer bookmarklets, or fans have created them, that help you share the web page you are on to Twitter, Facebook, Pinterest, etc., with just a simple click. Check their settings or options pages or do a quick search.

Web2PDF is a powerful and popular bookmarklet that allows conversion of web pages to PDF files. This is handy for preserving web pages as well as using them for educational materials or for saving your own site’s most popular posts as PDF files for portfolios.

Not all websites were designed for print. PrintWhatYouLike Bookmarklet allows you to select the area on the web page you wish to print, not the whole thing including those terrible adds and all those comments. You can choose to show or hide the background, images, and margins to make the web page the way you wish it to be when you hit print. You can even adjust the font size for printing in a larger or smaller font.

There are several bookmarklets for checking copyright violations and plagiarism:

Web Design and Development Bookmarklets

There are so many bookmarklets available to help with web design and development, I’ve lost count over the years. Some of these I’ve been using for many years as web browsers and web publishing has changed, and these still serve.

I often need to lookup the site owner of a website. Not to find out who owns a website but to find out who the web host and domain registrar of a client’s site. Some just don’t know the name of the host and registrar even though they pay the bills annually. I use Ben Collier’s Whois Lookup Browser Bookmarklet on a regular basis saving me a few steps.

Allan Jardine of SpryMedia created a Design bookmarklet that combines a grid, ruler, unit measurement, and crosshairs tools for web development. This has saved me when it comes to sizing things, much like Webciv’s tools and resources bookmarklets with Xray and MRI, layout grid bookmarklet by Andy Budd still works to add a pixel grid on any web page to estimate container and visual widths, Favelets For The W3C Markup Validation Service (Favelet was the term for bookmarklet in Internet Explorer) to test your web page code, Responsive Design bookmarklet by Benjamin Keen allows viewing of any web page in multiple screen sizes easily, and the list goes on and on.

The slayeroffice Favelet Suite is one I’ve used for many years as well for site testing and development. Aardvark Web Dev Bookmarklet is another one that has saved me over the years as it displays the HTML and CSS ID and Classes of the containers as you move your mouse over the web page.

Lifehack offers 20 bookmarklets including the password generator bookmarklet to help you create a password that mixes the name of the site with a word of your choosing that’s been encrypted to create a fairly secure password you can use each time you visit that site, a password viewer bookmarklet that allows you to see what lies behind the ****** in the password box in case you (or a client) forgot, a currency converter bookmarklet that I use to ensure I give both US and EU prices on things I’m talking about for my international readers, easily get Amazon Affiliate links and ASIN numbers, and the list goes on and on.

One of the most extensive lists of bookmarklets comes from Hongkiat with over 100 bookmarklets covering a wide range of subjects from sharing to web development. Click the bookmarklet title in the list at the top of the post and jump down to the information on the bookmarklet, then click and drag them into your bookmarks bar or a folder to experiment with them. I recommend putting them into a bookmark folder to keep track of them and sort them into specific and related actions.

Another incredible collection focuses on SEO with “69 Amazing SEO Bookmarklets to SuperCharge Your Internet Marketing.” I’ve found many of these are helpful for website testing and development, not just SEO and marketing tests of your site, especially the OnPage Checks. Check out the “Generate a Link with Anchor Text for the Current Page” in their list to quickly create an HTML Anchor Text link to use in the WordPress Text Editor for fast and properly formed HTML links.

Anyone can create a simple bookmarklet. Check out Treehouse Blog’s on how to create bookmarklets and Tuts+ Code Tutorial.

Other bookmarklet collections include:

Please note that some of these continue to work in modern browsers, and some have stopped working. Some are only for Firefox, Chrome, or another web browser, though most new ones are cross-scripted to work on all browsers. Be sure to reload the web page and test again.

Browser Userscripts

Browser userscripts/user scripts are similar to bookmarklets, however they aren’t traditionally found in your bookmarks manager or bar, though they might be. They rely upon JavaScript, much like the bookmarklets, but go even further by modifying the appearance or behavior of the web browser including how it displays the web content and how you may interact with it. While bookmarklets may do the same, user scripts are managed by script managers, extensions to the browser, tapping into the script manager’s library code for programming code and functions.

To use these, you need to begin by installing the script manager extension or add-on. For Firefox, install Greasemonkey for Firefox. For Chrome, install Tampermonkey. The scripts you add will work with both managers if the script has been coded to cross-browser specifications.

Most of the user scripts do not have links or buttons to push, though some do. For the most part, they act in the background, triggered by visiting a web page that requires their assistance. For example, if you are using a Google search userscript, it will only activate when you are on a Google search web page. If you are using a Feedly userscript, it activates when you are on Feedly. Same with WordPress. Only WordPress-specific user scripts triggered when logged into WordPress or viewing a specific WordPress screen or panel.

There are literally thousands of browser user scripts available, though many are no longer supported. They come and go over the years, but those who use them regularly come to depend upon many of these for their powerful functionality.

Like bookmarklets, the browser user scripts created for WordPress were done so to solve problems.

In 2006 I wrote about the number one flaw in WordPress identifying the comments. To reply to a comment, you’d open the post in a new tab or window, scroll down to the comment box, reread the comment because you forgot what they said, and write your reply, hit submit, close the tab or window and search for where you were on the WordPress Comment Panel again. My buddy, Engtech, came up with a Greasemonkey WordPress Comment Ninja to add an inline reply form to the WordPress Comments Screen. Instantly I could reply to a comment without all the rigmarole of page loads. Not long thereafter, WordPress incorporated the same technique into WordPress core.

In 2007, Akismet, the comment spam tool by Automattic, was still new and too many of us spent too much time scanning through massive and disgusting comments in the comment spam queue. Spammers didn’t just spam our sites, they spam-blasted our sites with dozens to hundreds of the exact same spam comment, determined something had to get through the spam filters. We’d scroll for hours through these, page after page after page of spam.

Engtech again came up with a Greasemonkey user script solution with “Akismet Auntie Spam Page Viewing Script. It sorted through all the comment spam on the web page and condensed all the redundant spam into a single line, shrinking down hundreds of spam comments in seconds on the web page. For a couple of years, I couldn’t live without it, until I finally came to trust Akismet and stayed away from the spam queue, a cesspool guaranteed to bring on depression.

During the heyday of Google Reader, it became not only my favorite way of tracking sites that inspired my blog posts and writing research, it became my method of interactivity with my fellow top bloggers. Also one of my greatest frustrations at the time. To comment on a post found within Google Reader, I’d have to open their web page post in a new tab and switch to it, wait for it to finish loading, then scroll down to the comment box and leave my comment, hoping that I hadn’t lost my train of thought by the time I got there, similar to WordPress Comments. Someone had the same issue and created the Google Reader Preview Greasemonkey Script that added a preview link to the reader. Click it and the post would be loaded into Google Reader for commenting. Saved! Now that Google Reader is gone and replaced in my heart by Feedly, I’d love the same script to work there…still waiting…hint hint.

See the power in these user scripts?

The Death of UserScripts.org

Lorelle WordPress School Tips and Techniques Badge. Many fans of user scripts and UserScripts.org were heartbroken when the site developers and owners let it die a couple years ago. There is a mirror site that is only half-functioning, and attempts to create new repositories and directories for userscripts. I’ve listed these in a section below. There is even a userscript to redirect your attempts to access the old site and redirects you to the mirror site called USO to USMO. Love the user script community!

See how these user scripts serve a specific purpose. These were the right scripts at the right time and need. They are no longer necessary as WordPress has improved, Askimet is now trusted, and Google Reader is gone.

That doesn’t mean you won’t find a great userscript for your specific needs. Here are a few that I’ve found useful specific to WordPress.

WordPress.com edit post redirects

WordPress.com classic stats redirects you to the old stats page away from the new version
WordPress web developer? If you use Github for your WordPress Plugin or Theme, there is a user script to reference the ticket number in the browser tab to help you track issues.
Hang out and help out on the WordPress.org forums? Kessie Meijer created WordPress-moderator-tools for the Firefox and Chrome to make the process easier. Not for the timid and specifically for WordPress.org forum moderators.

More Browser User Scripts

Has a Toolbar Taken Over Your Browser?

Lorelle WordPress School Tips and Techniques Badge. I find many student and client web browsers have been taken over by unwanted and undesirable toolbars. These toolbars are often added by the computer manufacturer or software programs that use these as advertising income. Most of these browser toolbars are problematic because:

They take over your browser menu space, consuming valuable viewing space with little to offer in return
They encourage/force you to use their affiliate search engines and tools, receiving income for the usage
The toolbars track your online usage and sell that data, and by adding the toolbar, you may have unwittingly given up certain privacy rights to that data
Some toolbars are actually malicious adware or malware and should be removed immediately to protect your computer, files, and data

Search the web for “how to remove toolbar from” and add the name of your web browser, or use the guides from Malware Tips.

The following are other user scripts that you might find helpful.

Remove Google redirects and show cached links with Direct Google, making it easier to copy links from Google search results
Download YouTube Videos as MP4 – While I do not condone copyright infringement, this userscript has proved invaluable for presenting videos as educational material during presentations, especially when I’m presenting with limited or no Internet access, and viewing when offline. There are several of these including Keep Tube.
Improve your YouTube experience with many user scripts such as YouTube Auto Buffer & Auto HD to buffer a video without autoplaying, YousableTubeFix removes ads and unwanted sections and prevents autoplay and autobuffering, and YouTube Center adds more fun functionality.
Using Google Image Search? Search By Image (English) improves the image search process on Google.
Flickr Original Link displays the direct links to the flickr image sizes available for that image. FlickrBlogThis generates the HTML code to copy and paste the image into your WordPress text editor.
Restore the right click on web pages that disable it with some foolish notion that it will prevent copyright infringement of their images with Enable Right Click. Disabling right click removes many other right click options, including opening links from that web page into new tabs and linking to the site.
View the password under the dots or **** with the bookmarklets mentioned earlier or use Show Password onMouseOver userscript to display the password on a mouse hover, reminding you of the password you saved on your browser and didn’t write down. Write it down now.
Have multiple Google Logins? Google Multiple Account Login is designed to change the traditional Google sign off button with a drop down menu to allow you to switch between accounts easily.
Fan of Feedly? Lifehacker has a list of user scripts to improve your experience. Other Feedly scripts include Colorful Listviews, Feedly Full Feed, and many more.
Ever comment on a blog or forum and hit submit only to get an error. The back button may not display your comment and it is gone forever. Worse yet, when you fill out a form and hit submit and it doesn’t work and all that work is lost. Textarea Backup with expiry attempts to preserve the information entered in a textarea of a form. It isn’t perfect but it helps tremendously.
Pinterest is becoming a great resource for bookmarked web pages and information and the pinned results are showing up in search engines. Unfortunately, without logging in every time, Pinterest restricts what you can see. Pinterest without registration fixes that.
Dropbox users may enjoy Dropbox Plus and its improvements to the interface
Gmail and Google Calendar user? There are many user scripts to help including Gmail Addons, Google Calendar Minimal, googlePrivacy, and Google Black NavBar. Gmail keeps changing so they may not work or the developer is working on a fix.
You should know by now why it is wrong to force links to open in a new tab or window, and Ian Dunn created a script to prevent that. To use it, you will need to manually add it through your script manager.
Download Social Fixer for Facebookand FFixer clean up your Facebook experience.
Hate ads? There are many scripts that will disable most or all of the ads on the web pages you visit. They include Anti-Adblock Killer by Reek, Ads Skipper, AntiAdware, AdsFight!, Disable Text Ads, and so many more.
Love Craigslist? I’ve seen many bloggers write about their finds on Craigslist, and the Craigslist Fusion user script improves the viewing of each listing with image previews in a split panel on Craigslist.

These are some of the places and articles where you can find browser user scripts to enhance your own webby experience.

Greasy Fork
Webextender – the duplicate and replacement for Userscripts.org
Mirror Userscripts.org: Power-ups for your browser – The mirror site for Userscripts.org – still in development
Openusersjs.org
MonkeyGuts Userscripts
Coowon Forum – List of extensions and userscripts for Chrome.
A six-pack of useful Greasemonkey scripts – CNET
17 Greasemonkey Scripts to Turbocharge Your Browser | PCWorld
15 Fantastic Greasemonkey Scripts for Better Browsing « Web.AppStorm
Best Greasemonkey ‘scripts’ for power users. Download from ‘userscripts.org’ or Create your own ! | Cappredia
Best Free GreaseMonkey/Browser Scripts
User scripts News Category on Lifehacker

For information on how to write your own Greasemonkey user scripts, see Greasemonkey Tutorial for Beginners.

Assignment

Lorelle's WordPress School Assignment Badge. Your assignment is to experiment with these bookmarklets and user scripts. Install Greasemonkey and/or Tampermonkey and see if any of these help improve your browser experience.

As mentioned, there are thousands of bookmarklets and user scripts on the web. There might be one that serve your specific needs or be useful in your industry on the web. If you find one, blog about it on your test site, helping others learn about it and share the link below or in our G+ community.

Join us in our discussions on this assignment in our WordPress School Google+ Community and show us how you use your web browser, bookmarks, bookmarklets, and user scripts to blog better. Join us for our discussion on this topic on Assignment: Browser Bookmarklets and User Scripts.

This is a tutorial from Lorelle’s WordPress School. For more information, and to join this free, year-long, online WordPress School, see: