cc licensed ( BY-SA ) flickr photo shared by cogdogblog
A few days ago I bemoaned, whinged, the changes at flickr that rendered my flickr cc attribution helper tool DOA.
At the mercy of third party providers who take a great service and just yank it away (ahem Google– Reader; ahem Twitter– posterous; the list goes on), one can just take the lumps like a victim. But I like to find the ways around it. I got code on my side.
Do you see that image above? I generated it with my brand new, mostly untested, flickr cc attribution helper as a browser bookmarklet.
The way my old scripts work had a weakness; the browser scripts depended on knowing the underlying structure of the flickr photo page, and then did some gyrations with XPATH/Javascript to decipher the photo information. So when the layout CSS changed, there went the scripts. I tried to make it work with the new flickr, but the code is more dynamic.
The thing about flickr is that while many people get lathered up abut the web interface, is power is that the underlying architecture is there for use via its API. That does not change, and it gives one access to the information in flickr. What it means is that you can make flickr do almost whatever you want, imagine, or can manage to bang out via code.
I use PHP libraries with pechaflickr and 5card flickr stories
I knew there are methods to access flickr information via a javascript only (calling for data in JSON format), meaning that I might be able to rig something that worked in the browser only, not via a web server. I spent a few hours just doing a basic info request with a hard wired flickr URL, and managed to get something that worked- pass it a flickr URL and I could get all the info to generate the attribution code, including which creative commons license a photo has attached to it.
Crude prototype for new flickr cc attribution helper will spawn via bookmarklet; using json for fetching photo info pic.twitter.com/NKqIGNO8ZA
— Alan Levine (@cogdog) March 28, 2014
It did it by putting the info in a pop up window, even got fancy by putting the image as a background on the window.
I tried to get it all working inside a bookmarklet, but could not get the jQuery to cooperate. So I had a new idea. The bookmark’s function is simply to get the ID for the flickr image; that is the part of a URL such as
https://www.flickr.com/photos/cogdog/13455811934/
which is 13455811934 — that is all I need to pass to the flickr photos.getInfo API. So my clever idea was to put all the code that does the work in an HTML/jquery page, and I could pass the flickr ID to it via a query parameter, e.g.
http://somewhere.web/attribution-tool.html?flickd=13455811934
And that’s what I have working now. But I did not want to depend on hanging this on my domain, and shoulder the traffic for everybody– I figured out how to get the code running on a github site associated with the code.
But creating the bookmarklet is also something I could make easier. So here it is… (drumroll) the flickr cc attribution helper maker
With this tool you create your own browser bookmarklet. Something I could add are some options, for the HTML code, so you can have other sizes than the 500px width image used (that’s what fits this blog, and I make tools for me first).
But all you need to do is drag the link on the blue button to your browser bookmarks bar. When viewing a flickr image, it will toss open a new small window with the one click attribution (pop up windows, bad, I know. Maybe I can figure out how to put a lightbox on the flickr page)
And there you go! Attribute away.
But wait, there is more! Maybe you do not like the way my code does attribution. Maybe you want the licenses spelled out. Maybe you want to put your own CSS classes on things. Just grab the cc-attributor source from the github repo.
You can modify it any way, and put on your own web site (heck I tested on my MacBookPro in the localhost web directory). And then you can still use my Bookmark Maker to generate the tool, just put your URL in the field instead of mine.
Now go attribute your flickr photos! Don’t be tool of flickr, make it a tool for you.
I should say that this is barely tested. Mileage will vary. I also got very confused with github’s tools for making pages, and tripped up 20 times in the branches.
Very cool that you kept cracking at this. Thanks so much. And I love bookmarklets actually, very easy to use, and thanks for hosting the code.
You should track it’s usage and get some sense of its adoption.
This is awesome, thanks for digging into this, Alan! You would be an incredibly dangerous man if you ever ventured to San Francisco and started talking to some VC people 🙂
Either that or do a Kickstart for “Uncle Alan’s Shade Tree Coder” venture. I’d support it 🙂
I used your old version of CC attribution helper all the time and was completely bummed when Flickr did their updates. Thank you for persisting. Thank you for generously sharing. Not only are you doing good for those of us who wish to cite sources, but you do right by the photographers. Thank you so much!
And thank you Mags for the kind words. More attribution makes the world better, kum-ba-yah!
Unfortunately not license conform! Link to the license may not lack.
I do not understand– you wish attribution to link directly to the license? The license belongs with the original, but if you want to create a different attribution text, you can create your own version that links the way you prefer
Read the legal code of each CC license e.g.
http://creativecommons.org/licenses/by/3.0/legalcode
“You must include a copy of, or the Uniform Resource Identifier (URI) for, this License with every copy of the Work You Distribute or Publicly Perform.”
This is absolutely clear and means: YOU CANNOT USE ANY CC-MEDIUM LEGALLY IF YOU DON’T LINK TO THE LICENSE.
Fair enough, I can provide a link to the license in the attribution output. thanks
The bookmarklet now generates a link to the appropriate license for the HTML attribution (it’s interesting that flickr still licenses to v2.0 of creative commons). No change needed on the user end.