Embedding Google Photos: Difference between revisions
| Line 56: | Line 56: | ||
Testing the template: | Testing the template: | ||
<html><a href="https://lh3.googleusercontent.com/pw/AP1GczPjJPg0gcqxx5sijmHxP4SAthQ6BconoRz4ebegeuBaZOEr2_ODlnhOR3WJCNnXs39L9OOw_NSFdGr-o2N0lLYFQ020HaeV6Hl8p5vFKenKm1E0oCLuh3N8t-3W-N24zz2EYpwe04xz7miZ1c5UIipDag"> <img src="https://lh3.googleusercontent.com/pw/AP1GczPjJPg0gcqxx5sijmHxP4SAthQ6BconoRz4ebegeuBaZOEr2_ODlnhOR3WJCNnXs39L9OOw_NSFdGr-o2N0lLYFQ020HaeV6Hl8p5vFKenKm1E0oCLuh3N8t-3W-N24zz2EYpwe04xz7miZ1c5UIipDag= | <html><a href="https://lh3.googleusercontent.com/pw/AP1GczPjJPg0gcqxx5sijmHxP4SAthQ6BconoRz4ebegeuBaZOEr2_ODlnhOR3WJCNnXs39L9OOw_NSFdGr-o2N0lLYFQ020HaeV6Hl8p5vFKenKm1E0oCLuh3N8t-3W-N24zz2EYpwe04xz7miZ1c5UIipDag"> <img src="https://lh3.googleusercontent.com/pw/AP1GczPjJPg0gcqxx5sijmHxP4SAthQ6BconoRz4ebegeuBaZOEr2_ODlnhOR3WJCNnXs39L9OOw_NSFdGr-o2N0lLYFQ020HaeV6Hl8p5vFKenKm1E0oCLuh3N8t-3W-N24zz2EYpwe04xz7miZ1c5UIipDag=w400-h250" /> </a></html> | ||
Revision as of 22:32, 9 June 2024
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
- Open your preferred photo in Google Photos and click on "Share," then "Create Link" to get a shareable link for that image.
- Copy the link and open a new browser tab.
- Paste the link address into the new browser window. This will bring you to a new shared album with just that photo in it.
- Click the image to zoom in and right-click on the image.
- Select "Copy image address" from the menu.
- 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:
