Search and Share makes highlighting text a more functional action. More specifically, it attempts to understand the intention of a user's text selection and present a variety of options accordingly. The criteria for understanding the intention is the character length of the selection, and the interpreted actions are copying, searching and sharing.
To see the script in action, try highlighting any text on this page. If you select a lot of text, click copy and paste it somewhere. If you want to select only a word of phrase, here are some search-worthy examples:
Wiki: Machiavelli
Google: World Trade Center, NY
Facts (Wolfram): Hamburgers
Amazon: 1984 by George Orwell
Ebay: XBOX 360
Reasons to Use It
Get credit for your content. Whenever someone selects more than 40 characters from your web page and clicks the "Copy" link, your page title and URL will be included in the footer of the copied text. No longer will excerpts of your paragraphs float around AIM, or other places on the web, without attribution.
Improve word of mouth. Or word of email anyway. Just like the copy functionality, your users will also be presented with the option to directly embed the excerpt in a newly composed email within Outlook, Gmail or Yahoo Mail.
Go new-media viral. Make it easier for people to tweet about you. If you've got a younger audience, this twitter option will be a mass-promotion alternative to the more direct but confined email.
Provide context. Odds are, if you're writing anything worth reading about, a large chunk of your audience will want more details on the content they're unfamiliar with. With this script, they can get the biography of an unfamiliar politician, Google search results for related pages, or the set of fast-facts that Wolfram Alpha is quickly becoming known to provide.
Keep visitors longer. All of the aforementioned actions can be done while keeping your page open. As a result, your visitors will stay on your page longer, and unsurprisingly, they will also be more likely to continue to another page within your site. Plus, (if you'll allow my speculation...) as search engines use visitor retention metrics more and more to determine a site's value, it seems likely that you'll be positioning yourself to benefit with new search traffic too.
How to Implement It
Upload this file and th css, images, and js folders to your server (any directory is fine).
Open this file, readme.html, in a browser. Confirm that, before changing anything, you can trigger the script by selecting text. Do not attempt to test this file locally. The script depends on flash, which may behave erratically if run from your computer. Note:
If readme.html doesn't work on your server, post in the comments at: http://www.latentmotion.com/search-and-share/ . Either I, or one of our visitors will help you there. Do not contact me directly, as someone else with the same problem will not see and benefit from our troubleshooting.
Now that we know the script is working, copy the javascript and css files from the header of readme.html and paste them into the header of your web page. You can also try copying the code from the box below, but in either case make sure to update the file paths. If you don't know what I'm talking about, the simplest thing to do is add "http://www.yoursite.com/wherever-the-folder-is/ before the " js/ " and " css/ " below:
Copy the html of "copyMenu" into your page. Be sure to keep the link "Search and Share" that goes to this page, as removing is both illegal and will make the script break. You can also copy it from below:
Do a dance, you're done!
How to Modify It
You can feel free to add, remove, or re-order List Items in the html to easily modify the script.
If you add an <LI>, make sure you give it a class "long", "short" or "keep".
Long means that it will match text length defined in the javascript file, which is a default of 40 chars +.
Short means that it will match anything 4 - 39 chars, also defined in the javascript file.
Keep means that it will be present in any menu box selection that is triggered.
Also be sure to give your LI a title attribute of your URL, including some optional variables. Those variables are:
[text] : The text selection of the user.
[url] : The URL of the current page.
[title] : The title of the current page.
[pop] : Whether or not the link should open in a new window.
Class "ampSwitch" in the copyMenu will automatically convert & into & during the title to URL process. This was done for W3C validation.
Class "pageSlide" in the copyMenu will slide the content of the page down with the iframe search (google etc). The slide computations can behave poorly with background images, so if you're having a problem, simply remove this class and revert to a more basic mode.
If you are adding a completely new link option, be sure to use an appropriate icon. All of the icons currently used are pulled from the same file, "icons.gif", which I recommend you add to the bottom of. Which icon gets used from this file depends on the css background positioning, which you'll find around line 13 of SearchAndShare.css.
Note that by default, this script includes my own affiliate ids. If you use and appreciate this script, the nice thing to do would be to leave them there. If you can't stand the idea of me making a few bucks off your traffic, consider donating to my script-writing-fund. On the other hand, if you saw me jay-walking and simply can't stand people who flout such critical traffic laws, do feel free to exact revenge by sticking it to me. Just leave the credit link in, otherwise you'll be breaking the law too.
Future Plans for the Script
Refactor the code and separate functionalities as independent jQuery plugin functions.
Make the iframe resizable
Allow for (tabbed?) reselection of the engine used to lookup the term.
For WordPress Plugin version:
Integrate bitly, or another minification library to abbreviate the URLs (especially for twitter).
Retain selection information based on URLs, such that the text could be highlighted and anchor-linked to directly (maybe using scrollto?).
Consider metrics other than character length to determine intent.
For example, a long and obscure enough word, if selected by itself, may be a good candidate to directly and immediately slide down a wiki page.
Or, numerical input separated by mathematical symbols, on the other hand, may indicate a good wolfram alpha search.
Or, perhaps it should be a website specific implementation option.
Code a menu for a non-textual selection.
For example, highlighting or right clicking on an image seems to again indicate the intention to create a copy of it. Just as crediting excerpts of text is important, ensuring credit in an image selection is important.
Integrate google analytics tracking for selected text.
Supported Browsers (known)
IE7, IE8
IE6 (Although the fixed iframe becomes absolutely positioned at the top of the page)
Firefox 3.x (Anyone out there want to report on Firefox 2.x?)
Chrome 1.x, Chrome 2.x
Safari 2.x, Safari 3.x
Extra Credit and Kudos
Thanks to J Huckaby for Zero Clipboard, the script that circumvents browser limitations on copying things into your clipboard (via a flash object).
Biggups to Peter-Paul Koch at Quirks Mode for a consistently insightful resource. Specifically, his article on text selection manipulation was of great use to this project.
A deep bow to John Resig for giving birth to jQuery.
A wave to my people at MIT HyperStudio who've helped me grow as a developer