プラグイン

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

こんにちは、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サイトにインスタグラムのタイムラインを表示させる方法を解説いたしました。

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

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

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

画像の説明

関連記事

  1. Youtube動画、集客、収益化、YoutubeAddsPro、使い方、解説

    YouTube

    Youtube動画からの集客と収益化に活用したい!YoutubeAddsProの魅力

    今や、インターネットビジネスにおいてYoutubeは欠かせません。…

  2. XML Sitemaps、使い方、Search Console

    ツール

    XML Sitemapsの使い方とSearch Consoleとの紐付け方法を解説

    Googleが提供する無料プラグイン『Google XML Sitem…

  3. Twitter、WordTwit、設定方法

    プラグイン

    記事とTwitterを連携させるプラグインWordTwitの使い方と設定方法

    Wordpressに記事を投稿した際、自動的にTwitterに連携し記…

  4. All in One SEO Pack、設定方法、使い方

    SEO

    All in One SEO Packの導入&設定方法と記事投稿時の使い方を解説

    Wordpressでサイトを運営していく際導入すべきプラグインとして、…

  5. Newpost Catch、サイドバー、最新記事

    プラグイン

    Newpost Catchでサイドバーに最新記事を画像付きで表示させる方法

    画像付きでサイドバーに最新投稿記事を表示させるプラグインのなかで最もオ…

  6. Wordpress Related Posts、設定方法、設置位置

    プラグイン

    WordPress Related Postsで関連記事を表示させよう|設定方法と設置位置を解説

    あなたのサイト訪問者が記事を読んだ際に、その記事に関連した他の記事を自…

PRESENT

Hitomiefu,インターネットビジネス,無料プレゼント,Canvas

MAIL MAGAZINE

MAIL MAGAZINE

Twitter

LINE@

Hitomi、LINE@、登録
  1. ツール

    超ブルーライト削減appの使用感をレビュー!アプリの評価と口コミも
  2. Simple Local Avatars、アバター画像、設定

    プラグイン

    Simple Local Avatarsでアバター画像を設定する方法を解説
  3. altタグ、意味、付け方

    SEO

    altタグの意味と付け方を詳しく解説!画像には代替テキストを記述しよう
  4. Wordpress、プラグイン、インストール

    Wordpress

    WordPressにプラグインをインストールする方法と失敗したときの対処法
  5. ビジネス,不安,孤独,向き合い方

    マインドセット

    ビジネスをしていく上で、不安や孤独とどう向き合うべきか?
PAGE TOP