I Made an API That Only Returns Google Account Images
How do you manage your profile picture? For example, do you update your Zenn profile picture? I often neglect to update my profile picture because it's a hassle. (It would be nice if we could use a SaaS like Gravatar...)
Recently, I was considering refreshing my portfolio page, and I was wondering what to do with my profile picture. The base document of the portfolio is written in Markdown.
I thought about setting the profile picture via an API instead of keeping it fixed, so I created the Google Account Photo API, which only returns Google account images.
The source code for the API is here(Github). I made it in about an hour, so I only looked at the normal pattern. (laughs) Please understand.
Which is the Google Account Image?
The Google account image is the image in the upper right corner displayed on www.google.com (only for those who are logged in).
How to Use the API
To call the API, you need to prepare something called your Google account ID.
How to Find Your Google Account ID
You can find your Google account ID by running the Google People API Explorer.
When you run it, a field called resourceName(ex. people/<account_id>)
is returned, and the account_id written there is yours.
Calling the API
The API is called by a GET request to the following URL. YOUR_ACCOUNT_ID is the account_id you obtained earlier.
https://google-account-photo.vercel.app/api/?account_id=YOUR_ACCOUNT_ID
When you call it, an image is returned. In my case, the following image is returned.
Utilizing it in Markdown
With this API, you can display a profile picture just by writing the following Markdown!
![google account image](https://google-account-photo.vercel.app/api/?account_id=YOUR_ACCOUNT_ID)
Just this might be a bit bland, so let's use Cloudinary. Cloudinary allows you to process images just by setting URL parameters. For example, if you want to make the image a circle, you would write the following URL.
![circle google account image](https://res.cloudinary.com/demo/image/fetch/r_max/https%3A%2F%2Fgoogle-account-photo.vercel.app%2Fapi%2F%3Faccount_id%3DYOUR_ACCOUNT_ID)
I will omit the explanation about Cloudinary.
In my case, the following image will be displayed.
For more details about Cloudinary, please check the following URL.
In Conclusion
I thought it's a convenient world where you can quickly build an API.
Share
Related tags
- Created an App to Consistently Record and Visualize Data in a Free Format
- Developing "Bochi-Bochi", an App to Easily Find Cheap Ingredients
- What I Learned from Refreshing My Blog Page with Qwik
- Introducing AI Ghostwriter - A Tool to Improve Writing Efficiency
- Development of Stable Diffusion API
- Defining Fragments Composed in Micro Frontends as Web Components and Sharing them with Module Federation
- Created OEmbed and OGP WebComponents for use on my blog site
- Things I Learned from Developing Chrome Extensions (Manifest V3)
- If you're writing in Markdown, Rocket, an SSG that uses WebComponents, is recommended!
- Refreshing Silverbirder's Portfolio Page (v2)
- Building a TikTok Scraping Infrastructure on GCP and the Challenges Faced
- Micro Frontends on the Client Side (ES Module)
- Micro Frontends with Zalando tailor (LitElement & etcetera)
- Micro Frontends with SSR in Ara-Framework
- Created a GAS Library, zoom-meeting-creator, to Automatically Generate Zoom Meetings
- Introducing a Tool for Bulk Updating Account Images and What I Learned
- Cotlin is a Tool for Collecting Links on Twitter, Discover Presentations from Around the World
- I tried creating rMinc, a service that registers GMail to GCalendar
- I Tried Making a One-Frame Comic Search Service Tiqav2 (Algolia + Cloudinary + Google Cloud Vision API)