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

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

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

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

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

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

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

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

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

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

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

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

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

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

WordPressにInstagramを埋め込むには

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1カラム：

2カラム：

3カラム：

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

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

まとめ

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

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

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

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