JimdoとInstagramを連携してみよう

    JimdoとInstagramを連携してみよう

    【2020/02/13 一部修正】

    Jimdo ではさまざまな外部ツールと連携することができます。中でも、大人気の Instagram(インスタグラム)と連携して Jimdo 側にも表示させたいという要望を耳にします。今回は、Jimdo と Instagram の連携について解説します。Instagram に投稿した写真を Jimdo のホームページに自動的に表示させることができれば、ホームページに再度アップする手間が省けて、一度で多くの人に見てもらえる機会が作れます。ぜひやり方を覚えてくださいね。

     

     

    1. Jimdo と Instagram の連携について

    写真や動画を、共有できる Instagram(インスタグラム)は、年々ユーザー数を伸ばしている大人気の SNS アプリ。すでに使っている方も多いでしょう。Instagram にアップした写真を、Jimdo と連携して自動表示できることをご存じでしたか? Instagram フィード(POWr Instagram Feed)というツールを追加するこで、Jimdo 側に Instagram の投稿を表示させることができます。

    2. Instagram って何?どんなアプリ?

    すでにご存じの方も多いと思いますが、Instagram は、写真や動画を共有できる無料のアプリケーションです。芸能人や著名人も使用していて、スマートフォンの普及に伴い、爆発的にユーザー数が増えました。男性よりも女性ユーザーが多いのが、大きな特徴です。

     

    ■国内月間アクティブユーザー数の推移
    ■国内月間アクティブユーザー数の推移
    ■国内ユーザーの男女比
    ■国内ユーザーの男女比

     

    アプリを使って、スマートフォンから簡単に更新できる手軽さも魅力です。

     

    ※各グラフはそれぞれ、下記サイト様に掲載されているデータを元に作成しております。

    ・Instagram 国内月間アクティブユーザー数の推移について

     https://snsdays.com/instagram/active-user-count/

    ・国内ユーザーの男女比について

     https://www.it-comm.co.jp/media/201808161554.html

     

     

    3. 準備しよう

    Instagram と Jimdo を連携させるには、あらかじめ Instagram のアカウントを取っておく必要があります。

    https://www.instagram.com/ こちらのページから無料で登録できますので、まだアカウントがない場合は、準備しておきましょう。

    4. Jimdo の「Instagram フィード」を使ってみよう

    Jimdo には、Instagram を表示させるための機能がありません。Instagram フィード(POWr Instagram Feed)という外部のツールと連携させて使用します。Instagram フィード(POWr Instagram Feed)は英語版のみになっています。

     

    ここでは、英語が苦手な方も取り組めるよう、解説を入れながら紹介しますので、ぜひトライしてみてください。

     

     

    1) Jimdo サイトにログインし「コンテンツの追加」をクリック、「その他コンテンツ&アドオン」をクリックします。

    2)「Instagramフィード」をクリックします。

    3) 説明が書いた画面が表示されますので、「ここをクリックして表示されるコードをコピー」をクリックしましょう。

    4) コードが表示されますので、コピーします。

    5) コピーしたコードを、Jimdo の所定のエリアへ貼り付けて「保存」します。

    6)「Edit Instagram Feed」→「Edit on Live Site」をクリックします。

    7)縦長の編集画面が表示されます。これが、JimdoとInstagramを連携させる「POWr Instagram Feed」の画面です。この画面を使って、Instagramのアカウントを接続したり、投稿数や更新頻度を設定します。

    ※ POWr をご利用いただく場合は、事前にログインまたはご登録が必要です。ご登録の方法は下記を参照ください。

    POWr アカウント登録方法

    右上の丸いアイコンをクリックして、メールアドレスが表示されていない場合はログイン(またはアカウントの登録)ができていない状態です。そのため、下記の方法でログイン(またはアカウントの無料新規登録)を進めてください。

     

    (1)右上の丸いアイコンをクリックします。

    (2)[サインアウト]をクリックします。


    (3)すでに POWr のアカウントをお持ちの場合は、ログインをしてください。もしご登録がまだの場合は、無料登録をしましょう。

    ▼アカウントを持っている場合はログインをします。

    パスワードが不明な場合は、「パスワードを再設定する」より再設定ができます。

    ▼アカウントを持っていない場合は無料新規登録をします。

    「はじめに」のボタンから、アカウントの作成ができます。


    (4)「Create New plugin」をクリックします。

    (5)「Social Feed」をクリックします。


    5. POWr Instagram Feed」の設定をしよう

    (1)別ウィンドウで下記のような画面が表示されるので、「フィードを追加」をクリックして、Instagram のアカウント名を入力します。

     

    (2)「Connect」という画面が表示されています。

    デモ表示用のデータを削除しないと無料ではアカウントが接続できませんので、最初に「Clear Demo Data」をクリックしてデモ表示用の設定を削除しましょう。

    (3)デモ表示用の設定が削除できたら、ご自身の Instagram アカウントを接続します。「+ Add Feed」ボタンをクリックしましょう。



    (4)Social Feed Typeが「Instagram」になっていることを確認し、Following に Instagram のアカウントを入力します。

    必要があれば「Max posts to display」で、表示される投稿数を変更しましょう。特に変更がなければ「6」のままでOKです。

    ※6投稿以上表示させたい場合は、「POWr Instagram Feed」を有料版へアップグレードする必要がありますので、ご注意ください。

    (5)設定が終わったら「Done」をクリックします。


    (6)最初の画面に戻ります。「Next」ボタンをクリックしましょう。

    (7)更新頻度を設定できる画面が表示されます。ここでは「24 Hours」のままでOKです。「Next」ボタンをクリックしましょう。

    ※24 Hours以外を設定する場合は、「POWr Instagram Feed」を有料版へアップグレードする必要がありますので、ご注意ください。


    (8)「Design」の画面が表示されます。ここでは、Instagram投稿表示の体裁などを設定することができます。

    ①Layout & Size
    投稿の並び方や、画像の形状(横長、正方形など)、投稿サイズなどを設定できます。/td>
    ②Post Content Design
    投稿のフォントサイズやスタイルを変更できます。(一部の機能は有料版のみ)
    ③Post Footer
    投稿にフッター(投稿者のプロフィール)をつけるか選択できます。
    ④Border
    画像の周囲に表示される枠線の設定ができます。(一部の機能は有料版のみ)
    ⑤Advanced
    更に細かいスタイルの設定ができますが、有料版のみの機能です。

    【設定しなくても大丈夫!】

    上述の通り、Instagram を連携表示させたときの見栄えについて、細かい設定はできるのですが、初期状態で OK という場合は、設定せずに次の画面へ進んでも大丈夫です。


    (9)次に「Continue」をクリックします。

    (10)「POWr Instagram Feed」にログインします。ログインする方法は、① Facebook のアカウント② Google アカウント③メールアドレス+パスワードの3種類です。

    以前、「POWr Instagram Feed」に登録したことがある場合は、登録のときに使用した①~③のいずれかでログインしましょう。

    【「POWr Instagram Feed」を初めて利用し、かつ③メールアドレス+パスワードで登録する場合】

    初めて「POWr Instagram Feed」を使用し、かつメールアドレス+パスワードで登録した場合は、登録したメールアドレス宛に、確認メールが届きます。

    メール本文に記載されている「Confirm your account」をクリックし、メールアドレスを確定しましょう。


    (11)プランを選ぶ画面が表示されます。「Free」を選んで、「Select Plan」をクリックしましょう。

    (12)「Did you enjoy using Instagram Feed?」(インスタグラムを楽しんでいますか?)と表示されますので、「Not Really(いいえ)」か「Yes!(はい)」をクリックしてください。



    (13)「How about leaving a review?」と表示されますが、ここはスキップして次の画面へ進みましょう。

    (14)「POWr Instagram Feed」の設定が完了しました。



    6. Jimdo の画面へ戻って確認しよう

    Jimdo の画面へ戻って、「保存」ボタンをクリックします。

     

    このように、Instagram の投稿が表示されていれば成功です。

     

    以上で、Jimdo と Instagram の連携設定は完了です。投稿を楽しんでください!

    【関連記事】

    ・すでに Instagram フィードのプラグインを作成済みで、コードのみ取得したい場合

     https://jp-help.jimdo.com/instagram-feed/#cc-m-header-12490244390

     

    ・Instagram フィードの詳細設定を変更したい場合

     https://jp-help.jimdo.com/instagram-feed/#cc-m-header-12492371590

     

    Instagram と Jimdo の連携について解説しましたが、いかがでしたか?英語版ではありますが「POWr Instagram Feed」という無料のツールを使うことで、Instagram の投稿を自動で Jimdo に表示させることができます。特にハンドメイド作家、アーティスト、飲食店、アパレル、インテリア関連の業種にはおすすめです。

    Instagram を導入している方は、ぜひ連携してみてくださいね。

     

     

     

     

    コメントをお書きください

    コメント: 4
    • #1

      arayoh (金曜日, 07 2月 2020 12:50)

      各ページわかりやすく解説されており参考になります。ありがとうございます。
      さて、Instagram フィードの設定中ですが、デザインの設定画面で「Continue」(日本語化されているので「次」)が表示されず設定が進みません。メニュー「接続する」に戻ると「Elements」の右に赤字で「Freeプランで1 / 1が使用されています」の警告メッセージが表示されていました。吹き出しメッセージで「要素の限界に達しました」ということでアップグレードを求めているようです。この状態を解消するにはどうしたらよろしいでしょうか?
      なお、当方、Jimdo初心者でInstagram連携を施行するため、昨日Instagramに新規登録したばかりです。

    • #2

      ジンドゥー 下地 (木曜日, 13 2月 2020 16:22)

      > arayoh さま
      ご返信が遅れ申し訳ございません。
      おそらくですが、POWr にログインしていない状態で設定を進めているのではないかと思われます。

      そのため、事前に POWrのアカウントへログイン(または新規登録)を済ませたあとに手続きを進めると「次へ」で進むことが可能です。

      上記につきまして、記事に情報を追記いたしましたので、ご確認いただけると幸いです。

    • #3

      ヨウ (金曜日, 13 3月 2020 01:11)

      とても参考になりました!
      Instagramとの連携はできたのですが、最後のところに『POWrあなた自身のSocial feedを作成してくださいー無料で!』と出ているのは消せますか?

    • #4

      ジンドゥー 下地 (月曜日, 16 3月 2020 14:27)

      > ヨウさま
      コメントありがとうございます!
      POWr という外部サービスの有料版をご契約いただくと、最後の『POWrあなた自身のSocial feedを作成してくださいー無料で!』の文言を消すことができます。