How can I do embed my shared album from Google Photos and make preview of images on my website? How can I do that simply, without having to copy pictures or complicated search to individual image links? Here I will introduce my solution, which you can also try.
Three steps how to do it.
When I wanted to present my photos public on the web, I found out that there was no easy way to do it, in fact, there was no reasonable way.
You can embed yours shared photo album from Google Photos with the code that generates a preview of your entire album with the ability to view photos easily.
1) Get album public link for sharing
In Google Photos application, you must share selected album and get link of it. Choose album – click on menu icon or open album and click on share button and select “get link”. Link look like as
https://photos.app.goo.gl/somehash. Copy this link into clipboard.
2) Create code to embed album
All you need is a link from previous step. Insert to field and press “Create embed code“.
I created tool to basic manage of created code. You can setup dimmensions and some options about component. When you finish, copy result HTML code into clipboard. This code is a final stand alone HTML code – no proxy, no iframes. The only one external component is a “Player” decorator.
Some spacial features
- Background color – setup basic background color of player. Default color is black, defined in hexadecimal html like string (#000000). If you need define another CSS features you can override by class.
3) Paste code to your website
Complete code, paste to your site. That’s all.
If you need process some change, such as add new photos, you must create new code of album. I will try to solve this problem in some of the following versions.
Good to known
If you decide not to share the album, just stop sharing it in Google Photos and the photos will not be available anywhere else.
For WordPress users I have prepared a Worpdress Google photos plugin for easy to use in your posts using shortcodes.