Embedding Google Photos

From Open Source Ecology
Jump to navigation Jump to search

It appears that you cannot iframe individual Google Photos into websites.

Here is how to do it instead - by generating a different URL that Google uses on its back end. Photo appears downgraded somewhat.

https://www.labnol.org/embed/google/photos/

Here is a way to embed Google albums -

https://www.publicalbum.org/blog/embed-google-photos-album-reabr

These all appear to be 3rd party apps. The only way to embed Google Photos manually seems to be to add them to your Drive first - [1]. It seems that Google Photos limits the embed possibility? ot really, there is a way to do it manually, below.

Manual Route

This procedure works, from [2].

You have to go through the steps to generate an 'image address'. Then you just use this 'image address' with <html><a href=" "> <img src=" " /> </a></html>


Steps

  1. Open your preferred photo in Google Photos and click on "Share," then "Create Link" to get a shareable link for that image.
  2. Copy the link and open a new browser tab.
  3. Paste the link address into the new browser window. This will bring you to a new shared album with just that photo in it.
  4. Click the image to zoom in and right-click on the image.
  5. Select "Copy image address" from the menu.
  6. You now have your embed link, but this must be formatted with the correct HTML.

For example:

The above was generated using the labnol.org site. Note how it operates on the address:

<html><a href=" "> <img src=" " /> </a></html>

For this address:

https://lh3.googleusercontent.com/pw/AP1GczOLEOKy0zO8hCeUl_N9uYpCv0ePg_FD1fjhXIY0GOb1DU7tXhGSm7V8OEgGQT3joSUpzrTTsGhavm-ntUsICJgxdaieB8I39Pud9W5Q5VSs6VdGHYOvMRcHW_fHw5jUaLH5KqQEhFRUNcdP0xHwN3n6dQ=w1579-h888-s-no-gm?authuser=0


We get, by changing w1579-h888 to a smaller value:

And getting rid of -s-no-gm gets us:

And getting rid of ?authuser=0 gets us, and size information in the first link:

To simplify, I added a Template:photosembed

Testing the template: