インスタの埋め込み|ブログのサイドバーにインスタを表示させる方法

どうも、あらやんです。

今回はインスタの埋め込みということで、ブログのサイドバーにインスタグラムを表示させる方法を説明してい行きます。

若い世代を中心として人気を集めているSNSであるインスタグラムですがあなたは使ってますか?この記事を書いている時点ではまだまだ私も勉強中といった感じですが、あれだけの人気を集めているSNSですからぜひ使いこなせるようになっていきたいと思っています。

今のところ他のSNSと比べてビジネス色はそこまで強くないといった印象ですが(それでもお金稼ぎ系のDMが時々届きますが)、画像メインという所で自分の色や世界観を表現するのには優れているので画像から自分に興味を持ってもらうという使い方では良いのかなと思っています。

正直なところ、ツイッターのDMは結構ひどいものがあります(連日のように届く同じアカウントからのお金稼ぎ系DMなど)。インスタはビジネス色がそこまで強くない分、集客効果はツイッターやFacebookほど強くないと思いますが、それでも多くの人が集まっているということはあなたの情報が多くの人の目に映るということですから、始めておいて損は無いでしょう。

ということで、今回はインスタをやっているという前提で、あなたのブログのサイドバーへのインスタの埋め込み方法を説明していきますね。

 

インスタの埋め込みとはこういうことです

まず初めに、この記事で言っているインスタの埋め込みとはこういうことを言います。

こんな感じでサイドバーにインスタの画像を表示させることができます。今のところブログにインスタの埋め込みをやっている人は少ない印象を受けますね。アカウントを持っているならぜひやっておきましょう。流れに乗り遅れるな!

 

インスタの埋め込みにはプラグインを使うよ

それでは早速やっていきましょう。インスタの埋め込みにはプラグインを使います。そのプラグインとは、

Instagram Feed

というプラグインです。これ☟

これを使ってインスタのサイドバーへの埋め込みを行っていきます。

 

具体的な手順

まずはインストールと有効化をしてね

まずはインストールと有効化をしましょう。ダッシュボード画面左の「プラグイン」→「新規追加」で「Instagram feed」と検索しましょう。そうすると上の画像のような画面が出てきます。

画像ではもう有効化してあるので右上のボタンが「有効」となってますが、導入前は「今すぐインストール」となっているはずなのでクリックしましょう。そうすると「有効化」というボタンに変わるのでクリックして下さいね。

プラグインの導入方法がよく分からんという方はこちらをどうぞ。

WordPressでプラグインをインストールする方法

2017.09.19

 

有効化ができたら設定していきます

有効化が完了したら「プラグイン」→「インストール済みプラグイン」をクリックして下さい。そうするとプラグイン一覧にInstagram Feedが追加されているはずです。

Instagram Feedという文字の下にSettingsという項目があるのでこれをクリック。

これで設定画面に入れます。

 

やることその1:アクセストークンとユーザーIDの入力

設定画面に入ると下の画像の様な画面になります。

ここのAccess Tokenと書かれた真ん中の赤で囲ったところとUser ID(s)と書かれた赤で囲ったところに入力をしていきます。

何を入力すればいいかと言うと、一番上の赤で囲ったところをインスタにログインした状態でクリックすると入力する文字列が表示されます。こんな感じ☟

ちなみにAccess Tokenはその下の項目にも自動的に入力されるのでUser IDだけ手動で入力しましょう。できたら下の方に「変更を保存」というボタンがあるのでそれをクリックします。

 

やることその2:カスタマイズ

次にカスタマイズをしていきます。先ほどの画面の上の方に「2.Customize」というタブがあるのでそれをクリックしましょう。

ここでは数多くの設定項目がありますが、実際にいじるのは2項目だけでOKです。

  1. Layout:表示させる画像の数や列数の設定
  2. Header:ヘッダーの表示/非表示やヘッダーテキストの色の設定
この2つです。ここだけいじっておけば私のブログに表示されている状態にできますが、こだわりたい方は色々といじってみて下さい。このプラグインは英語表示なのでちょっと取っつきにくいですが、難しい英語ではないのでなんとなく意味は分かると思います。

1.Layout

ここで設定するのは4項目です。それは、

  1. Number of Photos:表示させる画像の最大数
  2. Number of Columns:画像を何列で表示させるか
  3. Padding around Images:画像と画像の間の幅の設定
  4. Disable mobile layout:ここにチェックを入れておかないとスマホから見た時に画像が一列で表示される

2.Header


  1. Show the Header:ヘッダー(自己紹介画像とアカウント名)の表示/非表示
  2. Show Bio Text:自己紹介文の表示/非表示
  3. Header Text Color:ヘッダーテキストの文字色の変更

 

やることその3:サイドバーウィジェットに貼り付ける

設定が完了したら、今度は画面上部のタブから「3.Display Your Feed」をクリックします。

上の画像の様な画面が開くので、赤で囲った「instagram-feed」という所をコピーします。

次にダッシュボード画面左の「外観」→「ウィジェット」からウィジェットの設定画面へ進み、テキストウィジェットをサイドバーの好みの位置に追加します。そしてそこに先ほどコピーしたものを貼り付け、題名(表示させたい見出しのタイトル)を入力して保存すれば完了です。どうですか?できました?

 

好みで設定は変更してね

これでサイドバーへの埋め込み方の説明は以上ですが、今回の設定はあらやんの場合の一例ということで自分の好みに合うように色々といじってみて下さい。

それでは以上です。お疲れさまでした。

あらやん公式メルマガはこちら

無料のメルマガに登録して頂くとメルマガ会員限定のメンバーズサイトに無料でご招待しています。

メルマガやメンバーズサイトでは

  • 自由なライフスタイルを実現するための具体的な方法
  • 理想を現実にするための思考法・マインドセット
  • より成果を出すための作業のマネジメント

などなど、自由なライフスタイルを実現するための様々な情報を発信していきます。

あなたも自由なライフスタイルを実現し、家族や恋人、友人などの大切な人とニコニコ笑顔で過ごしていけるようなそんな人生を歩んでいきませんか?もしそんな人生に興味や憧れがあるのなら、ぜひこのメルマガに登録して下さいね。

あなたが理想のライフスタイルを実現できるように私も頑張って情報を発信していきます!