グーペ・Ameba OwndにInstagramの投稿一覧を表示する方法｜外部パーツとHTMLブロック
グーペやAmeba Owndで作ったホームページに、Instagramの最新投稿を並べたい。どちらのサービスにもInstagram連携の機能はありますが、公式ヘルプを読むと、そのまま投稿一覧を出せる状態とは言いにくいのが実情です。グーペでは画像を呼び出す機能が2021年10月11日に終了し、今はリンクアイコンの表示だけになっています。Ameba Owndには「Instagramブロック」がありますが、ヘルプには画像が正常に表示されない不具合について「復旧のめどが立っておりません」と書かれています。この記事では、Social Feed by grip space のタグ1行を、グーペは外部パーツ「ウィジェット」、Ameba Owndは「HTMLブロック」に貼る手順を、それぞれの公式ヘルプの記載に沿って説明します。
更新日：2026年10月12日
先に結論
サイトにInstagramを載せる理由や全体の流れは、Instagramの投稿を自社サイトに埋め込む方法で説明しています。ここでは、グーペとAmeba Owndに固有の点に絞ります。
| グーペ | Ameba Ownd | |
|---|---|---|
| 標準のInstagram連携 | 画像の呼び出しは2021年10月11日に終了。現在はTOPページでのリンクアイコン表示のみ | Instagramページ / Instagramブロックがある。ただし画像の表示不具合が案内されている |
| タグを貼る場所(公式の名称) | 外部パーツの「ウィジェット」 | HTMLブロック |
| script が使えるかの公式の記載 | ソースコード欄に「<script>で始まる外部サービスのコード」と明記 | 記載なし |
| 表示される位置 | テンプレートによって異なる | ブロックを置いた位置 |
| プランの条件 | 商工会会員向けフリープランでは外部パーツが使えない | 今回確認したヘルプには記載なし |
| この記事の結論 | 外部パーツに貼れば表示できる見込みが高い | 貼れるが、動くかは公開後に確認が必要 |
準備: Social Feed by grip space でタグを用意する
- Social Feed by grip space にメールアドレスで登録します。フリープランでもウィジェットを1つ作れます。
- 管理画面で「＋ Instagramアカウントを連携」を押し、Instagramのプロアカウント(ビジネスかクリエイター)を連携します。個人アカウントのままでは連携できません。切り替え方はプロアカウントの記事をご覧ください。
- 「設定・プレビュー」で、グリッドかスライダー、表示件数、列数、クリック動作などを決めて「設定を保存」を押します。
- 「WEBサイトにタグを設置」の欄で「コピー」を押します。タグは次のような1行です。
<script type="text/javascript" src="https://n246.grip.space/api/v1/instagram/widget/xxxxxxxx"></script>このタグは iframe ではなく、置いた位置にそのまま一覧を描きます。
グーペ: 標準のInstagram連携で今できること
グーペのヘルプ「Instagram連携」には、Instagramの画像呼び出し(埋め込み)の機能は2021年10月11日をもって提供を終了し、現在の機能は「TOPページでのリンクアイコン表示のみ」と書かれています。連携は「管理メニュー」＞「各種設定」＞「外部サービス連携」から行いますが、これで出るのはInstagramへのリンクのアイコンで、投稿の写真ではありません。
また、以前よく使われていた外部のウィジェット「Instawidget」について、グーペのヘルプは2019年10月ごろから使用できなくなったと案内しています。設定したままだとスライドショーの画像が縦に並ぶことがあるため、残っている場合は削除するよう書かれています。
グーペ: 外部パーツ「ウィジェット」に貼る手順
グーペのヘルプ「外部パーツ機能について」では、ウィジェットのソースコード欄に入れるものとして「<iframe>や<script>で始まる外部サービスのコード」と明記されています。Social Feed by grip space のタグはまさにこの形なので、ここに貼るのが基本です。
- 管理者ページで「管理メニュー」＞「外部パーツ」を開きます。
- 「登録する」をクリックします。
- 「パーツの種類」で「ウィジェット」を選択します。
- 「タイトル」(必須)に、管理画面で見分けるための名前を入れます。例: 「Instagram一覧」。
- 「ソースコード」(必須)に、コピーしたタグを1行まるごと貼り付けます。
- 「表示設定」でホームページ上の表示を選び、「追加」をクリックします。
- 公開中のホームページを開き、一覧が出ているか確かめます。
ヘルプによると、外部パーツが表示される場所は、適用しているテンプレートによって異なります。例としてテンプレート「Vanilla」では、ウィジェットもバナーもホームページ下部(フッター付近)に出ると書かれています。複数のパーツは登録した順に並び、「表示中のパーツ」タブで並び順を変えられます。
横幅が狭い場所に出る場合は、スライダーか2〜3列にすると見やすくなります。
グーペ: ページの中の好きな位置に出したい場合
外部パーツの位置はテンプレートで決まるため、「トップページの説明文の下」のように位置を指定したい場合もあると思います。グーペのヘルプ「他社の予約フォームを埋め込みたい」には、外部パーツと同様の手順で、フリーページなどリッチエディタで作成できるコンテンツに「HTML入力」でコードを埋め込むことも可能、と書かれています。
- 「管理メニュー」＞「フリーページ」で、対象のページを開きます(新しく作る場合は「新規作成」)。
- エディタ右下の「編集モード」で「HTML入力」に切り替えるか、リッチエディタのまま「ソースコード」ボタンを押します。ヘルプによると、途中にHTMLを挿入したいときはソースコードボタンからモーダルウインドウで挿入できます。
- 一覧を出したい位置にタグを貼り、「更新」(新規の場合は「登録」)をクリックします。
- 公開中のページを開いて、表示を確かめます。
グーペ: 使えるプラン
グーペのプランは、ヘルプ「プランの種類を教えて」によると「ライト」と「スタンダード」の2つで、ほかに商工会会員向けのプランがあります。外部パーツが使えるかは、ヘルプ「商工会会員向けプラン-よくある質問(FAQ)」の比較表に、次のように書かれています。
| プラン | 外部パーツ | フリーページ | メモ |
|---|---|---|---|
| 商工会会員向けフリープラン | × | 3ページ | テンプレートのHTML/CSS編集も × |
| 商工会専用ドットコムプラン | ◯ | 10ページ | 比較表の「Xなどのウィジット埋め込み」は × |
| スタンダード | ◯ | 無制限 | 「Xなどのウィジット埋め込み」も ◯ |
| ライト | 今回確認したヘルプに記載なし | — | ご利用のプランをご確認ください |
商工会会員向けフリープランでは外部パーツが使えないため、このプランのままではタグを置く場所がありません。また、比較表には「Xなどのウィジット埋め込み」という別の行があり、商工会専用ドットコムプランでは × になっています。この行が具体的にどの操作を指すのかはヘルプに説明がないため、商工会専用ドットコムプランでフリーページに貼る方法を試す場合は、特に公開後の確認を丁寧に行ってください。新しく始める場合、グーペは登録日から15日間の無料おためし期間があるので、その間に表示を確かめられます。
Ameba Ownd: 標準のInstagramブロックについて
Ameba Owndには、Instagramの投稿を出すための標準機能が2つあります。どちらも、先にサイト管理画面の「設定」＞「ソーシャルメディア連携」でInstagramを連携して使います。
| 機能(公式の名称) | 使い方 | 設定できること |
|---|---|---|
| Instagramページ | 「ページ編集」でページを追加するときに「Instagram」を選ぶ | 「オプション」で表示件数とボタンテキスト。ボタンの非表示 |
| Instagramブロック | 既存のページに「Instagramブロック」を置き、ユーザーネームを選ぶ | 表示件数、ボタンテキスト、「プロフィールを非表示」「ボタンを非表示」 |
ただし、ヘルプ「Instagramページを追加する」には、Instagramの画像が正常に表示されない不具合を確認しており、「現在も復旧のめどが立っておりません」と書かれています。案内先のAmeba Owndブログ「【障害のお知らせ】Instagram画像の表示不具合に関しまして」は2020年10月26日付けで、「現在、調査を行なっている状況です」とあります。今日時点で実際にどう表示されるかは、お使いのサイトで確かめてください。
Ameba Ownd: HTMLブロックに貼る手順
標準のブロックで画像が出ない場合や、グリッドとスライダーの切り替え、拡大表示などを使いたい場合は、HTMLブロックにタグを貼ります。ヘルプ「ページにHTMLブロックを挿入する」の手順は次のとおりです。
- HTMLを挿入したいページを選択します。
- ブロックの一覧から「HTML」をクリックします。
- 移動できる「HTML」ブロックが表示されるので、挿入したい箇所にマウスを合わせてクリックします。
- 「HTMLを入力」部分をクリックし、灰色の点滅が出た状態で Ctrl キーと V キーを同時に押してタグを貼り付けます。ヘルプによると、HTMLブロックは右クリックでの貼り付けに対応していません。
- 【OK】をクリックします。
- 右上の「公開」または「更新」をクリックして完了です。
Ameba Ownd: 公開後に確かめること
- 編集画面ではなく、公開中のページをブラウザで開きます。シークレットウィンドウで開くと、訪問者と同じ状態で確かめられます。
- 一覧が出ているか、写真をクリックしたときの動作(拡大表示 / Instagramを開く / 何もしない)が設定どおりかを確かめます。
- 拡大表示にしている場合は、拡大した画像が画面いっぱいに出るかを見ます。HTMLブロックの枠の中に閉じ込められて小さく出る場合は、「クリック動作」を「Instagramを開く」に変えると使いやすくなります。
- スマートフォンでも表示を確かめます。
- しばらくしてから編集画面でHTMLブロックを開き直し、タグが
<scriptから</script>まで残っているかを見ます。
サイドバーに置きたい場合、ヘルプ「サイドバーをカスタマイズする」によると、サイドバーは「カスタマイズ」＞「サイドバー」から、ページ編集と同じようにブロックを配置して使います。ただし、サイドバー対応のデザインテーマでしか使えず、HTMLブロックを置けるかどうかは記載がありません。まずはページの中で動作を確かめてから試すのがおすすめです。
Ameba Ownd: 動かなかったときの選択肢
HTMLブロックで動かないことが分かった場合、Social Feed by grip space 側の設定では解決できません。写真が表示される状態なら標準のInstagramブロックを使うか、ボタンやテキストでプロフィールへのリンクを置く方法が確実です。それぞれの違いはホームページにInstagramを表示する3つの方法で比べています。フリープランのままウィジェットを削除すれば、費用はかかりません。
表示されないときの確認点(共通)
- 管理画面でウィジェットが「公開」になっているか確認します。「非公開」だとタグは何も表示しません。
- グーペの場合、外部パーツの「表示設定」が表示になっているか、「表示中のパーツ」タブに入っているかを見ます。
- 新しい投稿が出ない場合、フリープランではサイトへの反映が1日1回です。リール・期間・キーワードの絞り込みで隠れていないかも見てください。
- Instagramのパスワードを変えたあとなどに出なくなった場合は、管理画面の「Instagramアカウントを再連携」でつなぎ直します。
そのほかの原因はInstagramの埋め込みがサイトに表示されない原因と直し方にまとめています。なお、グーペのヘルプには、埋め込みは提供元が機能を中止すると表示されなくなる場合があり、表示されないときはまず提供元で状況を確認するよう書かれています。ウィジェットの表示で困ったときは、Social Feed by grip space 側にお問い合わせください。
よくある質問
Q. ページごとに違う投稿を出せますか?
A. ウィジェットを複数作り、キャプションのキーワードや期間の絞り込みを変えて、ページごとに別のタグを貼ります。作れる数はフリープランが1つ、ライトが3つまで、スタンダードは無制限です。詳しくは料金プランと複数のウィジェットを使い分ける方法をご覧ください。
Q. 「Powered by Social Feed」の表記は消せますか?
A. フリープランでは必ず入ります。ライト(月額1,200円・税込)以上で外せます。無料でできる範囲はフリープランの記事にまとめています。
Q. 他の人の投稿やハッシュタグの投稿も並べられますか?
A. できません。表示できるのは、連携した自分のアカウントの投稿だけです。
まとめ
グーペでは、外部パーツの「ウィジェット」にタグを1行貼るのが、公式ヘルプに script の記載がある確実な方法です。ただし商工会会員向けフリープランでは外部パーツが使えません。Ameba Owndでは、HTMLブロックに貼れますが、script が動くかは公式に書かれていないため、公開後に必ず確かめてください。まずはSocial Feed by grip spaceのフリープランで、表示を試してみてください。
参考にした資料
グーペ ヘルプ: 外部パーツ機能について
グーペ ヘルプ: Instagram連携
グーペ ヘルプ: スライドショーの画像が縦に並んでしまいました。
グーペ ヘルプ: 他社の予約フォームを埋め込みたい
グーペ ヘルプ: 簡易入力エディタ(リッチエディタ)の使い方
グーペ ヘルプ: フリーページについて
グーペ ヘルプ: プランの種類を教えて
グーペ ヘルプ: 商工会会員向けプラン-よくある質問(FAQ)
グーペ ヘルプ: 有料プランから商工会プラン(フリープラン)への変更で利用できなくなる機能
グーペ ヘルプ: 無料おためし期間について教えて
Ameba Ownd Help: ページにHTMLブロックを挿入する
Ameba Ownd Help: ページにInstagramブロックを挿入する
Ameba Ownd Help: Instagramページを追加する
Ameba Ownd Help: ソーシャルメディア(SNS)連携設定をする
Ameba Ownd Help: サイドバーをカスタマイズする
Ameba Ownd Blog: 【障害のお知らせ】Instagram画像の表示不具合に関しまして
