vGrabber

[dmerchen]

Why?:
Some of you may have heard of http://www.churchmediadesign.tv, if not, I suggest you go check it out, it's a great resource.

Anyway, after receiving this via Twitter, "anyone know how to create a javascript bookmarklet?" I thought it might be an interesting new venture to learn some javascript since I don't really have any experience with it.

Thoughts:
I know this little toy has a limited usefulness, as not too many people need to regularly grab thumbnails from Vimeo videos, but hey, why not. Anyway, review it as you like, let me know what you think. I send the following to Brad upon finishing it this afternoon. Understand it's very basic and lacks some common conveniences, such as any way to close the pop-up after it's loaded... suggestions on how to make the window close would be gladly heard.


What it does:
1. Load an iframe via javascript.
2. Fetch the referring URL e.g., vimeo.com/9139405 or www.vimeo.com/9139405, we’ll use this to determine which video you’d like the thumb nail for.
3. Explode the URL into pieces so we can gather the information bits we need from it and place them into a PHP array.
The array looks like so:
[0] => http:
[1] =>
[2] => vimeo.com
[3] => 9139405

4. Use the array we just created to verify that it contains either vimeo.com, or www.vimeo.com, this helps limit the number of errors you’ll see if the tool is misused.
5. Assuming it’s an actual vimeo.com page, we then create a link to the XML file containing the thumbnail locations required. This is achieved using http://vimeo.com/api/v2/video/'.$vimeoID[3].'.xml', Where $vimeoID[3] is a piece of the array we exploded earlier. This is basically the unique identifier for the video, allowing us to find the XML required.
6. Upon verification, using http://vimeo.com/api/v2/video/9139405.xml as our feed, we can then send it to a curl SimpleXML function that will essentially explode the feed into an array.
7. Since everything is now broken down into a convenient array, we simply need to make a few print or echo calls, and dump the URL into some text boxes, or just as a string so they can be copied easily.

Bookmarklet Code:

javascript:(function(){var%20d=document,b=d.body,e=d.getElementById('ecomblum');if(e)e.parentNode.removeChild(e);e=d.createElement('div');e.id='ecomblum';e.innerHTML='Loading...';var%20st={color:'white',font:'normal%2014px%20Sans-Serif',padding:'2px',margin:'0',position:window.attachEvent?'absolute':'fixed',top:'4px',left:'4px',width:'600px',height:'600px',zindex:'100',textAlign:'left'};for(s%20in%20st)e.style[s]=st[s];b.appendChild(e);})()

Bookmarlet Installation

What You’ll need:
1. PHP supporting cURL/SimpleXML
2. Javascript Compatiable Browser
a. Mozilla Firefox 3.6 (no radius corners)
b. Safari 4
c. Chrome 4
d. Internet Explorer 8 (aesthetic differences)

What doesn’t work:
1. The box doesn’t play well with others… more specifically images which are positioned relative. This doesn’t hinder its function, it merely makes it look odd when scrolling down the page.
2. There is no way to close the box once it’s been placed there. (It does disappear when you load a new page.)


Closing Thoughts/Comments:
Is this something like what you had in mind? I’ve look around a bit to add a ‘copy’ button to make it a two click process, but didn’t find a great way yet. You’re welcome to spread this around if you like, though I’d love to hear your feedback on it first, as it runs off of a shared server. That being said, it’s really a lightweight script, using only 65kb of ram per request. Any thoughts, comments, or otherwise would be gladly heard.


I’ll leave you with a little eye candy.

Screenshots:


Application working as intended.



Screenshot showing relative position bug.