Bookmark This!

Posted on

By Michael Fields

Earlier today I posted that I was thinking about creating a Chrome extension which would allow me to easily add new sites to my bookmarks section. My friend Devin responded asking if I knew about the Press This functionality. Although I was in fact aware of Press This, I had to admit that I’ve never actually used it before so I gave it a try. While I was quite impressed with what it did, it did not really do what I needed.

How Press This Works

If you log into WordPress and navigate to Settings -> Writing you will find a heading for “Press This” which instructs you to drag a link into the bookmarks bar in your browser. What you are bookmarking is not really a link but a small javascript application known as a bookmarklet. You can now navigate to any webpage and when you click your Press This bookmarklet a popup window will open which displays a form allowing you to publish a post about the page. What impressed me here is that certain fields are already filled out:

  1. The title tag of the html document is inserted as the value of the post title.
  2. If any text was selected, it is inserted into the content box
  3. A link to the document is appended to the content box.

What I Need to Do

  1. I need to create a bookmark and not a post.
  2. I need to automatically set the title.
  3. I need all custom taxonomies to display.
  4. I need to set the name and value of a custom field.

On my site I have one custom post_type registered (mfields_bookmark) which I use to archive interesting articles about web development that I have read. Unfortunately, Press This only seems to enable you to create “posts”. My initial idea was to create a custom popup window by copying the code from press-this.php into a custom function which would be triggered via admin-ajax.php. Seemed like a good idea, but it also sounded like a lot of work! After thinking about it, I really didn’t need the popup window, I would be happy if my bookmarklet just opened post-new.php in a new tab. So I started hacking post-new.php's query string to see if the post form would recognize any values… And it did!

Post Title

The post title can be injected by setting a value to post_title. Something Like this works rather well: /wp-admin/post-new.php?post_title=TITLE

Although, I will not need to set the content here, I found that it can easily be set in much the same way: /wp-admin/post-new.php?content=CONTENT

Custom Field

I only need one custom field to be defined for a bookmark post to function properly. I couldn’t find any hooks that I could use in core so I decided to try a bit of javascript. I came up with the following code which I added to my theme’s functions.php file:

add_action( 'admin_head-post-new.php', 'mfields_process_bookmark_bookmarklet' );

function mfields_process_bookmark_bookmarklet() {
	global $post;
	if ( isset( $post->post_type ) && 'mfields_bookmark' === $post->post_type && isset( $_GET['mfields_bookmark_url'] ) ) {
		$url = esc_url( $_GET['mfields_bookmark_url'] );
		print <<< EOF
		<script type="text/javascript">
		jQuery( document ).ready( function ( $ ) {
			$( '#metakeyselect' ).val( 'resource_url' );
			$( '#metavalue' ).text( '{$url}' );
		} );

This function will fire during the admin_head action on post-new.php for the mfields_bookmark post_type. If mfields_bookmark_url is defined in the query string, the function will automatically select it as the name from the select box. Likewise, the value of mfields_bookmark_url will be used as the value of the custom field.

Creating the Bookmarklet

Now that WordPress has been configured to recognize this custom information, I needed to create an easy way of sending it. I copied the Press This javascript and reworked it to talk to post-new.php.

		var title = encodeURIComponent( document.title ),
		bookmark = encodeURIComponent( document.location.href ),
		url = '' + bookmark + '&post_title=' + title;;

Basically when you call this function, it will open post-new.php in a new tab sending the title and url of the document you were just viewing as well as setting the value of post_type to mfields_bookmark.

Adding this code to your browser is simple. In Chrome you can right-click the bookmarks toolbar and select Add Page…. Type “Bookmark This” as the name and use the javascript as the url. It might be a good idea to have the script on one line like this:

javascript:(function(){ var title = encodeURIComponent( document.title ), bookmark = encodeURIComponent( document.location.href ), url = '' + bookmark + '&post_title=' + title;; })();

I hope that someone out there finds this useful. I’m pretty excited about it as it will really cut down the steps involved in posting bookmarks on my site.

2 Comments Comments are closed

  1. scribu December 14, 2010 at 3:50 pm
Fork me on GitHub