Search and Share

What does Search & Share do?

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.

Update: The script has been updated to be jquery 1.4 compatible.

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

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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

  1. Upload the unzipped folder to your server. If you’re installing the WordPress plugin, you can go into your admin panel and search for “search and share”, or download the plugin from here and upload it to wp-content/plugins/ (… but don’t forget to activate the plugin). Otherwise, upload the files to the root public directory of your site (on many servers, this is public_html).
  2. Open 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 local computer instead of a server.Note: If readme.html doesn’t work on your server, contact me via: http://www.latentmotion.com/search-and-share/
  3. 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 any/all your web pages. Make sure that the paths to your files are correct. To trouble shoot, the easiest thing is to add http://www.yoursite.com/ to the beginning of each path reference You can also try copying the code from the box below:
  4. Next, 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 the code from below:
    <ul id='copyMenu'>
          <li id='copyLink' class='c1 keep' style='width:120px; height:25px;'><span>Copy / Paste</span></li>
          <li id='wiki' class='short' title='http://en.wikipedia.org/wiki/w/index.php?search=[text]'><span>Wikipedia</span></li>
          <li id='google' class='short' title='http://www.google.com/cse?cx=partner-pub-7740231133366464:8kogvuvjbok&ie=ISO-8859-1&q=[text]'><span>Google</span></li>
          <li id='wolfram' class='short' title='http://www.wolframalpha.com/input/?i=[text]'><span>Facts</span></li>
          <li id='amazon' class='short' title='http://www.amazon.com/gp/redirect.html?ie=UTF8&location=http%3A%2F%2Fwww.amazon.com%2Fs%3Fie%3DUTF8%26x%3D0%26ref%255F%3Dnb%255Fss%255Fgw%26y%3D0%26field-keywords%3D[text]%26url%3Dsearch-alias%253Daps&tag=latemoti-20&linkCode=ur2&camp=1789&creative=390957[pop]'><span>Amazon</span></li>
          <li id='ebay' class='short' title='http://shop.ebay.com/items/?_nkw=[text][pop]'><span>eBay</span></li>
          <li id='outlook' class='long' title='mailto:?subject=Check this out:[title]%22&body=[text]%22...%0D%0D-- [url]'><span>Outlook</span></li>
          <li id='gmail' class='long' title='https://mail.google.com/mail/?fs=1&view=cm&shva=1&su=Check this out:%22[title]%22&body=%22[text]...%0D%0D-- [url][pop]'><span>Gmail</span></li>
          <li id='yahoo' class='long' title='http://compose.mail.yahoo.com/?Subject=[title]&body=[text]... -- [url][pop]'><span>Y! Mail</span></li>
          <li id='twitter' class='long' title='http://bit.ly/?url=[url]&keyword=&s=[text]...[pop]'><span>Twitter</span></li>
          <!-- Please leave credit, I worked hard on this =) -->
          <li id='credits' class='keep'><a href='http://www.latentmotion.com/' id='credit' name='credit'>Search &amp; Share</a></li>
        </ul>
    
  5. 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 &amp; 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).
  • Cheers Alexander Farkas for the BG Position plugin, which enabled me to slide the body background down to match the moved content position.
  • 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
  • To the many sources of inspiration for this script, including the NYTimes for their failed attempt at a dictionary lookup tool, and Politico for their wildly successful copy to clipboard hijacker. After writing the code, I’ve also (finally?) noticed IE7+’s accelerators, and Firefox’s “search with google” option below copy. Due to these references, I get the feeling we’re on to something.
  • Digg
  • Sphinn
  • del.icio.us
  • RSS