Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jcarrano/insta-gallery

Display your Instagram Gallery on your website using Cloudflare Workers. No expensive 3rd party services.
https://github.com/jcarrano/insta-gallery

cloudflare-workers instagram instagram-gallery lightbox

Last synced: 28 days ago
JSON representation

Display your Instagram Gallery on your website using Cloudflare Workers. No expensive 3rd party services.

Awesome Lists containing this project

README 

        
# Instagram Gallery View



## Problem Statement



You have an Instagram account and you want to also display your images/videos

on your website.



## Solution



This is a server-side application that produces a gallery view of an user's

Instagram wall. It is an alternative to the official Instagram widget, which

does not allow to customize the view and may be blocked by ad-blockers or Firefox's

tracking protection.



It is a self-hosted alternative to services such as ElecticBlaze (Mobirise),

curator, etc and runs on Cloudflare Workers.



## Limitations



Only one image is shown per album. This is not hard to change, though.



## License and attribution



This project is licensed under the MIT license.



poptrox belongs to user n33 (also MIT license).

All other code is Copyright (C) 2023 Juan Ignacio Carrano.



## How it works



### Instagram API



You will need to get a app ID and secret from Instagram. You can do so by

creating a new app at https://www.instagram.com/developer/clients/manage/



Follow the guide at https://sites.caltech.edu/documents/15223/Setup_Instagram_Basic_Display_API.pdf

and make sure to use the App Id and App Secret fron the "Instagram Basic Display API",

not the Facebook App.



Add your domain to the allowed domains list for authentication.



### Cloudflare Workers



#### Workers KV



You will need to create a new Workers KV namespace and bind it to your worker

as `INSTA_GALLERY`. The following keys will be set by the worker:



- `instagram-access-token`: The long-lived access token

- `instagram-user-id`: The user ID of the Instagram user

- `auth-state`: The state of the authentication process (temporary)



#### R2 Storage



You will need to create a new R2 storage namespace and bind it to your worker

as `INSTA_GALLERY_R2`.



Set the R2 storage to be publicly readable if you want to render the gallery

client-side and add your domain to the CORS list.



#### Environment variables



The following environment variables should be set:



- `INSTAGRAM_APP_ID`: The Instagram app ID.

- `R2_BUCKET_BASE`: (optional) The base URL for the R2 storage bucket. This is

  only used for the basic gallery renderer (the one that is served by the worker).



The following environment variables must be set as secrets:



- `INSTAGRAM_APP_SECRET`: The Instagram app secret.

- `GALLERY_CONFIG_KEY`: a random string used to perform privileged operations

  (authentication and forced update).



#### Worker



The worker is composed of the following paths, plus a scheduled worker:



- `/auth`: serves as a redirect target for Instagram's OAuth flow.

- `/`: Authentication entry point.

- `/gallery`: Simplified gallery view.

- `/update`: Force an update of the gallery.

- Update handler: Updates the gallery (run as a scheduled worker).



In order to authenticate and force an update, you will need provide the config

key.



#### Set up



Update the `wrangler.toml` file with your app ID and, name of the worker, KV

namespace and R2 storage namespace.



Set the INSTAGRAM_APP_SECRET secret and choose a random string for

GALLERY_CONFIG_KEY.



To start the authentication flow, visit `/` and following the instructions.



#### Update the gallery



`wrangler.toml` contains a scheduled worker that will update the gallery every

day at 04:30 UTC. You can change the schedule by editing the corresponding

line.



### Rendering the gallery



The worker exposes a very basic gallery renderer. For more advanced use cases,

write your own renderer and access the data directly from R2.



See the client-side renderer in `example_renderer/`. It uses poptrox to display

the images and videos in a lightbox.