こんにちは、Hitomiです！
最近、インスタグラム始めました（遅い 笑）
自分の感覚でどんどん写真をアップできるので、けっこうハマっています。
見栄えも良いのでWebサイトに表示させていな、と思い
検索をしてみると、けっこう色々な方法がありました。
今回はそのなかでも１番簡単で、かつかっこよく
Webサイトにインスタグラムを埋め込む方法をご紹介していきます！
目次
今や多くの若者はInstagramでコミュニケーションをとる
SNSでご自分の日常生活や本音を発信する風習が一般的になる一方で、
TwitterやFacebookで他人の動向を見ることにストレスを感じるひとも多いですね。
Twitterでなにげなく発言したことが、晒されたり、炎上したり、
批判の対象になっている方々を見ると
なんとも言えない息苦しさを覚えてしまいます。
しかしこのInstagramというアプリは、基本的には写真を投稿するだけという
非常にシンプルな発想で人気を読んでいるアプリです。
最近の若者は、TwitterやFacebookではなく
Instagramを日常的に使用するようになっていることが分かっています。
私もあまり上手にSNSを使いこなせるタイプではないのですが、
『写真』というツールは、芸術でもあり、自己表現であり、
非常に見るものの心を打つ仕組みになっているなあ、と感じました。
あまり言葉がないので、サクサク見れるのも良いですよね。
後発中の後発組ですが、数日前からInstagramを始めて、
『シンプルだし、すごくおもしろいな〜』と思い度々更新しています。
良かったらぜひフォローしてください^^
WordPressにInstagramを埋め込むには
予想以上にInstagramが良かったので、
WordPressの当サイトのサイドバーかなんかに埋め込みたいなと。
色々と調べてみると、当然ながら様々なツールやプラグインが紹介されていました。
そこで今回は、とても簡単に
WebサイトにInstagramを埋め込むためのプラグインと、
その使い方、設定方法、設置方法をご紹介していきます。
『Instagram フィード』を使った埋め込み方法
Instagram フィードをインストール→設定
まず、今回はプラグインを使った埋め込み方法を解説します。
ダッシュボードから『プラグイン＞新規追加』と進んでいただき、
『Instagram フィード』と検索をかけてください。
こちらをインストール→有効化しておきます。
有効化が完了すると、ダッシュボードメニュー内に
『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カラム：
[instagram-feed cols=1]
2カラム：
[instagram-feed cols=2]
3カラム：
[instagram-feed cols=3]
こうすることによって、
写真の配列をお好きなように変更してみてください。
ちなみに、当サイトでは3カラム配列にしてあります。
まとめ
今回は『Instagram フィード』を使って、
Webサイトにインスタグラムのタイムラインを表示させる方法を解説いたしました。
ご覧いただけました通り、
プラグインのインストール→アカウント認証→タグ挿入
という手軽なステップで完成させることができました。
写真というものは、そのかたの感性が現れますので、
情報発信ビジネスにおいても有効かもしれませんね。
ぜひ、お試しいただければと思います＾＾
ランキングから来ました。
すっごく勉強になりました。
ありがとうございます、感謝です！！
masahiro様
こちらこそありがとうございます。
今後ともどうぞ宜しくお願いいたします。Hitomi
初めまして。ブログランキングからきました。
インスタグラムはよく聞くし、やってみたいとも
思っているのですが、よくわからない、、、
それだけでほったらかしていました。
でも、ワードプレスに埋め込みができたり、
こちらの記事で細かい手順がありましたので、
とても理解しやすかったです。
まだ、ワードプレスを自分で使いこなすところ
まで行ってませんが、将来的に使いたいです。
また勉強をしに訪問させてください！
応援して帰ります。
saorichi様
こんにちは、Hitomiです。
ご丁寧にコメントいただきありがとうございます。
はい、Wordpressを開設することがありましたら、ぜひやってみてくださいね。なにか分からないことがあればメッセージください。
今後共当サイトをどうぞ宜しくお願い致します。Hitomi