How To Bulk Generate Individual Flickr Embed Codes For Entire Album
I have NO IDEA why Flickr has never made this easier on its users. This is, in fact, the reason I never seriously used Flickr as my image hosting solution. They made it SO TEDIOUS to share images outside of their platform that I could never justify the time and effort involved. I decided to revisit this topic recently and discovered it's STILL an issue.
But now I have the solution.
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.
OR
Option 2:You can make an HTML file on your computer (use notepad and save as ".html"), 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 benefit of this second option is that you don't have to run the underlying code on your site, you would just use the standard Flickr embed codes which you generated with the HTML file.
Option 3? There's probably a way to output the rendered embed codes to a text file so you don't have to make an HTML file and inspect the source/etc, but I haven't gotten that far yet. I'll probably get around to that eventually.
INSTRUCTIONS: The HTML and BODY tags are required for the HTML file to work and are present in all valid webpages. The actual code for this between those tags. REMOVE OR REPLACE the words in all caps (and the ASTERISKS as they are merely for your reference). The only things you actually NEED to change for this to work are: the API-KEY-GOES-HERE text, YOURNAME and ALBUM-ID. PHOTO-TITLE and ALT-TEXT are things you want to fill out if you care about search engine optimization/website formatting rules/etc.
Once you have your API key saved into your code, the only thing you need to change for it to work on 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.
Once you have your album ID, go here: https://www.flickr.com/services/api/explore/flickr.photosets.getPhotos and paste it in the "photoset_id" field, select "JSON" and "Do not sign call" options. Click the "call method" button and it will generate the URL you need. This URL goes in the "url" field in the first part of the code under "var settings" section. See below.
This is a monumental discovery for at least myself but I imagine there's at least a handful of other Flickr users out there who could really use this.
I now present the Bulk Embed Code Generator For Flickr Albums:
* * * * FULL WORKING HTML PAGE * * * *
<html>
<body>
* * * * CODE BELOW THIS LINE* * * *<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;
console.log(farmId + ", " + serverId + ", " + id + ", " + secret);
$("#sublunariscool").append('<a data-flickr-embed="true" href="https://www.flickr.com/photos/YOURNAME/' + id + '/in/album-ALBUM-ID" title="PHOTO-TITLE"><img src="https://live.staticflickr.com/' + serverId + '/' + id + '_' + secret + '_b.jpg" alt="ALT-TEXT"/></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"/>');
});
});
</script>
<div id="sublunariscool"/>
* * * * CODE ABOVE THIS LINE * * * *
</body>
</html>
* * * *END OF FULL WORKING HTML PAGE * * * *
Posts
