インスタグラムウィジェット

現時点のコードは以下の通り:

section.content {
	> div:nth-of-type(2) {
		padding: 15px;
		> p {
			font-size: 0.9rem;
			line-height: 1.3;
			color: #7b6246;
			padding-bottom: 3px;
		}
		> #widgetArea1 {
			max-width: 500px;
			display: grid;
			grid-template-rows: repeat(3,1fr);
			grid-template-columns: repeat(3,1fr);
			gap: 3px;
			> a {
				&:hover {
					opacity: 0.7;
				}
				> img {
					max-width: 100%;
				}
			}
		}
		> #widgetArea2 {
			display: flex;
			flex-wrap: wrap;
			gap: 3px;
			> a {
				max-width: 150px;
				&:hover {
					opacity: 0.7;
				}
				> img {
					max-width: 100%;
				}
			}
		}
		> #widgetArea3 {
			max-width: 500px;
			display: grid;
			grid-template-rows: repeat(3,1fr);
			grid-template-columns: repeat(3,1fr);
			gap: 3px;
			> a {
				transition: transform 0.5s;
				> img {
					max-width: 100%;
				}
				&:hover {
					opacity: 1;
					z-index: 1;
					transform: scale(2);
				}
			}
		}
		> #widgetArea4wrap {
			width: 400px;
			height: 400px;
			overflow: hidden;
			@media (width < 460px) {
				width: 300px;
				height: 300px;
			}
			@media (width < 350px) {
				width: 250px;
				height: 250px;
			}
			> #widgetArea4 {
				display: flex;
				flex-direction: column;
				animation-name: widgetRise400;
				animation-duration: 20s;
				animation-iteration-count: infinite;
				@media (width < 460px) {
					animation-name: widgetRise300;
				}
				@media (width < 350px) {
					animation-name: widgetRise250;
				}
				> a {
					width: 100%;
					&:hover {
						opacity: 0.7;
					}
					> img {
						max-width: 100%;
					}
				}
			}
		}
		> #widgetArea5wrap {
			width: 400px;
			height: 400px;
			overflow: hidden;
			@media (width < 460px) {
				width: 300px;
				height: 300px;
			}
			@media (width < 350px) {
				width: 250px;
				height: 250px;
			}
			> #widgetArea5 {
				display: flex;
				width: calc(400px * 9);
				animation-name: widgetCrawl400;
				animation-duration: 20s;
				animation-iteration-count: infinite;
				@media (width < 460px) {
					width: calc(300px * 9);
					animation-name: widgetCrawl300;
				}
				@media (width < 350px) {
					width: calc(250px * 9);
					animation-name: widgetCrawl250;
				}
				> a {
					width: 100%;
					&:hover {
						opacity: 0.7;
					}
					> img {
						max-width: 100%;
					}
				}
			}
		}
	}
	&:nth-of-type(4n - 4) {
		> div:nth-of-type(1) {
			background-color: rgba(100,100,255,0.1);
		}
	}
	&:nth-of-type(4n - 3) {
		> div:nth-of-type(3) {
			background-color: rgba(255,200,150,0.1);
		}
	}
	&:nth-of-type(4n - 2) {
		> div:nth-of-type(1) {
			background-color: rgba(200,200,255,0.1);
		}
	}
	&:nth-of-type(4n -1) {
		> div:nth-of-type(3) {
			background-color: rgba(200,255,100,0.1);
		}
	}
}
/*-----*/
@keyframes widgetRise400 {
	0% {
		margin-top: 0px;
	}
	9.5% {
		margin-top: 0px;
	}
	11.5% {
		margin-top: -400px;
	}
	21% {
		margin-top: -400px;
	}
	23% {
		margin-top: -800px;
	}
	32.5% {
		margin-top: -800px;
	}
	34.5% {
		margin-top: -1200px;
	}
	44% {
		margin-top: -1200px;
	}
	46% {
		margin-top: -1600px;
	}
	55.5% {
		margin-top: -1600px;
	}
	57.5% {
		margin-top: -2000px;
	}
	67% {
		margin-top: -2000px;
	}
	69% {
		margin-top: -2400px;
	}
	78.5% {
		margin-top: -2400px;
	}
	80.5% {
		margin-top: -2800px;
	}
	90% {
		margin-top: -2800px;
	}
	92% {
		margin-top: -3200px;
	}
	99% {
		margin-top: -3200px;
	}
	100% {
		margin-top: 0px;
	}
}
@keyframes widgetRise300 {
	0% {
		margin-top: 0px;
	}
	9.5% {
		margin-top: 0px;
	}
	11.5% {
		margin-top: -300px;
	}
	21% {
		margin-top: -300px;
	}
	23% {
		margin-top: -600px;
	}
	32.5% {
		margin-top: -600px;
	}
	34.5% {
		margin-top: -900px;
	}
	44% {
		margin-top: -900px;
	}
	46% {
		margin-top: -1200px;
	}
	55.5% {
		margin-top: -1200px;
	}
	57.5% {
		margin-top: -1500px;
	}
	67% {
		margin-top: -1500px;
	}
	69% {
		margin-top: -1800px;
	}
	78.5% {
		margin-top: -1800px;
	}
	80.5% {
		margin-top: -2100px;
	}
	90% {
		margin-top: -2100px;
	}
	92% {
		margin-top: -2400px;
	}
	99% {
		margin-top: -2400px;
	}
	100% {
		margin-top: 0px;
	}
}
@keyframes widgetRise250 {
	0% {
		margin-top: 0px;
	}
	9.5% {
		margin-top: 0px;
	}
	11.5% {
		margin-top: -250px;
	}
	21% {
		margin-top: -250px;
	}
	23% {
		margin-top: -500px;
	}
	32.5% {
		margin-top: -500px;
	}
	34.5% {
		margin-top: -750px;
	}
	44% {
		margin-top: -750px;
	}
	46% {
		margin-top: -1000px;
	}
	55.5% {
		margin-top: -1000px;
	}
	57.5% {
		margin-top: -1250px;
	}
	67% {
		margin-top: -1250px;
	}
	69% {
		margin-top: -1500px;
	}
	78.5% {
		margin-top: -1500px;
	}
	80.5% {
		margin-top: -1750px;
	}
	90% {
		margin-top: -1750px;
	}
	92% {
		margin-top: -2000px;
	}
	99% {
		margin-top: -2000px;
	}
	100% {
		margin-top: 0px;
	}
}
/*-----*/
@keyframes widgetCrawl400 {
	0% {
		margin-left: 0px;
	}
	9.5% {
		margin-left: 0px;
	}
	11.5% {
		margin-left: -400px;
	}
	21% {
		margin-left: -400px;
	}
	23% {
		margin-left: -800px;
	}
	32.5% {
		margin-left: -800px;
	}
	34.5% {
		margin-left: -1200px;
	}
	44% {
		margin-left: -1200px;
	}
	46% {
		margin-left: -1600px;
	}
	55.5% {
		margin-left: -1600px;
	}
	57.5% {
		margin-left: -2000px;
	}
	67% {
		margin-left: -2000px;
	}
	69% {
		margin-left: -2400px;
	}
	78.5% {
		margin-left: -2400px;
	}
	80.5% {
		margin-left: -2800px;
	}
	90% {
		margin-left: -2800px;
	}
	92% {
		margin-left: -3200px;
	}
	99% {
		margin-left: -3200px;
	}
	100% {
		margin-left: 0px;
	}
}
@keyframes widgetCrawl300 {
	0% {
		margin-left: 0px;
	}
	9.5% {
		margin-left: 0px;
	}
	11.5% {
		margin-left: -300px;
	}
	21% {
		margin-left: -300px;
	}
	23% {
		margin-left: -600px;
	}
	32.5% {
		margin-left: -600px;
	}
	34.5% {
		margin-left: -900px;
	}
	44% {
		margin-left: -900px;
	}
	46% {
		margin-left: -1200px;
	}
	55.5% {
		margin-left: -1200px;
	}
	57.5% {
		margin-left: -1500px;
	}
	67% {
		margin-left: -1500px;
	}
	69% {
		margin-left: -1800px;
	}
	78.5% {
		margin-left: -1800px;
	}
	80.5% {
		margin-left: -2100px;
	}
	90% {
		margin-left: -2100px;
	}
	92% {
		margin-left: -2400px;
	}
	99% {
		margin-left: -2400px;
	}
	100% {
		margin-left: 0px;
	}
}
@keyframes widgetCrawl250 {
	0% {
		margin-left: 0px;
	}
	9.5% {
		margin-left: 0px;
	}
	11.5% {
		margin-left: -250px;
	}
	21% {
		margin-left: -250px;
	}
	23% {
		margin-left: -500px;
	}
	32.5% {
		margin-left: -500px;
	}
	34.5% {
		margin-left: -750px;
	}
	44% {
		margin-left: -750px;
	}
	46% {
		margin-left: -1000px;
	}
	55.5% {
		margin-left: -1000px;
	}
	57.5% {
		margin-left: -1250px;
	}
	67% {
		margin-left: -1250px;
	}
	69% {
		margin-left: -1500px;
	}
	78.5% {
		margin-left: -1500px;
	}
	80.5% {
		margin-left: -1750px;
	}
	90% {
		margin-left: -1750px;
	}
	92% {
		margin-left: -2000px;
	}
	99% {
		margin-left: -2000px;
	}
	100% {
		margin-left: 0px;
	}
}
/*-----*/

