ホームページ作成「グーペ」 トップ » ホームページ作成お役立ち記事» SNS活用» 効率アップ!Instagramの写真を自動でホームページに掲載する方法
  • カテゴリー: SNS活用
  • 2017年10月23日 月曜日

効率アップ!Instagramの写真を自動でホームページに掲載する方法

最近では、宣伝ツールとして「Instagram(インスタグラム)」を利用している方が非常に増えています。ホームページやブログなどのウェブサイトに、Instagramの最新画像を自動で表示できるような機能があれば、更新の手間がはぶけるので便利になりますよね。

そこで今回は「InstaWidget(インスタウィジェット)」という無料サービスをご紹介します!InstaWidgetを使えば、かんたんにInstagramの埋め込みができるんです◎

最終更新日:2018/01/11


「InstaWidget」について

InstaWidget」とは、ホームページやブログ、wordpressなどにInstagramのアルバムを追加することのできるブログパーツ(ウィジェット)です。

InstaWidgetの特徴

インスタウィジェットを挿入したホームページ

  • 最新の画像が、指定した枚数だけ一覧で表示される
  • Instagramを更新すれば、自動でウィジェット側も新しい画像が表示される
  • 利用にあたり、会員登録の必要がない
  • 完全無料のサービス
    ※2018/01/11 時点での情報になります。

気軽に利用できるのが魅力の「InstaWidget」。使い方はいたってカンタンで、グーペならパーツの追加作業で設置できます。
今回は、グーペで作成したホームページに「InstaWidget」を設置する方法をご紹介します。

「InstaWidget」側でタグを生成する方法

まずは「InstaWidget」にアクセスします。
無料インスタグラムブログパーツ作成をクリックして、作成画面に遷移してください。

インスタウィジェットのトップ画面

遷移すると、以下の画面が表示されます。タグの生成作業はこのページの中で完結します◎
ボタンの表示・非表示や枠や文字の色を変更することも可能ですので、自分の好みにカスタマイズすることができます。

インスタウィジェットのブログパーツ作成画面

基本編

ユーザー名の入力

インスタウィジェットのユーザー名入力画面

「InstaWidget」では、ハッシュタグでパーツを作成することも可能です。ハッシュタグの欄はハッシュタグでパーツを作成する場合に入力する項目なので、今回は空欄にします。

レイアウトの指定

インスタウィジェットのレイアウト指定画面

左側が横に表示する枚数、右側が縦に表示する枚数をさしています。
ここで数字を指定すると以下のように表示されます。

インスタウィジェットのレイアウト指定画面

コードを更新する

設定が完了したら、左下にあるプレビューを押します。すると右側のコードとプレビュー画面が更新されます。

インスタウィジェットのコード更新画面

コードを取得する

最後にコードを取得します。コードのところで右クリック→コピーします。「InstaWidget」を表示させたいホームページやブログにペーストします。

インスタウィジェットのコード取得画面

グーペに設定する方法はこちら

応用編

写真だけを表示する

各パーツを非表示にすると、写真だけが表示される状態になります。 まるでホームページやブログの機能を使っているかのように、ページに溶けこみます

インスタウィジェットのプレビュー画面

ユーザーアイコン、ユーザー紹介文、フォローボタン、フォロワーを非表示にし、ブログパーツ幅のpxを上げて調整しました。

インスタウィジェットの表示内容選択画面

写真を非表示にしてフォロー用ボタンとして使う

フォロー用のボタンとしてシンプルに使うことも可能です。

インスタウィジェットのフォロー用ボタン

写真アルバムという項目を非表示にすると、↑のような状態になります。

インスタウィジェットの設定画面

グーペに設定する方法

「ナビゲーション」をひらく

実際にグーペで作成したホームページに「InstaWidget」を設置してみましょう。
まずはグーペにログインし、サイドメニューからナビゲーションをクリックします。

グーペ管理画面

「パーツ追加」をひらく

ナビゲーションページの上部にあるパーツ追加という項目をクリックします。

グーペ管理画面のナビゲーションページ

開いたページの一番上にあるパーツの種類からウィジェットを選択します。

グーペ管理画面のパーツの種類選択ページ

コードを追加する

以下の項目を入力します。

  • パーツの名前 … 自分で管理しやすい名前をつけましょう。今回の場合は「インスタグラム」とします。
  • ソースコード … InstaWidgetで生成したコードを入力します。

グーペ管理画面のコード追加ページ

入力が完了したら追加を押して設定は完了です。

表示を確認する

管理画面の右上にあるホームページ表示を押して、表示を確認してみましょう。

ホームページにインスタウィジェットを挿入した時の表示

ウィジェットが表示される位置はテンプレートによって異ります
またウィジェットをたくさん使用した場合、ホームページの表示速度が遅くなる場合があります。SEOへの影響が気になる方は、ご注意ください。

埋め込んだ部分をクリックする

埋め込んだウィジェット内の見たい画像をクリックすると、以下のように「InstaWidget」内に生成されたページに遷移します。
※画像をクリックすると、「InstaWidget」内に生成されたグーペのページに遷移します。

インスタウィジェットをクリックした場合の表示

ページ内には、該当の画像とコメントやInstagramの投稿一覧、フォローボタン、広告などが表示されます。左側の大きな画像をクリックするとInstagramのページに遷移します。

Instagramの表示

まとめ:ホームページにInstagarmを表示する効果

会員登録不要・カスタマイズもカンタンにできる「InstaWidget」いかがでしたでしょうか。 他にも、APIを使って表示させる方法や、「Snap Widget」といった別のウィジェットサービスもありますが、「InstaWidget」が一番気軽に利用できるサービスかと思います。
Instagramのフォロワー数アップの効果も狙える便利な機能ですので、ぜひ活用してみてください!

またご紹介したように「グーペ」ならInstaWidgetもカンタンに設置できます。Instagramを埋め込んで、ワンランク上のホームページを作成しませんか?


その他の関連記事