I am here again, only an hour after I originally posted about this great new tool to give you a tutorial I quickly wrapped up about using the SelectorGadget Bookmarklet Tool and JQuery to create a simple GreaseMonkey userscript.

SelectorGadget Background

SelectorGadget is a great new bookmarklet tool that you can use on any website to select html elements on the page dynamically! The real power of SelectorGadget is that is that it automatically selects similar elements! So as you select what you want and don’t want, it will work towards selecting the exact elements on the page you want, for example the titles of blog posts! (I’ll give a tutorial below)

The Official Description is (lifted from the official homepage)

“SelectorGadget is an open source bookmarklet that makes CSS selector generation and discovery on complicated sites a breeze. Just drag the bookmarklet to your bookmark bar, then go to any page and press it. A box will open in the bottom right of the website. Click on a page element that you would like your selector to match (it will turn green). SelectorGadget will then generate a minimal CSS selector for that element, and will highlight (yellow) everything that is matched by the selector.”

If you go to the SelectorGadget Homepage you can see a great tutorial video on the basics on using SelectorGadget, I’ll quickly run through the minimal installation process to save you click around until you want to do your additional research

How to Install SelectorGadget

1. Go to the SelectorGadget Homepage
2. Scroll to the bottom of the page and find the  link “Drag this link to your bookmark bar: SelectorGadget“
   note: you can drag the link above into your toolbar, but it is highly recommended you go to the official website to get the latest version.
3. Drag the link “SelectGadget” into your toolbar.
4. You should now see a link that looks like:
5. Your good to go!

Ok, now that you have the bookmarklet installed, lets take a look at a tutorial to get your started.

SelectorGadget + JQuery Tutorial to Create a GreaseMonkey Script

GreaseMonkey is a platform for installing little javascript applications to change the websites you view. GreaseMonkey can all links to download files located on a page, and can even pre-load information or load widget from other sites entirely!

If your curious about GreaseMonkey you can read about what it is here or just install the firefox plugin here

Tutorial Goal

In this tutorial we are going to add google search icons to each post listed on TechCrunch.com

The TechCrunch Improved View GreaseMonkey Tutorial

1. Browse to TechCrunch.com and Click on the SelectorGadget Bookmarklet

   You should see the SelectorGadget widget on your screen like so:

2. Now Click on the title of a news post, and you should see it turn green to indicate it’s been selected.

   You will also see yellow highlights on the screen, these are the elements that SelectorGadget’s engine believes you want to select also:

   

3. We only want the titles for this tutorial so lets hover over one of the highlighten areas and click to remove them.

   You’ll notice that it turns orange to show that it will be taken out of the SelectorGadget selection and the engine should re-adjust its auto-selection to meet your needs:

   

4. Now you should have only the titles selected!

   

5. Now you have a clean CSS Selector you can use.

   The SelectorGadget Widget now gives a very clean CSS Selector you can use in ANY of you applications, ours is:
   .excerpt_header a

   

   In my original post I explained some of the uses I could imagine for SelectorGadget, feel free to check those out now

6. This tutorials goal focused on the Widget itself, so I won’t go into ALOT of depth with the GreaseMonkey widget, but I’ll explain how this selector is used in a userscript

   I promised JQuery for this tutorial, so I am going to use the following simple integration I found here: http://internetducttape.com/2008/05/08/greasemonkey-ninja-jquery/

7. The Template for this Userscript can be found in: jquery-template.js

   The important section (and the only section we really need to change is):

   // All your GM code must be inside this function
   function letsJQuery() {

   // CODE GOES HERE

   }

8. Now lets grab the titles of the page using jquery:

   titles = $(’.excerpt_header a’);

