Jimdo(ジンドゥー)にInstagramを埋め込む（POWR経由）
記事IT・テクノロジー
2020年春以前にJimdoでホームページをお作りになった方で、POWR.ioを経由したInstagramフィードが表示されなくなってしまったとお困りの方が多いようです。
ジンドゥー公式サイトでも一応説明はしているのですが、外部サービスPOWR.ioの設定についてはわかりにくいですね。
この記事に、ジンドゥークリエイターで作ったサイトにInstagramフィードを埋め込む手順を記録しておきます。（PC作業、2022年10月時点の情報です）ご参考になれば幸いです。
（ちなみに、ジンドゥーAIビルダーでは"スマートアプリ"というブロックでInstagramの個別の投稿を表示できますが、フィード表示はできません）
０．最初に
POWR.ioは無料でも使えるアプリですが、Instagramフィードを使用するに当たり90日毎にInstagramへのアクセス許可が必要になります。
90日毎にPOWR.ioから以下のようなメールが届きましたら、Instagramにログインした状態でメール内のボタンをクリックすれば、アクセス許可は完了です。
手順は大まかに言うと、以下の３ステップになります。
１．POWR.ioにアカウント登録
２．POWR.ioでInstagramフィードのコードを生成
３．Jimdoの編集画面で、Instagramフィードコンテンツにコードを貼り付け
既にPOWR.ioのアカウント登録がお済みの方は、２．から進めて下さい。
１．POWR.ioにアカウント登録
「powr.io」と検索し、powr.io サイトを表示します。
英語が苦手な方は右上で「日本人」を選択後、「はじめに」をクリックします。
Facebookアカウント/Googleアカウント/メール＆パスワードのいずれかで無料でアカウントを作成します。
POWR.ioから確認メールが届きますが、メール内の確認ボタンを押す前からPOWR.ioの設定が可能になります。
２．POWR.ioでInstagramフィードのコードを生成
POWR.ioにログイン直後のダッシュボードで「＋新しいアプリを作成」をクリックします。
アプリライブラリの画面へ遷移します。
使用できるアプリが並んでいますので、「Instagram Feed」を探します。
検索ウィンドウで「Inst…」と打ち込むと見つけやすいです。
「Instagram Feed」にマウスを置くと表示が変わるので「アプリを取得」をクリックします。
Welcome…のウィンドウが表示されたら「Got it!」をクリックします。
ちなみにこのウィンドウでは、POWR.ioの使用方法を説明しています。
・左のエディターを使って、アプリに要素やコンテンツを追加します
・デザインパネルを使って、アプリをカスタマイズすることができます
・編集が終わったら、「Publish」をクリックして、あなたのウェブサイトにインストールしてください
というような事が書かれています。
編集画面が開きましたら左側にある「＋Add Feed」をクリックします。
一番上のセレクターで「Instagram」を選択すると、その下の表示が変わります。
接続先をInstagramロゴの「Post Only」をクリック、
最後に「Continue with Instagram」をクリックします。
別ウィンドウでログイン画面が開きますので、Instagramへログインします。
この後「ログイン情報をブラウザに登録しますか？」などという画面が出ましたら、お好みで選択してください。
つづいて、Instagramの情報をPOWRへ共有しますか？という内容の確認画面が表示されましたら「許可する」をクリックして下さい。ここで「許可しない」を選ぶとInstagram Feedは使用できません。
POWRとInstagramの連携が成功すると、編集画面の右側にInstagramの最新の投稿が表示されます。
右下にウィンドウが立ち上がったら「✕」で閉じてもOKです。ご意見をお聞かせ下さいといった事が書かれています。
左側の一番下の数字を変更すると、投稿の表示数を選べます。表示数が決定したら「Done」をクリックします。
この表示の状態でよければ、編集画面の上にある「Publish」をクリックします。４つ先の手順「Find Your Plattform」という画面が表示された説明まで進んで下さい。
この先の手順は表示のカスタマイズ方法になります。
「Content」タブをクリックすると、Instagramフィードにタイトルを付けられます。タイトルのフォントは「Design」タブで変更可能です。
紫の★がついている箇所は有料の機能です。
「Design」タブをクリックすると、フォントや文字サイズ、色など様々変更することができます。いろいろと試してみて下さい。
よく使うのは、投稿の本文を表示するかどうかが選べる「Captions」です。
「Enable Captions」をオンにすると、文字サイズ、文字色、左寄せにしたり、背景色、日付の表示形式（アメリカ式かヨーロッパ式かのみ選択可）も変更できます。
紫の★がついている箇所は有料の機能です。
表示デザインが決定したら「Done」をクリックします。
この表示設定で問題なければ、編集画面の上にある「Publish」をクリックします。
「Find Your Plattform」と表示された画面になりましたら、フィードを埋め込む先のアプリとして「Jimdo」をクリックします。
見つからない場合は検索ウィンドで「Jimdo」と入力すると見つかりやすくなります。
フィードを埋め込むためのコードが自動で生成されましたので「Copy Code」をクリックします。
これでPOWRでの作業は終わりです。Jimdoの編集画面へ移ってください。
ここでPOWRの画面を閉じてもかまいませんが、間違ってコピーしたはずのコードを消してしまこともあるので、埋め込みが終わるまで開いておくことをおすすめします。
３．Jimdoの編集画面で、Instagramフィードコンテンツにコードを貼り付け
コンテンツを追加のメニューから「…その他のコンテンツ＆アドオン」をクリックします。
「Instagramフィード」をクリックします。
下のスペースに、POWR.ioでコピーしたコードを貼り付け「保存」をクリックします。
ホームページにInstagramフィードが表示されれば成功です。
以上で作業は完了です。
下の「POWRあなた自身の〜」とある部分は、POWR.ioの有料プランを契約すると消すことができます。
シャルコウェブデザインでは、Jimdoサイトの修正、ご相談、リニューアルを承っております。まずはお気軽にメッセージ下さい。
どうぞよろしくお願いいたします。
