Jimdo(ジンドゥー)にインスタの投稿一覧は載せられる?｜クリエイターとAIビルダーの違い

結論: クリエイターは貼れる、AIビルダーは貼れない

サイトにInstagramを載せる理由や全体の流れは、Instagramの投稿を自社サイトに埋め込む方法で説明しています。ここでは、Jimdoならではの「どちらのサービスか」という点に絞ります。

AIビルダー側のヘルプ「AIビルダーで対応していない機能について」では、AIビルダーとクリエイターは異なるサービスで、使える機能が違うと説明されています。クリエイターの特徴として「HTMLコードの埋め込みによる細かく作りこめる」ことが挙げられ、AIビルダーで対応していない例として「HTMLの編集ができない(埋め込みができない)」が並んでいます。

どちらを使っているかの見分け方

Jimdoの公式ヘルプには、見分ける手がかりがいくつか書かれています。いちばん簡単なのは、Jimdoのサブドメインを見る方法です。

独自ドメインでサブドメインが分からない場合は、ダッシュボードや編集画面の上部の表示で確かめてください。

準備: Social Feed by grip space でタグを用意する

1. Social Feed by grip space にメールアドレスで登録します。フリープランでもウィジェットを1つ作れます。
2. 管理画面で「＋ Instagramアカウントを連携」を押し、Instagramのプロアカウント(ビジネスかクリエイター)を連携します。個人アカウントのままでは連携できません。切り替え方はプロアカウントの記事をご覧ください。
3. 「設定・プレビュー」で、グリッドかスライダー、表示件数、列数、クリック動作などを決めて「設定を保存」を押します。
4. 「WEBサイトにタグを設置」の欄で「コピー」を押します。タグは次のような1行です。

<script type="text/javascript" src="https://n246.grip.space/api/v1/instagram/widget/xxxxxxxx"></script>

タグは一度貼れば、あとは管理画面で設定を変えるだけで見た目が変わります。

クリエイターで「ウィジェット / HTML」に貼る手順

Jimdoのヘルプ「ウィジェット / HTML」に書かれている手順に沿って進めます。

1. ジンドゥーアカウントにログインして、ホームページを選択します。
2. 「編集」をクリックして、クリエイターサイトの編集画面に移ります。
3. Instagramの投稿を出したいページの、コンテンツエリア内で「コンテンツを追加」→「その他のコンテンツ & アドオン」をクリックします。
4. 「ウィジェット / HTML」を選択して、ホームページに追加します。
5. 追加した「ウィジェット / HTML コンテンツ」を開き、コピーしたタグを貼り付けます。
6. 「保存」をクリックします。正しく表示されない場合は、ヘルプにあるとおりブラウザのページを再読み込みしてください。
7. 右上のプレビューボタン(モニターのマーク)を押して、訪問者から見た表示を確かめます。

ヘルプによると、コードを追加したときに「/* <![CDATA[ */」「/* ]]> */」のようなコメントが自動で入ることがありますが、ジンドゥーの仕様で、動作や表示には影響しません。貼り直す必要はありません。

見出しを付けたい場合は、「ウィジェット / HTML」の上に通常の見出しのコンテンツを置くと、テンプレートの文字の雰囲気に合わせられます。ウィジェット側の「アカウント情報を表示」をオンにすれば、アイコン・アカウント名・フォローボタンも一覧の上に出せます。

貼る場所の選び方(コンテンツエリアとサイドバー)

クリエイターの公式ヘルプ「独自のコードの使用」には、コードを入れられる場所が4つ挙げられています。Instagramの一覧を出すのに向いているのは、「ウィジェット / HTML コンテンツ」だけです。

すべてのページに出したい場合は、サイドバーが便利です。クリエイターのヘルプ「各ページに同じコンテンツが表示される」によると、サイドバーに追加したコンテンツは全ページに表示され、ソーシャルメディアへのリンクなどを載せるのに向いている、と説明されています。サイドバーはレイアウトによって左右または下に出ます。横に出るレイアウトでは幅が狭くなるので、スライダーか2〜3列にしてください(1枚が100pxを下回る幅では、列数が自動で減ります)。置き場所の考え方は、ホームページにInstagramを表示する3つの方法も参考にしてください。

スマホの表示とワイド表示

クリエイターのヘルプ「モバイル端末でのクリエイターサイトの表示」によると、クリエイターのレイアウトは閲覧者の端末に自動で最適化されます。プレビュー画面では「デスクトップ・プレビュー」と、縦向き・横向きのモバイルプレビューを切り替えられるので、ウィジェットを置いたら両方で確かめてください。

また、クリエイターには、ホームページを画面全体の幅で表示する「ワイド表示」があります(メニューの「デザイン」→「スタイル」)。ヘルプには、独自に追加したコードを使っているホームページでは、ワイド表示が意図どおりに動かない場合があるので、有効にしたあとは全ページを確認するよう書かれています。一覧の横幅が広がりすぎる場合は、ウィジェット側の「ウィジェット幅(px)」で最大幅を決めると、その幅で中央に置かれます。

Jimdo標準の「Instagram フィード」との違い

クリエイターには、「コンテンツを追加」→「その他のコンテンツ & アドオン」から選べる「Instagram フィード」もあります。公式ヘルプによると、これはサードパーティーの POWr 社が提供するもので、まず POWr への登録から始め、Instagramを接続する流れです。どちらが合うかは、次の違いで考えてください。

ハッシュタグで集めた他の人の投稿を見せたい場合は、Social Feed by grip space ではできません。自分の投稿の一覧を、グリッドかスライダーで見せたい場合に向いています。POWr の料金や機能の詳細は、POWr 側でご確認ください。

