Create a User Link Feed Bookmarklet

Many design and tutorial sites out there have a user submitted links section or community links page in which users can submit their links and have them featured on the site in question. I thought it would be handy to provide users with a bookmarklet that would auto-fill the information into the form making it easier for users to submit these links.

What I wanted to achieve here is to grab the url and any highlighted text from the page to be submitted and pass the info along to the form that is used to submit the site links, we can do that with a JavaScript function inside a bookmark relatively easily.

Creating The Pass Along Function

javascript:(function(){if(window.getSelection){t=window.getSelection();}else%20if(document.getSelection){t=document.getSelection();}else%20if(document.selection){t=document.selection.createRange().text;};location.href='http://www.vagrantradio.com/user-submitted?&u='+encodeURIComponent(location.href)+'&t='+t;})();

What this does is creates and passes along variables for highlighted text "t" and the url "u" in the browser address window. If you paste this code into the properties section of a bookmark, name it user link feed and save it, when you highlight the title of a page you would like to submit for a link and click the bookmarklet you should get this:

http://www.vagrantradio.com/user-submitted?u=http%3A%2F%2Fwww.vagrantradio.com%2F2009%2F12%2Fstupid-jquery-tricks.html&t=Stupid%20jQuery%20Tricks

Accepting Variables In Your Form

Now that we have the information from the page we would like to submit for our link feed passed along in the url, we have to make the form read this information and insert it as a value into the form input fields. For the Community News section here, I am using the FV Community News plugin, but this can be extended to work no matter what if your form uses php.

Open your form page and look for the input fields that hold the values for title and the url of your submitted links. In my case it would look like this:

The Default Form Fields

value="<?php echo fvCommunityNewsGetValue('fvCommunityNewsTitle') ?>"
value="<?php echo fvCommunityNewsGetValue('fvCommunityNewsLocation') ?>"

Now that we have the input fields we need, it's time to edit the value attribute to check for variables or just do nothing if they aren't present. For each input change the values to check our "t" variable, which was the highlighted text and our "u" variable which was the url of the site.

The Edited Form Fields

value="<?php if (!isset($_GET['t'])) {echo fvCommunityNewsGetValue('fvCommunityNewsTitle');} else {$t = $_GET['t']; echo $t;}?>"
value="<?php if (!isset($_GET['u'])) {echo fvCommunityNewsGetValue('fvCommunityNewsLocation');} else {$u = $_GET['u']; echo $u;}?>"

Test It Out

Now that our form is accepting variables we are passing in the url it's time to give it a test. Go to the page you wish to submit and highlight any text or title or the page and click the bookmarklet, you should get the url and the highlighted text as values in your form.

If you follow the above steps you'll easily have another tool to enable users to easily contribute to your site. As much as I would like to accept links from your users, don't forget to change the url in the bookmarklet code to your own site and offer a link in a highly visible place.

Below is a sample that you can drag to your bookmarks and contribute to the Community Links on this site or customize and share with your readers.

The Bookmarklet

Drag this to your bookmarks toolbar or save it in your bookmarks.

VagrantRadio Community Links