インスタグラムのタイムラインをWordPressに埋め込むプラグイン

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

こんにちは、Hitomiです!
最近、インスタグラム始めました(遅い 笑)

自分の感覚でどんどん写真をアップできるので、けっこうハマっています。

見栄えも良いのでWebサイトに表示させていな、と思い
検索をしてみると、けっこう色々な方法がありました。

今回はそのなかでも1番簡単で、かつかっこよく
Webサイトにインスタグラムを埋め込む方法をご紹介していきます!

今や多くの若者はInstagramでコミュニケーションをとる

SNSでご自分の日常生活や本音を発信する風習が一般的になる一方で、
TwitterやFacebookで他人の動向を見ることにストレスを感じるひとも多いですね。

Twitterでなにげなく発言したことが、晒されたり、炎上したり、
批判の対象になっている方々を見ると
なんとも言えない息苦しさを覚えてしまいます。

しかしこのInstagramというアプリは、基本的には写真を投稿するだけという
非常にシンプルな発想で人気を読んでいるアプリです。

最近の若者は、TwitterやFacebookではなく
Instagramを日常的に使用するようになっていることが分かっています。

私もあまり上手にSNSを使いこなせるタイプではないのですが、
『写真』というツールは、芸術でもあり、自己表現であり、
非常に見るものの心を打つ仕組みになっているなあ、と感じました。

あまり言葉がないので、サクサク見れるのも良いですよね。

後発中の後発組ですが、数日前からInstagramを始めて、
『シンプルだし、すごくおもしろいな〜』と思い度々更新しています。

良かったらぜひフォローしてください^^

WordPressにInstagramを埋め込むには

予想以上にInstagramが良かったので、
WordPressの当サイトのサイドバーかなんかに埋め込みたいなと。

色々と調べてみると、当然ながら様々なツールやプラグインが紹介されていました。

そこで今回は、とても簡単に
WebサイトにInstagramを埋め込むためのプラグインと、
その使い方、設定方法、設置方法をご紹介していきます。

『Instagram フィード』を使った埋め込み方法

Instagram フィードをインストール→設定

まず、今回はプラグインを使った埋め込み方法を解説します。

ダッシュボードから『プラグイン新規追加』と進んでいただき、
Instagram フィード』と検索をかけてください。

インスタグラム、Wordpress、webサイト、埋め込み、方法、プラグイン、使い方

こちらをインストール→有効化しておきます。

参考:WordPressにプラグインをインストールする方法

有効化が完了すると、ダッシュボードメニュー内に
Instagram Feed』という項目が追加されます。

こちらをクリックしてください。

インスタグラム、Wordpress、webサイト、埋め込み、方法、プラグイン、使い方

 

次に、下記の画像のように、
Instagram|Log in and Access Token and User ID』をクリック。

インスタグラム、Wordpress、webサイト、埋め込み、方法、プラグイン、使い方

 

続いて、以下のウィンドウが連続して出現します。
ログインAuthorize』と進みます。

 

インスタグラム、Wordpress、webサイト、埋め込み、方法、プラグイン、使い方

インスタグラム、Wordpress、webサイト、埋め込み、方法、プラグイン、使い方

 

下の画像のように、
『Access Token』をコピーし、下の『Access Token』に貼り付け、
『User ID』をコピーして、下の『User ID』というところに貼り付けます。

ここまでできたら、最下部の『変更を保存』を押してください。

インスタグラム、Wordpress、webサイト、埋め込み、方法、プラグイン、使い方

 

これで、プラグイン側の設定は以上です。

続いては設定済みのプラグインをサイトに設置する方法です。

Instagram フィードを使ってWebサイトに埋め込む

ここまでできたら、
別タブの『3, Display Your Feed』をクリックします。

インスタグラム、Wordpress、webサイト、埋め込み、方法、プラグイン、使い方

 

英字がズラ~ッと並んでいて、一瞬くらっとしますが(笑)
今回使うのは、下の赤枠の部分だけです。

