あやこんにちは！あやです！
ケロ僕はアシスタントのケロです！
当サイトは「元引きこもり専業主婦・あや」がブログをスタートしてから、
- 月収50万円超え！
- 日収6万円超え！
- 月間最高79万PV！
を達成したノウハウをご紹介しています。
今日は「インスタグラムの投稿」を「ワードプレスで作ったブログ」に埋め込む方法をご紹介していきます！
あや当ブログもインスタの投稿を埋め込んでいます！
ケロせっかくブログをはじめたんだから、自分のインスタ画像も貼っておきたいよね！
ということで、さっそくインスタの埋め込み方法を解説していきます！
記事後半では、ブログとインスタグラムの連携方法もあわせてご紹介いたしますので、ぜひ最後までご覧くださいね！
ブログにインスタの投稿を埋め込む方法【プラグインで即解決】
ブログにインスタグラムの投稿を埋め込むには、プラグインを使えばカンタンです♪
使うプラグインの名称は「Smash Balloon Social Photo Feed」です。
ケロ以前は「Instagram Feed」という名前だったそうだよ〜！
あやまずはプラグインをダウンロードしていきましょう！
まずは、ワードプレスのメニューから、
プラグイン＞新規追加
へ進み、「Smash Balloon Social Photo Feed」を検索しましょう！
検索したら該当するプラグインが出てきますので、「今すぐインストール」をクリック後に「有効化」しましょう！
有効化すると、プラグインの一覧のページに戻ってきますので、きちんとインストールされているか確認してくださいね！
ケロ確認したら、プラグインの自動更新も有効化しておくと、
更新の手間が省けて便利だよ♪
ここまで完了したら、次は設定と使い方をご紹介していきますね。
Smash Balloon Instagram Feedの設定と使い方
最初に「Smash Balloon Instagram Feed」の設定からご説明していきますね！
①設定
設定画面は、さきほどのプラグインの一覧のページから「設定」をクリックするとOKです！
もしくは、ワードプレスのメニューからも設定画面を表示することができます↓
設定画面を開き「すべてのフィード」を選択すると、以下のような画面になりますので、「新規追加」をクリックしましょう！
「新規追加」をクリックしたら、作成画面に変わりますが、そのまま「次へ」をクリックしてください。
すると、また画面が変わりますので、ここで「ソースを追加」をクリックしましょう！
すると、以下のようなメッセージが出てきますので、少し待ちます。
少し待ったら、このような画面になりますので、アカウントの種類を選択後に、「インスタグラムでログイン」をクリックします。
コチラの画像では日本語表記になっていますが、お使いのブラウザによっては英語の場合もあります。
アカウントの種類は基本的に「個人」でOK！（お仕事でインスタを運用されている方は「仕事」でOK）
あや種類の選択が終わったら「インスタグラムでログイン」をクリックしましょう！
ケロその下にある「メールを受け取る」はチェックはずしてもいいの？
あやそうだね！メールは不要って人はチェックをはずすと良いね！
「インスタグラムでログイン」をクリック後はアカウントとの連携に進みますので、「許可する」をクリックしてください。
あや私のブログはすでに連携済みなのでこのような画面になりましたが、はじめての方は「リクエストしています」と出ていると思いますので、同じく「許可する」をクリックしましょう！
連携が完了したら、このような画面になります。
ご自分のインスタのアカウントが表示されていたら、あとは細かいデザインを決めていくだけです＾＾
②使い方
ここからは、表示させるデザインや使い方についてご紹介していきますね。
まずはインスタを表示させる際のデザインを決めていきますので、アカウント名の横にチェックを入れて、「次へ」をクリックします。
すると、このように細かくデザインを決めることができるようになります。
基本的には「カスタマイズ」の項目を変更していけばOKです！
ちなみに私が設定しているのは・・・
フィードレイアウト
- 投稿数を「９」
- 列を「３」
ヘッダー
- ヘッダーを有効、サイズは「中」
※ヘッダーの「カスタムアバター」で画像を選択すると、プロフィール画像を変えることもできます。
フォローボタン
- フォローボタンを有効、テキストは「フォローしてね！」に変更
あやお好みのデザインを作ってみてくださいね！
デザインが出来上がりましたら、保存をクリックして「埋め込み」をクリックし、コードを埋め込んでいきます。
埋め込みをクリックすると、以下の画面になりますのでコードをコピーします。
埋め込みたい場所にコードを貼り付けていくのですが、今回は私のブログで実践している「サイドバー」への埋め込みをご紹介しますね。
サイドバーや、フッターなどに埋め込む際は「ウィジェット」機能を活用しましょう。
ウィジェットは、ワードプレスのメニューから、
外観＞ウィジェット
と進みます。
今回は「共通サイドバー」に埋め込んでいきます。
埋め込む際は「カスタムHTML」を挿入して、
- タイトル
- 内容（コードを貼り付ける場所）
を編集します。
今回は、タイトルを「Instagram」とシンプルに入力してみました！
終わったら、完了をクリックして埋め込んだ場所をプレビューで確認します。
このような感じで仕上がりました〜♪
これでインスタグラムの埋め込みは完了です＾＾
あやお疲れさまでした！
ブログとインスタグラムの連携方法
もうひとつご紹介したい方法があって、例えば「インスタの投稿は埋め込まなくていいけど、インスタへのリンクを貼りたい」場合の方法もご紹介しておきますね。
まずはワードプレスから、ブログとインスタグラムを連携させます。
ユーザー＞プロフィール
へ進むと、このような項目が出てきますので、ここにご自分のアカウントのURLを貼り付けるだけでOKです！
こちらはSWELLの画面ですが、Cocoonをお使いの方は下記のような画面になります。
ケロCocoonはたくさん項目があるね！
こちらに入力したURLはリンクとして表示されます。
例えば、当ブログの場合でしたらプロフィールの下部に、このように表示させています↓
それぞれをクリックするとSNSに飛ぶようにリンクが設定されていますので、もし「インスタは埋め込まなくてもいいけど、リンクはほしいな」という時にお使いくださいね＾＾