Posts from August 2011

Updated January 6, 2012: Since writing this post, I have wrapped this functionality up into the QuickPost Bookmarklet module for Drupal 7.

There was only one thing I missed after switching from WordPress to Drupal: the "Press This" bookmarklet that's available on every WordPress site. I find that I post a lot less without it, just because it made it so simple to make a quick blog post about someting I had seen online: highlight some text, click the bookmarklet, add some comments, and post.

I've finally got around to replicating this in Drupal 7, using the Prepopulate module, and I'm posting this so that others can make use of it. I'll start with the most basic version, then show you how I customized mine, and explain some gotchas to watch out for.

What does it do?

A bookmarklet is a bookmark in your browser's bookmark bar that has a javascript: URL instead of a regular one. When you click on the bookmarklet described in this post, a new window is opened to the admin page to create a new blog post on your site. The title of the post will be pre-filled with the title of the page you were viewing. If you select text on the page, this will be used for the body of your new post. Both of these can be changed, of course: they are just used as a starter so that you can quickly write a blog post about the page or article you were reading.

The Basics

First off, install the Prepopulate module on your site. This post is about Drupal 7 - I'm using the 7.x-dev version and it's working well enough for my purposes.

In order to use the methods offered below, you'll need to create a bookmark and replace the URL with one of the codes below. If you're just skimming the text here and not reading the explanations, you'll probably run into problems because there are things you need to change (but then again, you probably won't read this sentence either).

The Prepopulate version

There's a section on bookmarklets in the USAGE.txt file that's included in the Prepopulate module. The module author offers this code:

javascript:u=document.location.href;t=document.title;s=window.getSelection();void(window.open(%22http://example.com/node/add/content-web-link?edit[title]=%22+escape(t)+'&edit[body_field][body]='+escape(s)+'&edit[field_url][0][value]='+escape(u),'_blank','width=1024,height=500,status=yes,resizable=yes,scrollbars=yes'));

To use this for your own site: you'll need to replace example.com with your own domain. You may also need to change node/add/content-web-link, replacing content-web-link with the name of your blog post content type.

I found that this version did not work for me: the name used for the body field (edit[body_field][body]) was not working on my site. I'm not sure, but this might be because I upgraded from Drupal 6. I had to use edit[body][und][0][value] instead, as you'll see below. If you use this version, you may need to make the same change.

My version

This is the URL I used for my Quick Post bookmarklet:

javascript: var siteURL='www.drupaldork.com', nodeType='post', d=document, w=window, e=w.getSelection, k=d.getSelection, x=d.selection, s=(e?e():(k)?k():(x?x.createRange().text:0)), l=d.location, e=encodeURIComponent, url='http://'+siteURL+'/node/add/'+nodeType+'?edit[title]='+e(d.title); if(s) { s='<blockquote>'+s+'</blockquote>'; s+='\n\nfrom <a href="'+l+'">'+d.title+'</a>'; url+='&edit[body][und][0][value]='+e(s);} a=function(){if(!w.open(url,'quickpost','toolbar=0,resizable=1,scrollbars=1,status=1,width=1024,height=570')) l.href=url;}; if (/Firefox/.test(navigator.userAgent)) setTimeout(a, 0); else a();void(0)

I actually took the code that WordPress uses for the Press This bookmarklet and re-purposed it for use with the Prepopulate module, then made some tweaks of my own:

• Put the site URL and node type in variables at the very beginning, so that they're easier to change.
• If any text on the page is selected, put it in a blockquote, and put a link back to the page at the bottom.

As noted in the previous section, the default name for the body field in Prepopulate, edit[body_field][body], did not work on my site, and I had to use edit[body][und][0][value].

To use this for your own site: Update the values of the siteURL and nodeType variables. You may also need to replace edit[body][und][0][value] with edit[body_field][body]. You can check this by selecting text on a page before clicking the bookmarklet: if the selected text does NOT appear in the body field, you probably need to use the other version.

Expanded Javascript

If you want to make some of your own customizations, here's the expanded version of the Javascript. Just make your changes, then remove all the comments and line breaks to make a minimized version that can be used for your bookmarklet.

javascript:
var siteURL='www.drupaldork.com',
nodeType='post',
d=document,
w=window,
e=w.getSelection,
k=d.getSelection,
x=d.selection,
s=(e?e():(k)?k():(x?x.createRange().text:0)),
l=d.location,
// All text from the page needs to be encoded in the URL
e=encodeURIComponent,
url='http://'+siteURL+'/node/add/'+nodeType+'?edit[title]='+e(d.title);
// If text was selected on the page, wrap it in a blockquote and add it to the URL
if(s) {
s='<blockquote>'+s+'</blockquote>';
s+='\n\nfrom <a href="'+l+'">'+d.title+'</a>';
url+='&edit[body][und][0][value]='+e(s);
}
a=function(){
if(!w.open(url,'quickpost','toolbar=0,resizable=1,scrollbars=1,status=1,width=1024,height=570'))
l.href=url;
};
if (/Firefox/.test(navigator.userAgent))
setTimeout(a, 0);
else
a();void(0)