9. Now that we have an array of the titles in JQuery, we can add a link!

   First we pull the text from the title of the news post, and then add a little google icon which links to the google search for that news post:

   $(titles).each(function(i) {
   title_text = $(this).attr(’innerHTML’);
   $(this).after(’<a style=”margin:5px;” target=”_blank” href=”http://google.com/search?q=’+title_text+’”><img src=”http://www.mindzilla.com/grabicon.cgi/google.png?uri=google.com&format=png” alt=”Search on Google.com” /></a>’);
   }

   (you’ll notice I use a webservice to grab google’s icon, I’m lazy and I think for this tutorial its fine, this script is not ment for production use)

10. Now, if you install this user script, you can see that it adds google links to all of the titles at TechCrunch.com!

11. You can install this tutorials userscript by browsing to: webserviceable.com/dev/techcrunch_improved_view.user.js

    You’ll know see little google icons on every post at techcrunch.com!

    

12. Oops! If you were following the tutorial exactly, you’ll have noticed that the script doens’t work on the post view.

    We can fix that in a snap! Simply repeat the steps above but on any of the post pages at TechCrunch.com, and you will be given a css selector for the title on post pages that looks like this:

    

13. Now we add this selector into our script in the exact same way we did before and we have a working script!

Ok, so thats it! Enjoy the tutorial, and leave any comments if you want some clarification. Be sure to checkout the final version of the userscript techcrunch_improved_view.user.js

as a round-up I’ll make a nice list of the technologies mentioned and the links to learn about them.

SelectorGadget

An innovating and intelligent HTML selecting engine for generating dynamic css selectors

• Homepage: http://www.selectorgadget.com
• Basic How to Video: http://www.selectorgadget.com
• Initial Post on Webserviceable.com – Overview, Ideas, Foreseeable Uses

JQuery

Very popular javascript framework

• Homepage: http://jquery.com
• Documentation: http://docs.jquery.com
• Direct Download: http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js&downloadBtn=
• JQuery on Google’s Ajaxlibs – http://code.google.com/apis/ajaxlibs/documentation/index.html#jquery
• GreaseMonkey and JQuery – http://internetducttape.com/2008/05/08/greasemonkey-ninja-jquery/

GreaseMonkey

A very cool javascript plugin engine for your browser that allows you to add functionality/information to any website.

• Homepage: http://diveintogreasemonkey.org/
• Blog: http://www.greasespot.net/
• Wiki: http://wiki.greasespot.net/Main_Page
• Direct Download: https://addons.mozilla.org/en-US/firefox/addon/748
• GreaseMonkey and JQuery: http://internetducttape.com/2008/05/08/greasemonkey-ninja-jquery/

No related posts.

I was doing some follow-up on my old posts (the 6 of them, heh) and I realized I didn’t post any good tutorials or resources for the drop.io post, I’ll organize them into languages and you can take it from there.

The resources after the fold

PHP Drop.io Libraries and Resources

• Slawcup’s PHP Library – This Drop.io API Wrapper for PHP was originally discovered through the drop.io google group I stumbled upon what looks to be the start of a decent php library for the drop.io API @ github.com/slawcup
• Simple PHP Snipplet for Drop.io File Uploading:
  via drop.io google group and spaghetti:
  
  Code

  <?php
   $apiKey = 'yourKey';
   $apiToken = 'yourToken';
   $apiDropName = 'yourDropName';
   $apiVersion = '1.0';
   $apiUploadURL = 'http://assets.drop.io/upload" name="#codesyntax1">;
   $file = '/path/to/file.ext';
   
   
  $curl = curl_init($apiUploadURL);
   curl_setopt ($curl, CURLOPT_POST, 1);
   curl_setopt ($curl, CURLOPT_RETURNTRANSFER, 1);
   curl_setopt ($curl, CURLOPT_POSTFIELDS, array (
   'version'=>"$apiVersion",
   'api_key'=>"$apiKey",
   'token'=>"$apiToken",
   'drop_name'=>"$apiDropName",
   'file'=>"@$file"));
   $response = curl_exec ($curl) or die ("there was a problem with the
   upload, please try again");
   curl_close ($curl);
  echo "File uploaded.";
  ?>

iPhone aka Objective-C Drop.io Libraries and Resources

• DropKit – Objective-C or iPhone Drop.io API Wrapper and Library via drop.io/DropKit

• Droppler - The first iPhone drop.io app!

Ruby Drop.io Libraries and Resources

• Drop.io Ruby Gem – I believe this is the official repository as I did read on the google group that drop.io dev team would be releasing a ruby library @ rubyforge.net

Other

• Drop.io Firefox Plugin
• Drop.io Example Applications! – drop.io api example applications.

No related posts.

While looking for various ways of integrating the last.fm api into my application I stumbled upon the very well developer PHP LastFM API also known as “lastfm_protocol” and from their documentation and organization you can see that its top notch.

The PHP LastFM Api seems to expose every method that the official last.fm api supports.

So I’ve written this lightweight wrapper for the library that allows you to expose the full functionality of matto1990’s library without touching it (allowing for updates to PHP LastFM Api to unaffect the CodeIgniter Library)

Note: I am releasing this without much support but please comment here and I’ll attend to all of your inquiries!
How to Install

• Download using the link below
• Extract the zip file on your computer
• Upload the files into the appropriate file structure (those of you comfortable with the “merge” upload, do so)
• User: $this->load->library(’CI_LastFmAPI’); in your code or add CI_LastFmAPI to your config/autoload.php
• Use the documentation for using the phplastfmapi

The Links

• ci-phplastfmapi Project Homepage
• Download ci-phplastfmapi
• matto1990’s phplastfmapi homepage

No related posts.

is an “open protocol to allow secure API authorization in a simple and standard method from desktop and web applications.”

What does OAuth really mean?

Well, lets break the above description down into some key phrases and the pieces should come together.

• a “protocol” is a standardized method for the communication of two computers. For instance HTTP is the standardized way of a webserver communicating with your computer when you browse a website.
• “open” comes from the fact that this protocol is open source and can be viewed, downloaded, and maintained by anyone who is willing to take up the torch.
• “secure API authorization” is the functionality that OAuth.net gives to its stakeholders – the ability for a developer to download OAuth.net and secure their API access without having to write a unique (and possibly bug filled) authentication!

Brief History of OAuth

With its draft and proposal process starting in April of 2006, and the first lines of code made available in Augest 2007, OAuth.net is young but has seen some massive uptake.

Originally draft to solve problems integrating OpenID with twitter.com (the microblogging site we all know and love), OAuth had google’s interest from the beginning when DeWitt Clinton from Google (a “corporate member” of the OpenID Foundation) got interested, “if only as a stakeholder”.

With its contributors looking to have every major language covered, OAuth should allow any developer to take advantage of the strength of open-source in their API Authentication process!

The Google Story and 15 Resources to Get Started with OAuth when you

Google and OAuth?!

A year after first commits to OAuths repository we can now see the real fruits of DeWitt’s interest as Google has officially announced a “Hybrid Protocol” that combines OpenID identity management with OAuth’s authorization process. Google looks to be taking OAuth and its existing OpenID integrations to the next level and whether we know it or not, google will be running OAuth in the background soon! Read up on OAuth and Google on OAuthGoog which looks to be headed up by Eric Sachs over at oauthgoog.blogspot.com.

Final Thoughts & Credits

I caught wind of OAuth through Yariv Adan on the Google Data APIs Blog via the almighty ProgrammableWeb, and I’m excited to see what happens next!

With sites like Digg.com, Yahoo.com, Google.com, and the fanboys of each pillar of internet glory supporting OpenID OAuth will be finding its home amoung the giants of industry and the movers of global information.

15 OAuth Resources for Programming & Learning!

Having friends like Google and an older-brother like OpenID has its advantages. Massive Interest. There are already guides and tutorials and resources popping up for integrating OAuth into your (web)application. I’ve collected a few of them below to get you off to the races.

OAuth Basic Information and Documentation

• Official “Getting Started” on oauth.net – basic overview
• OAuth Basic Introduction Slides on slideshare.net – A simple outline of how OAuth works outlined in slides.
• A Beginners Guide to OAuth – part 1 / part 2 on hueniverse.com – A comprehensive post about how OAuth works, a visual map, and a thorough walkthrough of OAuth

OAuth Testing & Examples

• OAuth Playground on googlecodesamples.com – Code examples of OAuth on virtually all of the Google Data APIs
• OAuth Test Server on term.ie – get testing!
• OAuth Sandbox on mediamatic.nl – a sandboxed OAuth Testing Environment

OAuth in Ruby

• An OAuth Ruby Gem on rubyforge.org – try it out! let me know in comments!
• The Start of an OAuth Ruby Gem on code.google.com – seems a little stale (last entry into repository is last jan 08) but might be worth a compile!
• Developing OAuth Clients in Ruby on stakeventures.com – a great tutorial for getting OAuth up and running in Ruby

OAuth in PHP and PHP Applications

• oauth-php on code.google.com – PHP library for OAuth consumers and servers. Complete with an extensible OAuth store, including a full working implementation of a MySQL store.
• OAuth Component for CakePHP on cakebaker.com – Looks to be the definitive OAuth Component for CakePHP
• OAuth Component for CakePHP Tutorial on cakebaker.com – How to get OAuth working with CakePHP
• OAuth for Zend Framework on zend.com- OAuth Library built with the Zend Framework (great for stand-alone use!)
• OAuth and Drupal Services API on sumitk.net – for the Popular PHP CMS (peusdo framework) Drupal

OAuth on the iPhone!

• OAuth on the iPhone on immike.net – !

OAuth Feeds & Sites

• http://twitter.com/oauth
• http://oauth.net
• http://blog.oauth.net

If you find any more sites or anything that I’ve missed please drop me a line in the comments and I’ll be sure to revise and give credit! Thanks!

No related posts.