こちらをコピーしておいてくださいね。

インスタグラム、Wordpress、webサイト、埋め込み、方法、プラグイン、使い方

 

さて、ここまでできたら次は固定ページで作成してみましょう。

ダッシュボードから『固定ページ新規追加』、
タイトルをつけ、テキストエディタを開きます。

そこへ先程コピーしたタグをペースト。
下の画像のようになっていたらOKです!

インスタグラム、Wordpress、webサイト、埋め込み、方法、プラグイン、使い方

 

この状態で一度プレビューしてみると…
できていますね〜。プラグインってすごい。

インスタグラム、Wordpress、webサイト、埋め込み、方法、プラグイン、使い方

 

これはこのままで一旦保存をしておいて…

続いては、Instagramフィードを使って
サイドバーにInstagramのタイムラインを表示させてみましょう

まずいつもどおり、
外観ウィジェット』からテキストを選び、
テキストボックスのなかで先程のタグをペースト。

インスタグラム、Wordpress、webサイト、埋め込み、方法、プラグイン、使い方

インスタグラム、Wordpress、webサイト、埋め込み、方法、プラグイン、使い方

 

保存』を押すだけでもうサイドバーに組込み完了です!

 インスタグラム、Wordpress、webサイト、埋め込み、方法、プラグイン、使い方

 

写真表示のカラム数を変更する方法

上のようにしていただくと、
綺麗にサイドバー上にInstagramのタイムラインが並ぶようになります。

サイトが彩る感じがすごく良いですね。

追記になりますが、
写真の配列を変えたいときの方法も解説いたします。

先程のタグはデフォルトの形なので、
カラム数を変えたいときには以下のようにしてください。

1カラム:

2カラム:

3カラム:

 

こうすることによって、
写真の配列をお好きなように変更してみてください。

ちなみに、当サイトでは3カラム配列にしてあります。

インスタグラム、Wordpress、webサイト、埋め込み、方法、プラグイン、使い方

インスタグラム、Wordpress、webサイト、埋め込み、方法、プラグイン、使い方

 

まとめ

今回は『Instagram フィード』を使って、
Webサイトにインスタグラムのタイムラインを表示させる方法を解説いたしました。

ご覧いただけました通り、
プラグインのインストールアカウント認証タグ挿入
という手軽なステップで完成させることができました。

写真というものは、そのかたの感性が現れますので、
情報発信ビジネスにおいても有効かもしれませんね。

ぜひ、お試しいただければと思います^^

無料メールマガジン

画像の説明

公開日:2016/07/16
最終更新日:2016/09/21

SNSでもご購読できます。

コメント

  1. masahiro より:

    ランキングから来ました。
    すっごく勉強になりました。
    ありがとうございます、感謝です!!

    1. Hitomi Hitomi より:

      masahiro様

      こちらこそありがとうございます。
      今後ともどうぞ宜しくお願いいたします。Hitomi

      1. Jacie より:

        Stay inrmaoftive, San Diego, yeah boy!

  2. saorich より:

    初めまして。ブログランキングからきました。
    インスタグラムはよく聞くし、やってみたいとも
    思っているのですが、よくわからない、、、
    それだけでほったらかしていました。

    でも、ワードプレスに埋め込みができたり、
    こちらの記事で細かい手順がありましたので、
    とても理解しやすかったです。

    まだ、ワードプレスを自分で使いこなすところ
    まで行ってませんが、将来的に使いたいです。
    また勉強をしに訪問させてください!
    応援して帰ります。

    1. Hitomi Hitomi より:

      saorichi様

      こんにちは、Hitomiです。
      ご丁寧にコメントいただきありがとうございます。

      はい、Wordpressを開設することがありましたら、ぜひやってみてくださいね。なにか分からないことがあればメッセージください。

      今後共当サイトをどうぞ宜しくお願い致します。Hitomi

コメントを残す