How To Bulk Generate Flickr Embed Codes For All Individual Photos In An Album
Use-case: Let's say you uploaded 30 photos to Flickr with the intention of posting most or all of them on a blog or website. In order to get all the individual embed codes for those photos, you'd have to click on each individual photo, click share, click embed, click to copy, click to paste elsewhere, click the back button and begin the process again. That's at least 180 clicks plus whatever other time and energy involved. A very tedious and frankly stupid workflow.
The solution I present below basically automates the entire thing with only a handful of clicks and a minute or two of time to complete. I haven't done a side-by-side comparison yet, but 'd wager that if you have ~5 or more photos to generate codes for, it would be faster and easier to use this embed code generator, maybe not the first time you learn to set this up, but definitely faster for all subsequent times you need bulk embed codes generated. So the ideal use-case for this method is for bulk operations, as the title of this article implies. And for bulk operations, this saves significant time and effort.
Most of the credit goes to an article on "idratherbewriting.com" called "Retrieve a gallery using the Flickr API" which outlines the steps necessary to generate direct links to gallery photos for use in a webpage using jquery. But their solution didn't work for me because they used a gallery as the source and because their output was merely direct image links. I'm not really sure what the point of their article even was or what purpose it would serve as it was written. BUT it was a great starting point. I got it to generate the actual embed codes for a gallery but couldn't get it to work on an album. A helpful support forum user got me the rest of the way there.
AND IT WORKS PERFECTLY.
Check out my demo here: https://sublunarphotography.blogspot.com/p/flickr-bulk-embed-code-generator.html.
All you need is your Flickr API key and the ability to copy and paste. Option 1: You can use the code as-is on your own site/blog/whatever, replacing only a couple of pieces of text. jk! Don't use the code directly on your site because it can expose your API key. It does work, but you don't want to do that because your API key can be abused.
Essentially, you will make an HTML file on your computer to generate your embed codes which you can then copy and paste to your site as desired. To do so, simply: Open a text editor, paste in the code below (everything from the opening <html> tag to, and including, the closing </html> tag) with the appropriate lines of text changed (as instructed below) and then save as a ".html" file. Double click on the html file, verify that it looks good, then use the "inspect" tool to view the source (which has the newly rendered Flickr embed codes) and copy + paste these embed codes to your site/blog/whatever. The easiest way is to view the source code with the inspect tool in Firefox, find the div which contains the embed codes and choose "Copy > Outer HTML".
FULL INSTRUCTIONS: The only things you actually NEED to change for this to work are: the API-KEY-GOES-HERE text, YOURNAME and ALBUM-ID. Simply enter your own API key, name and album ID.
To start, replace the "API-KEY-GOES-HERE" text with your API key. If you don't have one, simply request an API key from flickr here: https://www.flickr.com/services/apps/create/apply/
Once you have your API key saved into your code, you just need your username and album ID. And once you have those, the only thing you need to change for it to work on all subsequent albums is those album's ID. To find your Flickr album ID, navigate to the album in your web browser, and look for the numerical ID at the end of the URL, after /albums/. For example, in the URL https://www.flickr.com/photos/USERNAME/albums/696969696969, the album ID is 696969696969. Then, obviously, replace "ALBUM-ID" text with your own album ID.
Replace "YOURNAME" with your flickr name as shown in the album URL just described.
DONE: Save your modified code as an HTML file as described above and that's it. For any other albums, all you'll have to change is the ALBUM-ID, reusing your API key and username.
This last part isn't necessary, but it will make it easier to tell where each photo's embed code is located. The embed codes are output into one long continuous string of code which is hard to read, as a human. To make it easier to work with, you can use Notepad ++ to insert line breaks (blank space) between each embed code by using the "Replace" tool (CTRL+H). So, using the HTML file method described above, you would copy+paste the generated code into Notepad++. Pull up the replace tool and in the "Find what:" field, enter "</script><a data-". In the "Replace with:" field, enter "</script>\n<a data-". The \n switch will put each individual embed code on a new line so you can more easily locate/rearrange them as needed. Piece of cake.
This is a huge discovery for myself but I imagine there's at least a handful of other Flickr users out there who could use this.
I now present the Bulk Embed Code Generator For Flickr Albums:
* * * * BELOW IS THE CODE FOR A COMPLETE HTML PAGE * * * *
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var settings = {
"url": "https://www.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=API-KEY-GOES-HERE&photoset_id=ALBUM-ID&format=json&nojsoncallback=1",
}
$.ajax(settings).done(function (data) {
console.log(data);
$.each( data.photoset.photo, function( i, gp ) {
var farmId = gp.farm;
var serverId = gp.server;
var id = gp.id;
var secret = gp.secret;
var title = gp.title;
console.log(farmId + ", " + serverId + ", " + id + ", " + secret+", "+title);
$("#sublunariscool").append('<a data-flickr-embed="true" href="https://www.flickr.com/photos/YOURNAME/' + id + '/in/album-ALBUM-ID" title=" ' + title + ' "><img src="https://live.staticflickr.com/' + serverId + '/' + id + '_' + secret + '_b.jpg" alt=" ' + title + ' "/></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"/>');
});
});
</script>
<div id="sublunariscool"/>
</body>
</html>
* * * *END OF HTML PAGE CODE * * * *
Posts