AIビルダーを使っている場合にできること

AIビルダーでは、Social Feed by grip space のタグは貼れません。そのうえで、現実的な選択肢は次の3つです。

1. スマートアプリブロックで投稿を1件ずつ載せる。AIビルダーのヘルプには、スマートアプリブロックにコンテンツのURLを貼るだけで、Instagram の投稿などをホームページに表示できると書かれています。投稿の「共有」ボタンからURLを取得し、投稿が非公開になっていないかも確認するよう案内されています。ブロックは「＋ ブロックを追加」から追加します。ただし、これは選んだ投稿を載せる仕組みで、新しい投稿が自動で増えていく一覧ではありません。
2. Instagramへのリンクを置く。ボタンやテキストのリンクでプロフィールへ案内します。手間はかかりませんが、サイトの中で写真は見せられません。
3. クリエイターでサイトを作る。公式ヘルプの「AIビルダーとクリエイターの選び方」では、カスタムコードを追加したい場合はクリエイターが最適と案内されています。どちらも無料プランから試せます。ただし、クリエイターからAIビルダーへの切り替えについては「コンテンツをそのまま移すことはできません」と書かれています。AIビルダーのコンテンツをクリエイターへ移す方法は、今回確認したヘルプには見当たりませんでした。新しく作り直す前提で考えてください。

3つの方法の違い(1件ずつの埋め込み・リンク・自動で更新される一覧)は、ホームページにInstagramを表示する3つの方法で詳しく比べています。

表示されないときの確認点

1. 管理画面でウィジェットが「公開」になっているか確認します。「非公開」だとタグは何も表示しません。
2. 「ウィジェット / HTML」を開き、タグが <script から </script> まで1行まるごと入っているか確認します。
3. 「ヘッダー編集」に貼っていないか確認します。head に入れたものは画面に出ません。
4. 保存後に出ない場合は、ヘルプにあるとおりブラウザを再読み込みします。Jimdoのヘルプ「ウェブサイトが正しく動作しない、または正しく表示されない」には、シークレットモードで確かめる、広告ブロッカーなどの拡張機能を無効にする、といった切り分けの方法も載っています。
5. 新しい投稿が出ない場合、フリープランではサイトへの反映が1日1回です。リール・期間・キーワードの絞り込みで隠れていないかも見てください。
6. Instagramのパスワードを変えたあとなどに出なくなった場合は、管理画面の「Instagramアカウントを再連携」でつなぎ直します。

そのほかの原因はInstagramの埋め込みがサイトに表示されない原因と直し方にまとめています。なお、Jimdoのヘルプには、お客様が独自で作成・使用しているコードはサポート対象外と書かれています。ウィジェットの表示で困ったときは、Social Feed by grip space 側にお問い合わせください。

よくある質問

Q. クリエイター Free でも「ウィジェット / HTML」は使えますか?
A. 今回確認したJimdoのヘルプ「ウィジェット / HTML」には、プランの条件は書かれていませんでした。編集画面に見当たらない場合は、ご利用のプランをご確認ください。

Q. ページごとに違う投稿を出せますか?
A. ウィジェットを複数作り、キャプションのキーワードや期間の絞り込みを変えて、ページごとに別のタグを貼ります。作れる数はフリープランが1つ、ライトが3つまで、スタンダードは無制限です。詳しくは料金プランをご覧ください。

Q. 「Powered by Social Feed」の表記は消せますか?
A. フリープランでは必ず入ります。ライト(月額1,200円・税込)以上で外せます。無料でできる範囲はフリープランの記事にまとめています。

Q. 投稿をクリックしたらどうなりますか?
A. 「クリック動作」で「拡大表示」「Instagramを開く」「何もしない」から選べます。拡大表示ではキャプションといいね数を出せ、カルーセルは全枚数を送れます。

まとめ

Jimdoにインスタの投稿一覧を載せられるのは、クリエイター(jimdofree.com)のほうです。「コンテンツを追加」→「その他のコンテンツ & アドオン」→「ウィジェット / HTML」にタグを1行貼り、プレビューで確かめれば完了です。AIビルダー(jimdosite.com)では埋め込みができないため、スマートアプリブロックで投稿を1件ずつ載せるか、リンクで案内することになります。まずはSocial Feed by grip spaceのフリープランで試してみてください。

参考にした資料

Jimdo AIビルダー ヘルプ: AIビルダーで対応していない機能について
Jimdo AIビルダー ヘルプ: AIビルダーとクリエイターの選び方
Jimdo AIビルダー ヘルプ: AI ビルダーのホームページで使えるブロックの種類
Jimdo AIビルダー ヘルプ: スマートアプリブロックの URL はどこから取得するの?
Jimdo クリエイター ヘルプ: 独自のコードの使用
Jimdo クリエイター ヘルプ: ウィジェット / HTML
Jimdo クリエイター ヘルプ: Instagram フィードの追加
Jimdo クリエイター ヘルプ: 各ページに同じコンテンツが表示される
Jimdo クリエイター ヘルプ: 編集画面とプレビュー画面の切り替え
Jimdo クリエイター ヘルプ: 非公開の状態でホームページを編集する
Jimdo クリエイター ヘルプ: モバイル端末でのクリエイターサイトの表示
Jimdo クリエイター ヘルプ: コンテンツのワイド表示を設定する
Jimdo クリエイター ヘルプ: クリエイタープランと追加機能の名称が新しくなりました
Jimdo クリエイター ヘルプ: AI ビルダーサイトへの切り替え
Jimdo クリエイター ヘルプ: ウェブサイトが正しく動作しない、または正しく表示されない