Costa Rica Albums web page using Flickr embed code

Working With Flickr’s Embed Code

I’ve been trying to find an easy way to show family and friends photos from my trips.  Flickr embed code seemed to be the best option.  I adore and use Flickr; the photo management and sharing web app with 1TB of free space.  Their camera roll tool is by far my favourite for organising images into albums and given them appropriate tags, but more importantly, they keep all my lightroom metadata that I labour over in the upload process!

My issue so far is that when sharing the Flickr albums on Facebook they are usually mistaken for a single picture.  No one clicks through to view the album in its entirety on Flickr. So why not make a web page? I’m capable, and I can make basic enough that the less technically inclined in the family will understand how to use it, best of all they can stay in one place. 😁

Bonus! I get to try out different kinds of CSS and designs that would never fly in the usual “business professional” web design.  And get to play with some code that has so little support it would never be allowed to reach a wider user base.

 

The Goal

One location where you can see all the pictures, divided in logical albums with short explanations of the location they were taken.

 

The Tools

This is 100% easily replicable by anyone with an email because that is all you need to sign up for these services.  Well, that and some basic HTML & CSS understanding if you want to make it look fancy, but no Javascript except the single script include that makes the Flickr albums work.

 

Launch Costa Rica

 

Launch California

 

Embed Code Notes For DIYers

In order the get the embed code working every time in the most optimal way you will want all of your album covers to be a landscape photo.

Then if you have any private photos in your albums you will need to make sure you are getting the public version of the link. Because, as I found when my boyfriend QA’d my site, the short links that are for private photos do not let you go past the first photo on them embed code. How do you get the right one? Open the album and get it from the browser, or you will have to log out of you Flickr and use the share button and copy paste the embed code that way.  Frustratingly, using “share only public” from the drop-down menu in the share menu has no effect on the embed code.

Doesn’t Work:
https://www.flickr.com/ gp/ -dmlb/ p07P0m

Works:
https://www.flickr.com/ photos/ -dmlb/ albums/ 72157678009912821

 

#ProTip: The Script Tag

You may have noticed every time you copy the embed code there is a script tag at the end. If you are trying to put multiple albums on a single page, you only actually need this once. Paste it at the bottom of your page once and erase it from any additional albums you add.

 

Warning

For those unfamiliar with web development, the more albums you add the slower your page will be.