Embedding Google Photos: Difference between revisions
No edit summary |
|||
| (35 intermediate revisions by the same user not shown) | |||
| Line 8: | Line 8: | ||
https://www.publicalbum.org/blog/embed-google-photos-album-reabr | 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 - [https://support.google.com/photos/thread/9590592/how-to-get-photo-link-on-google-photo?hl=en]. 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 [https://hackernoon.com/how-to-embed-single-photos-from-google-photos-on-your-website-and-notion-page]. | |||
You have to go through the steps to generate an 'image address'. Then you just use this 'image address' with <nowiki><html><a href=" "> <img src=" " /> </a></html> | |||
</nowiki> | |||
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: | |||
<html><a href="https://lh3.googleusercontent.com/pw/AP1GczMCGrAUV9IiPQGOYKvDlCgNfeBEJgNUBqBVA3Yk8BQgsqvNuvQ-VKPLjud2y-3ErJMayboUyeAEa9aA_p6LQL8AM5Po_ddQDDcRoLCAW0vz5PMRZTH6=w2400?source=screenshot.guru"> <img src="https://lh3.googleusercontent.com/pw/AP1GczMCGrAUV9IiPQGOYKvDlCgNfeBEJgNUBqBVA3Yk8BQgsqvNuvQ-VKPLjud2y-3ErJMayboUyeAEa9aA_p6LQL8AM5Po_ddQDDcRoLCAW0vz5PMRZTH6=w300-h160-p-k" /> </a></html> | |||
The above was generated using the labnol.org site. Note how it operates on the address: | |||
<nowiki><html><a href=" "> <img src=" " /> </a></html> | |||
</nowiki> | |||
For this address: | |||
<nowiki>https://lh3.googleusercontent.com/pw/AP1GczOLEOKy0zO8hCeUl_N9uYpCv0ePg_FD1fjhXIY0GOb1DU7tXhGSm7V8OEgGQT3joSUpzrTTsGhavm-ntUsICJgxdaieB8I39Pud9W5Q5VSs6VdGHYOvMRcHW_fHw5jUaLH5KqQEhFRUNcdP0xHwN3n6dQ=w1579-h888-s-no-gm?authuser=0</nowiki> | |||
We get, by changing w1579-h888 to a smaller value: | |||
<html><a href="https://lh3.googleusercontent.com/pw/AP1GczOLEOKy0zO8hCeUl_N9uYpCv0ePg_FD1fjhXIY0GOb1DU7tXhGSm7V8OEgGQT3joSUpzrTTsGhavm-ntUsICJgxdaieB8I39Pud9W5Q5VSs6VdGHYOvMRcHW_fHw5jUaLH5KqQEhFRUNcdP0xHwN3n6dQ=w1579-h888-s-no-gm?authuser=0"> <img src="https://lh3.googleusercontent.com/pw/AP1GczOLEOKy0zO8hCeUl_N9uYpCv0ePg_FD1fjhXIY0GOb1DU7tXhGSm7V8OEgGQT3joSUpzrTTsGhavm-ntUsICJgxdaieB8I39Pud9W5Q5VSs6VdGHYOvMRcHW_fHw5jUaLH5KqQEhFRUNcdP0xHwN3n6dQ=w500-h300-s-no-gm?authuser=0" /> </a></html> | |||
And getting rid of -s-no-gm gets us: | |||
<html><a href="https://lh3.googleusercontent.com/pw/AP1GczOLEOKy0zO8hCeUl_N9uYpCv0ePg_FD1fjhXIY0GOb1DU7tXhGSm7V8OEgGQT3joSUpzrTTsGhavm-ntUsICJgxdaieB8I39Pud9W5Q5VSs6VdGHYOvMRcHW_fHw5jUaLH5KqQEhFRUNcdP0xHwN3n6dQ=w1579-h888-s-no-gm?authuser=0"> <img src="https://lh3.googleusercontent.com/pw/AP1GczOLEOKy0zO8hCeUl_N9uYpCv0ePg_FD1fjhXIY0GOb1DU7tXhGSm7V8OEgGQT3joSUpzrTTsGhavm-ntUsICJgxdaieB8I39Pud9W5Q5VSs6VdGHYOvMRcHW_fHw5jUaLH5KqQEhFRUNcdP0xHwN3n6dQ=w500-h300?authuser=0" /> </a></html> | |||
And getting rid of ?authuser=0 gets us, and size information in the first link: | |||
<html><a href="https://lh3.googleusercontent.com/pw/AP1GczOLEOKy0zO8hCeUl_N9uYpCv0ePg_FD1fjhXIY0GOb1DU7tXhGSm7V8OEgGQT3joSUpzrTTsGhavm-ntUsICJgxdaieB8I39Pud9W5Q5VSs6VdGHYOvMRcHW_fHw5jUaLH5KqQEhFRUNcdP0xHwN3n6dQ"> <img src="https://lh3.googleusercontent.com/pw/AP1GczOLEOKy0zO8hCeUl_N9uYpCv0ePg_FD1fjhXIY0GOb1DU7tXhGSm7V8OEgGQT3joSUpzrTTsGhavm-ntUsICJgxdaieB8I39Pud9W5Q5VSs6VdGHYOvMRcHW_fHw5jUaLH5KqQEhFRUNcdP0xHwN3n6dQ=w500-h300" /> </a></html> | |||
To simplify, I added a Template:photosembed | |||
Testing the template with another picture: | |||
<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> | |||
Latest revision as of 22:33, 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 with another picture:
