説明
Instagram 投稿を埋め込むことができるブロックを追加します。ブロックエディタに最適化された埋め込み機能を提供します。
1つのサイトで複数のアカウントを管理することができます。
ビジュアル編集は、すべてブロックエディタ上で行うことができ、より快適に、より柔軟に、よりスピーディーに目的のレイアウトを実現することができます。
自分の投稿、他のプロアカウントの投稿、ハッシュタグに関連する投稿を埋め込むことができます。
他のプロアカウントからの投稿を取得したり (Business Discovery)、ハッシュタグに関連した関連した投稿を取得するには、Instagram Graph API による認証が必要です。
Instagram から取得したデータは、より高速に表示するためにキャッシュされています。
キャッシュの有効期限が切れると、バックグラウンドで自動的にデータを取得し、再取得が完了した時点で更新されます。これにより、常に有効なキャッシュを利用することができます。
Blocks ; 共通オプション
全てのブロックで以下のオプションが利用可能。
- Advanced Getting Posts
- 取得の種類
- 他のユーザのユーザ名
- ハッシュタグ
- Video Option
- 動画の表示
- Instagram 投稿の開き先
- Post Caption
- 表示、非表示
- 行数
- Post Author
- 表示、非表示
- Post Time
- 表示、非表示
- Hover Effect
- スリガラス効果
- 回転効果
- Footer
- 表示、非表示
- 位置 (左 / 中央 / 右)
- Like / Comments Count
- 表示、非表示
- 位置 (画像のホバー / 画像の下)
ブロック； Simple Grid
グリッド状に投稿を配置するブロック。
以下のカスタマイズが可能です。
- 外側の余白 (PC / タブレット / スマホ)
- Layout (PC / Tablet / SP)
- 列数
- 行数
- アスペクト比
- 間隔
- Highlight
- 大きさ
- 位置 (左 / 上)
- Header
- 表示、非表示
- 位置 (左 / 中央 / 右)
- Follows Count
- 表示、非表示
- Followers Count
- 表示、非表示
ブロック； Simple Slider
横スライドするブロック。
以下のカスタマイズが可能です。
- Layout
- ベース幅
- 最小の幅
- 最小の列数
- 列数
- 行数
- アスペクト比
- 間隔 (横 / 縦)
- Scrolling
- 遷移時間
- イージング関数 (Linear / InOutSine / InOutQuad / InOutCubic / OutBounce / ベジュ曲線)
- ナビゲーションボタンの外部配置
ブロック； Masonry Grid (β機能)
グリッド状に投稿を配置するブロック。
以下のカスタマイズが可能です。
- 外側の余白 (PC / タブレット / スマホ)
- Layout
- メディアの数
- 列の最大幅
- 間隔
- 読み込み時のエフェクト
- Header
- 表示、非表示
- 位置 (左 / 中央 / 右)
- Follows Count
- 表示、非表示
- Followers Count
- 表示、非表示
モーダルウィンドウ
モーダルウィンドウを選択すると、ページからの離脱を避けて Instagram 投稿の詳細を表示することが可能です。
また、モーダルウィンドウ内に CTA (Call to Action; 行動喚起) を設置できます。
Instagram アカウントの認証
Instagram のアカウントと簡単に連動できます。
複数のアカウントを管理でき、ブロックを作成する際に使用するアカウントを個別に選択できます。
3rd party resources
Font Awesome
WebSite: https://fontawesome.com/
License: https://fontawesome.com/license/free
スクリーンショット
Instagram アカウントの管理画面 
トークン生成画面 
アカウントの手動設定 
ブロック； Simple Grid 
ブロック； Simple Slider 
グリッド配置のサンプル & ブロック設定 
スライダーのサンプル & ブロック設定
ブロック
このプラグインは3個のブロックを提供します。
- Instagram – Simple Slider Embed Instagram posts in a carousel slider.
- [Beta] Instagram – Masonry Grid Embed Instagram posts in a masonry layout. This is a Beta block.
- Instagram – Simple Grid Embed Instagram posts in a grid layout.
インストール
- あなたの管理画面のプラグイン検索欄に「Combine Social Photos」と入力します。
- このプラグインを見付けたら、「今すぐインストール」をクリックしてインストールします。
(他の方法) あなたの管理画面のプラグイン新規追加から「still-be-combine-social-photos.zip」を直接アップロードして下さい。
(他の方法) 解凍した「still-be-combine-social-photos」ディレクトリを /wp-content/plugins ディレクトリ以下にアップロードして下さい。 - WordPress のプラグインメニューから有効化する。
FAQ
-
ユーザ認証とは何ですか？
-
Instagram のデータは、あなたのアカウントを通じて取得されます。そのため、このプラグインがあなたに代わって Instagram にアクセスするので、あなたの許可が必要です。
-
“Basic Display API” と “Graph API” の違いは何ですか？
-
Basic Display API は、自分のアカウントの投稿のみを表示するための API で、Instagram アカウントと Facebook ページの連携は必要ありません。(認証は Instagram のアカウントで行います)
手軽に利用できる反面、プロフィール画像やいいね数、コメント数などの詳細情報を取得することはできません。Graph API は、API を通して様々な情報を提供するもので、Instagram と連携したプロアカウント (ビジネス、メディアクリエイター) と Facebook ページが必要です。(認証は Facebook アカウントで行います)
プロアカウントとして設定する必要がありますが、プロフィール画像、いいね数、コメント数のほか、他のプロアカウントの投稿やハッシュタグに関連する投稿を取得することが可能です。 -
新たな投稿が埋め込んだフィードに表示されません。
-
投稿データがキャッシュされるまで、キャッシュの有効期限 (デフォルト：3,600秒) が経過するのを待ってください。
キャッシュの更新が遅すぎる場合は、設定画面から有効期限を短くしてください。また、キャッシュ更新のための WP-Cron を無効にしている場合は、有効にしてください。
WP-Cron を無効にすると、Instagram CDN からメディアを表示できない場合にキャッシュの更新が実行されます。ただし、ユーザーにはキャッシュの有効期限が切れていることが表示され、ページの再読込が促されます。 -
クラシックエディタで使用できますか？
-
いいえ、サポートしていません。
このプラグインは、ブロックエディタ専用です。 -
ハッシュタグが変換できません。
-
ハッシュタグは ID に変換する必要があり、この変換作業は7日間で30回に制限されています。
多くのハッシュタグを変換している場合は、しばらく待ってから再度お試しください。 -
ハッシュタグ投稿が表示されません。
-
最新投稿の表示では、Instagram の仕様上、過去24時間以内の投稿しか取得できません。
しかし、一度設定すると、24時間以上前のデータをキャッシュするため、表示することができます。
つまり、ブロックを設定したタイミングの24時間前以降の投稿が表示されます。 -
これは Instagram の仕様です。
ハッシュタグに関連する投稿では、投稿者情報を表示することができません。 -
動画のサムネイルが自分の投稿以外表示されない。
-
Instagram の仕様です。
Version 0.8 以降では、動画を非表示にするか、自動再生するかを選択できるようになりました。
-
Masonry Grid で表示するたびに配置が変わってしまいます。これはバグですか？
-
これは本プラグインの仕様です。
要素の高さを計算するために画像を読み込む必要があり、読み込み完了のタイミングがレイアウトに影響します。
-
IE では表示されません。これは正しいですか？
-
はい、正しい動作です。
IE は2022年6月15日に Microsoft 社のサポートが終了しました。モダンブラウザ以外のブラウザでの動作は保証しておりません。 -
Simple Slider ブロックの外側に配置されるため、ブロックの親要素 (コンテンツエリアのコンテナ要素など) に “overflow: hidden;” が設定されている場合は表示されません。
テーマの設定をご確認いただくか、Simple Slider ブロックの外側にグループブロックを設定し、左右にナビゲーション用の余白を設けてください。
貢献者と開発者
変更履歴
0.16.0
2024-07-10
Checked that it works with WordPress 6.6.
Updated Graph API version to v20.0.
Changed Masonry Grid layout method. Improved stability.
0.15.3
2024-04-05
Masonry Grid ブロックの読込効果のイージングが時々動作しないバグを修正。
管理画面の通知のキャッシュ保持の処理方法を変更。
0.15.2
2024-03-27
Masonry Grid の配置動作の安定性を改善。
主にスマートフォンでのリサイズやスクロール時に顕著に改善。
0.15.1
2024-03-26
Simple Grid と Simple Slider ブロックの投稿が表示されないバグを修正。
0.15.0
2024-03-26
新しいブロック；Masonry Grid を追加。
これはβ機能です。
0.14.2
2024-03-20
管理画面のおしらせの表示方法を変更。
0.14.0
2024-03-20
ハッシュタグ投稿の表示にユーザートークンが必要になったため、更新処理を追加。
細かな調整などを実施。
0.13.5
2024-03-13
説明文を短縮。
0.13.4
2024-03-13
WordPress 6.5 での動作確認。
Facebook Graph API のバージョンを v19.0 にアップデート。
バグの修正。
0.13.3
2023-11-20
WordPress 6.4.1 での動作確認。
6.4 では cURL のエラーが発生するため、6.4.1 以上を使用すること。(WordPress コアのバグ)
0.13.2
2023-09-03
WP-Cron でアクセストークンが使用できるか確認する機能を有効化。
0.13.1
2023-09-01
Graph API のアクセストークンを再認証する機能を追加。
0.13.0
2023-08-16
Simple Grid ブロックのレスポンシブ設定が反映されないバグを修正。
WordPress 6.3 での動作確認。
0.12.1
2023-06-21
Facebook Graph API のバージョンを v17.0 にアップデート。
0.12.0
2023-03-26
Simple Grid ブロックに、投稿情報 (キャプション、投稿者、投稿日時、インプレッション数) の表示位置を選択できるオプションを追加。
Facebook Graph API のバージョンを v16.0 にアップデート。
WordPress 6.2 での動作確認。
0.11.3
2022-12-21
Basic Display API を使用した場合に、投稿が取得できない不具合を修正。
0.11.2
2022-12-01
API からデータが取得されないことがある問題を解消して安定性を向上。
(API の応答速度が遅い場合)
編集画面ではキャッシュを確認せず、常に最新のデータを取得するように変更。
0.11.1
2022-11-21
Graph API を手動で連携させる機能が正しく動作しない不具合を修正。
バグを修正。安定性を向上。
0.11.0
2022-11-11
WordPress 6.1 での動作確認。
Instagram 投稿の開き方のデフォルトを “新しいタブで開く” に変更。
バグを修正。安定性を向上。
0.10.0
2022-10-12
モーダルウィンドウの基本的な動作を改善。
モーダルウィンドウを開いた時に次や前の投稿に直接遷移するボタンを追加。
モーダルウィンドウに CTA を追加できる機能を追加。
※ブロック編集画面で修復が必要なケースが発生しますが、ブロックリカバリーにより問題なく修復されます。
0.9.1
2022-10-09
ダークモードに対応。
0.9.0
2022-10-09
Instagram 投稿を開くウィンドウを指定するオプションを追加。(同一 / 新規 / モーダル)
これに伴い、Javascript の読込処理を整理。
Facebook Graph API のバージョンを v15.0 にアップデート。
バグの修正。
0.8.1
2022-08-20
スライダーにイージング関数を追加。
Basic Display API でアクセストークンの更新まで投稿数が更新されないため、1日1回更新されるように変更。
CDN キャッシュの失効を防ぐため、1日1回、最新のハッシュタグ投稿にアクセスする処理を追加。(ベータ版、テスト機能)
0.8.0
2022-08-03
動画の表示オプションを追加。サムネイルの表示、非表示、自動再生の選択肢を追加。
ハッシュタグのついた最新投稿のキャッシュデータから、過去24時間以前も保持するように変更。(テスト)
バグの修正。
0.7.1
2022-07-26
期限切れの画像をトリガーとしたキャッシュ更新処理のテストコードを削除。
グローバル変数に各サイトに適した URL を設定。
0.7.0
2022-07-26
ハッシュタグに関連する投稿を表示するオプションを追加。
期限切れの画像がある場合、キャッシュを更新する処理を追加。
中途半端なスクロールのときの動作をより改善。
0.6.1
2022-07-12
スクロールが半端な時、イージング関数が途中で中断される挙動を調整。
0.6.0
2022-07-10
以下の機能を追加。
- Simple Grid ブロックの外側の余白
- Simple Sliderブロックのスクロール動作 (遷移時間、イージング)
Smple Grid ブロックのエディタ用 CSS のパスを修正。
Facebook Graph API のバージョンを v14.0 にアップデート。
0.5.0
2022-05-23
投稿画面で Instagram アカウントの連携が自動的に設定されないバグを修正。
WordPress 6.0 での動作確認完了。
0.4.0
2022-05-08
“Instagram Graph API” のアプリレビューに承認。
Graph API の認証処理のバグを修正。
ダークモードに対応。
0.3.1
2022-05-05
Business Dicovery を実装。
0.3.0
2022-04-28
Instagram Graph API の処理を追加。(自分のデータ取得のみ実装済み)
各ブロックの詳細設定を追加。
キャッシュのデータ構造を変更し、キャッシュデータを格納するキー (条件のハッシュ値) が衝突しても、他のデータが失われないように調整。
JS 用翻訳関数の読み込みタイミングを変更。
その他、細かいバグを修正。
0.2.4
2022-04-14
トークン生成ページを日本語に対応。
0.2.3
2022-04-11
バグを修正。
0.2.2
2022-04-11
Simple Grid ブロックにレスポンシブ設定を追加。
0.2.1
2022-04-11
フルサイト編集 (FSE) のためにすべての管理画面で管理用 Javascript を読み込むように変更。
Javascript 向けの翻訳関数を動作させるように wp_set_script_translations() 関数を呼び出すように初期化処理を変更。
0.2.0
2022-04-10
“Instagram Basic Display API” のアプリレビューに承認。
0.1.1
2022-04-09
WordPress プラグインディレクトリに公開
0.1.0
2022-04-07
初回リリース