README

dnadesign/silverstripe-elemental-element中的Instagram feed。它使用espresso-dev/instagram-basic-display-php并缓存API响应以提高性能。由于不同的爬虫可能导致各种问题——主要是cookie/session相关，因此出现了这个模块。appId & appSecret存储在yml-config或.env中，旋转的token在数据库中。API对“公开”数据来说本身就是只读的。

注意：此模块使用Instagram 基本 显示API。

来自Lipp&Leuthold的操作示例

安装

Composer是安装Silverstripe模块的推荐方式。

composer require lerni/instagram-basic-display-feed-element

• 运行dev/build?flush

要求

• Silverstripe 5.x
• dnadesign/silverstripe-elemental
• espresso-dev/instagram-basic-display-php 1.x

配置

您需要设置一个FB App用于基本显示，并设置appId & appSecret (Instagram不是FB)。 redirectUri将设置为DYNAMICALLY-SET-HOST.TLD/_instaauth/，但您也可以通过yml-config显式设置它。请确保在您的FB App中配置正确的值（例如，dev-url）！如果尚未生成token，您可以在元素的设置选项卡中找到生成token的链接。token将在30天后自动更新（基于请求）。

1. 安装模块
2. 创建一个FB App，使用https://DOMAIN.TLD/_instaauth/作为redirectUri
3. 在yml-config或.env中添加appId & appSecret如下，然后运行?flush
4. 创建Instagram Feed Element，并在设置选项卡中点击链接进行认证
5. 重新加载CMS以查看生成的token
6. 就是这样。如果token超过30天，则会基于请求更新。这意味着，如果token超过30天，并且从那时起没有请求（元素从未向任何访客显示），则token将失效，并抛出警告。要“修复”此问题，您需要删除所有token并使用CMS中提供的链接重新生成一个。

Kraftausdruck\InstagramFeed\Control\InstaAuthController:
  credentials:
    appId: '2598599940246020'
    appSecret: '7e29795bva6d352e3286769ff3a3a836'
    # redirectUri: 'https://example.tld/_instaauth/'

KRAFT_INSTAFEED_APP_ID='2598599940246020'
KRAFT_INSTAFEED_APP_SECRET='7e29795bva6d352e3286769ff3a3a836'

样式

示例SCSS方形样式，带有文本作为悬停覆盖。建议使用Feather Icons——您需要自己加载这些图标。

$lh: 1.41;
$white: #fff;
.instafeed {
	display: flex;
	flex-wrap: wrap;
	margin-left: -1px;
	margin-right: -1px;
	width: calc(100% + 2px);
	a {
		outline: none;
		overflow: hidden;
		position: relative;
		display: block;
		width: auto;
		height: 500px;
		@include breakpoint($Lneg) {
			height: 400px;
		}
		@include breakpoint($Sneg) {
			height: 300px;
		}
		figure {
			height: 100%;
			margin: 0;
			img {
				object-fit: cover;
				margin-bottom: 0;
				max-width: none;
				width: 100%;
				height: 100%;
			}
			figcaption {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				opacity: 0;
				transition: opacity 120ms linear;
				z-index: 1;
				color: $white;
				font-size: .8em;
				padding: #{math.div($lh,2)}em;
				display: flex;
				flex-direction: column;
				background-color: rgba(0,0,0,.8);
				span[data-feather="instagram"] {
					transition: transform 120ms linear;
					transform: scale(.4);
					width: 1.4em;
					height: 1.4em;
					background-image: svg-load('../images/svg/instagram.svg', stroke=#{$white});
					margin: auto auto 0 auto;
				}
			}
			&:hover {
				figcaption {
					opacity: 1;
					span[data-feather="instagram"] {
						transform: scale(1);
					}
				}
			}
		}
		video {
			height: 100%;
			width: 100%;
		}
	}
}

故障排除

如果出现问题，您可以检查Facebook平台状态。