主な初期手順:
Instagram Business ID を取得
グラフAPIエクスプローラでアクセストークン取得
https://developers.facebook.com/tools/explorer/
アクセス許可
instagram_basic
エンドポイントにアクセス
GET https://graph.facebook.com/v20.0/(ビジネスID)?fields=name,media.limit(9){caption,media_url,thumbnail_url,permalink}&access_token=(アクセストークン)
アクセストークンデバッガーで有効期限なし(無期限)のアクセストークン取得
https://developers.facebook.com/tools/debug/accesstoken

2019年12月初版
2024年5月改訂
このサイトについてのお問い合わせはエーオーシステムまでお願いいたします。
ご使用上の過失の有無を問わず、本プログラムの運用において発生した損害に対するいかなる請求があったとしても、その責任を負うものではありません。

インスタグラムウィジェット

Instagram Widget

Instagram Widget

インスタグラムウィジェット

インスタグラムから9枚の画像を取得してCSSで動作させる

動画

画像

アイコン

文字列

QRコード

Excel

SVG

読み上げ

HTML,CSS

色

3D

音

ビット、バイト

データベース

インターネット

IPv4,IPv6

開発

ビンゴ大会開催システム(Wタイプ) 自動更新

ビンゴ(Pタイプ) 自動更新

ビンゴ(Mタイプ) 手動更新

抽選機等

パズル、ゲーム

他

インスタグラム ウィジェット

Instagram Widget

動画

画像

アイコン

文字列

QRコード

Excel

SVG

読み上げ

HTML,CSS

色

3D

音

ビット、バイト

データベース

インターネット

IPv4,IPv6

開発

ビンゴ大会開催システム(Wタイプ) 自動更新

ビンゴ(Pタイプ) 自動更新

ビンゴ(Mタイプ) 手動更新

抽選機等

パズル、ゲーム

他

インスタグラムウィジェット