Hướng dẫn nhúng/chèn Google Photos Album vào Web, Blogspot, WordPress,..

Hi, mấy hôm nay mình chơi lại trò Pokemon trên GBC, thế là có ý định viết lại (gần giống như hướng dẫn) mà thật ra chỉ là nhật ký trò chơi thôi. Mình định sẽ post lên trang game của mình (vì hiện giờ nó trống trơn :v)

https://game.dothanhlong.org/2018/09/31092018pokemon-complex-crystal.html

Cơ mà,

Cái trang game.dothanhlong.org của mình được xây trên nền Blogspot, do vậy việc chèn hình quá là cực. Nhất là khi chơi thì ham hố chụp màn hình cả đống (gần 300 tấm/lần chơi) :’)

Thế là nảy sinh việc cần chèn nguyên album google photo vào blogspot (cơ mà nhắc mới nói chứ cái editor của blogspot cùi thiệt, sao con của google mà google không đầu tư gì cả @@)

Tại sao là Google Photos?

Tại vì mình đồng bộ toàn bộ ảnh từ điện thoại vào Google Photos, Google Photos cho phép lưu trữ KHÔNG GIỚI HẠN hình ảnh với độ phân giải mặc định của Google (bản thân mình cũng thấy khá được), còn chọn chế độ lưu ảnh gốc thì chúng ta có 15G của Google Drive (Google Photos sẽ share dung dụng lưu trữ với Google Drive).

Chèn từng hình đơn từ Google Photos

Bình thường nếu chúng ta cần chèn từng hình đơn lẻ từ Google Photos thì cái Editor soạn thảo có sẵn của Blogspot đã hỗ trợ.

Chèn từng hình đơn từ Google Photos
Chèn từng hình đơn từ Google Photos

Chúng ta chỉ cần chọn tab From your phone hoặc Google Album Archive là được

From your phone

Google Album Archive

Tuy nhiên, khi chọn nhiều tấm thì nó sẽ rất bất tiện, như trường hợp của mình là ~ 300 tấm hình screenshots.

Chèn nguyên Album Google Photos

Để chèn nguyên Album từ Google Photos thì chúng ta có thể dùng API của Google để đọc danh sách các hình trong một Album đã public. Tuy nhiên, nếu không biết code để dùng API của Google thì sao?

Trên Internet mình luôn thấy có những con người làm việc thầm lặng để tạo ra những công cụ rất hữu ích, và Pavex là một trong những người đã tạo ra công cụ giúp có nguyên đoạn code để chèn nguyên một album của Google Photos vào Web

Chúng ta sẽ dùng tool của:

publicalbum.org

Về cơ bản theo mình biết thì Tool này sẽ nhận link album bạn đã chia sẻ công khai, lấy danh sách hình trong album đó và tạo ra một cái “trình chơi ảnh” để hiện album thành dạng slideshow cho chúng ta như hình dưới mình đã test

Chèn nguyên Album Google Photos
Chèn nguyên Album Google Photos

Làm thế nào để chèn Google Photos Album vào Web

Bước 1. Chúng ta cần tạo một Album chứa những hình chúng ta muốn nhúng vào Web

Chúng ta cần truy cập vào Google Photos

https://photos.google.com

Sau đó thêm các hình muốn chia sẻ vào một album

tạo một Album chứa những hình chúng ta muốn nhúng vào Web
tạo một Album chứa những hình chúng ta muốn nhúng vào Web

 

tạo một Album chứa những hình chúng ta muốn nhúng vào Web
tạo một Album chứa những hình chúng ta muốn nhúng vào Web

 

Bước 2. Lấy đường dẫn chia sẻ của Album

Sau khi tạo và đặt tên cho Album, chúng ta cần có được link chia sẻ của Album này ([Diary – 01/09/2018] Pokemon Complex Crystal – Cậu đấu với Nhóc)

Nhấp vào góc phải của Album và chọn chia sẻ

Bước 2. Lấy đường dẫn chia sẻ của Album
Bước 2. Lấy đường dẫn chia sẻ của Album

Sau đó chọn Get link

Bước 2. Lấy đường dẫn chia sẻ của Album
Bước 2. Lấy đường dẫn chia sẻ của Album
Lấy đường dẫn chia sẻ của Album
Lấy đường dẫn chia sẻ của Album

Copy cái link mình vừa có được, như trường hợp cái album của mình có địa chỉ thế này

https://photos.app.goo.gl/Wcd19ha5WnGXtE4m7

Bước 3. Nhận code nhúng Album vào Web

Chúng ta truy cập công cụ theo địa chỉ sau:

How do I embed a Google Photos album into a website?

Kéo bài viết xuống đoạn

Nhận code nhúng Album vào Web
Nhận code nhúng Album vào Web

Sau đó thì paste cái link album của chúng ta vào, nhấn nút Create Embed Code

Giao diện lúc đó sẽ chuyển sang như hình dưới

Nhận code nhúng Album vào Web
Nhận code nhúng Album vào Web

Ở giao diện này, chúng ta có thể cấu hình cái Album player của chúng ta.

Nếu thấy Ok rồi thì nhấn nút Copy Code To Clipboard hoặc copy hết code ở phía tay phải.

Bước 4. Chèn Album Google Photos vào Blogspot, WordPress hoặc các Web có trình Editor cho nhập mã HTML

Để chèn được Album Google Photos vào Blogspot thì trong trình soạn bài viết của Blogspot, chúng ta cần chuyển sang chế độ HTML, còn đới với WordPress thì chuyển sang chế độ Text

Blogspot -> HTML

WordPress -> Text

Chèn Album Google Photos vào Blogspot, WordPress hoặc các Web có trình Editor cho nhập mã HTML
Chèn Album Google Photos vào Blogspot, WordPress hoặc các Web có trình Editor cho nhập mã HTML
Chèn Album Google Photos vào Blogspot, WordPress hoặc các Web có trình Editor cho nhập mã HTML
Chèn Album Google Photos vào Blogspot, WordPress hoặc các Web có trình Editor cho nhập mã HTML

Sau khi chuyển chế độ thì paste code vào chỗ mà chúng ta muốn Album player hiển thị

Sau khi paste code và lưu lại thì tận hưởng kết quả thôi

Kết quả.

Chèn Google Photos Album vào Blogspot

Demo online:

https://game.dothanhlong.org/2018/09/diary-01092018-pokemon-complex-crystal.html

Chèn Google Photos Album vào Blogspot
Chèn Google Photos Album vào Blogspot

Chèn Chèn Google Photos Album vào WordPress

[Diary – 01/09/2018] Pokemon Complex Crystal – Cậu đấu với Nhóc

Hai cậu cháu kết nối BlueTooth cho GBC để chơi với nhau


Vậy là xong, chúc mọi người làm được

Mình chơi tiếp đây :v

-soiqualang_chentreu-