効率アップ！Instagramの写真を自動でホームページに掲載する方法
最近では、宣伝ツールとして「Instagram（インスタグラム）」を利用している方が非常に増えています。ホームページやブログに、Instagramの最新画像を自動で表示できるような機能があれば、更新の手間がはぶけるので更に便利になりますよね。
そこで今回は「InstaWidget（インスタウィジェット）」という無料サービスをご紹介します！InstaWidgetを使えば、かんたんにInstagramの埋め込みができるんです◎
「InstaWidget」について
「InstaWidget」とは、ホームページやブログ、wordpressなどにInstagramのアルバムを追加することのできるブログパーツ（ウィジェット）です。
InstaWidgetの特徴
- 最新の画像が、指定した枚数だけ一覧で表示される
- Instagramを更新すれば、自動でウィジェット側も新しい画像が表示される
- 利用にあたり、会員登録の必要がない
- 完全無料のサービス
※2017/10/18 時点での情報になります。
気軽に利用できるのが魅力の「InstaWidget」。グーペならパーツの追加作業で、とてもカンタンに設置できます。
今回は、グーペで作成したホームページに「InstaWidget」を設置する方法をご紹介します。
「InstaWidget」側でタグを生成する方法
まずは「InstaWidget」にアクセスします。
無料インスタグラムブログパーツ作成をクリックして、作成画面に遷移してください。
遷移すると、以下の画面が表示されます。タグの生成作業はこのページの中で完結します◎
ボタンの表示・非表示や枠や文字の色を変更することも可能ですので、自分の好みにカスタマイズすることができます。
基本編
ユーザー名の入力
「InstaWidget」では、ハッシュタグでパーツを作成することも可能です。ハッシュタグの欄はハッシュタグでパーツを作成する場合に入力する項目なので、今回は空欄にします。
レイアウトの指定
左側が横に表示する枚数、右側が縦に表示する枚数をさしています。
ここで数字を指定すると以下のように表示されます。
コードを更新する
設定が完了したら、左下にあるプレビューを押します。すると右側のコードとプレビュー画面が更新されます。
コードを取得する
最後にコードを取得します。コードのところで右クリック→コピーします。「InstaWidget」を表示させたいホームページやブログにペーストします。
応用編
写真だけを表示する
各パーツを非表示にすると、写真だけが表示される状態になります。 まるでホームページやブログの機能を使っているかのように、ページに溶けこみます。
ユーザーアイコン、ユーザー紹介文、フォローボタン、フォロワーを非表示にし、ブログパーツ幅のpxを上げて調整しました。
写真を非表示にしてフォロー用ボタンとして使う
フォロー用のボタンとしてシンプルに使うことも可能です。
写真アルバムという項目を非表示にすると、↑のような状態になります。
グーペに設定する方法
「ナビゲーション」をひらく
実際にグーペで作成したホームページに「InstaWidget」を設置してみましょう。
まずはグーペにログインし、サイドメニューからナビゲーションをクリックします。
「パーツ追加」をひらく
ナビゲーションページの上部にあるパーツ追加という項目をクリックします。
開いたページの一番上にあるパーツの種類からウィジェットを選択します。
コードを追加する
以下の項目を入力します。
- パーツの名前 … 自分で管理しやすい名前をつけましょう。今回の場合は「インスタグラム」とします。
- ソースコード … InstaWidgetで生成したコードを入力します。
入力が完了したら追加を押して設定は完了です。
表示を確認する
管理画面の右上にあるホームページ表示を押して、表示を確認してみましょう。
ウィジェットが表示される位置はテンプレートによって異ります。
またウィジェットをたくさん使用した場合、ホームページの表示速度が遅くなる場合があります。SEOへの影響が気になる方は、ご注意ください。
まとめ
会員登録不要・カスタマイズもかんたんにできる「InstaWidget」いかがでしたでしょうか。
Instagramのフォロワー数アップの効果も狙える便利な機能ですので、ぜひ活用してみてください！
その他の関連記事
-
効率アップ！Instagramの写真を自動でホームページに掲載する方法
最近では、宣伝ツールとして「Instagram（インスタグラム）」を利用している方が非常に... -
すぐにチェックできる◎お気に入りのサイトをホーム画面に追加する方法（iPh...
定期的に見るウェブサイトを、どうやって管理していますか？ 多くの方がブックマークして管理し... -
「お役立ち記事」からうまれたメルマガのバックナンバーをご紹介！
2017年6月より、この「お役立ち記事」をきっかけに、ホームページ作成のヒントをお届けする... -
なめらかな動きのテンプレート「Smooth」をご利用のホームページ７選
こんにちは。グーペ運営チームです。 飲食店やヘアサロン、リラクゼーションのホームページから... -
休みの日も自動でツイート！Twitterで予約投稿する方法
Twitter（ツイッター）を積極的に動かしたいとなると、忙しい時やオフの日にもツイートし... -
グーペのウィジェット機能で「LINEボタン」を表示する方法
「グーペ」のLINE連携機能では、ホームページに「LINEで送るボタン」や「LINE@の友...
