ブログにインスタの投稿を埋め込む方法【プラグインでカンタン設定】

  • URLをコピーしました!
あや

こんにちは!あやです!

ケロ

僕はアシスタントのケロです!

当サイトは「元引きこもり専業主婦・あや」がブログをスタートしてから、

  • 月収30万円超え!
  • 日収6万円超え!
  • 月間最高79万PV

を達成したノウハウをご紹介しています。

今日は「インスタグラムの投稿」を「ワードプレスで作ったブログ」に埋め込む方法をご紹介していきます!

あや

当ブログもインスタの投稿を埋め込んでいます!

ケロ

せっかくブログをはじめたんだから、自分のインスタ画像も貼っておきたいよね!

ということで、さっそくインスタの埋め込み方法を解説していきます!

記事後半では、ブログとインスタグラムの連携方法もあわせてご紹介いたしますので、ぜひ最後までご覧くださいね!

目次

ブログにインスタの投稿を埋め込む方法【プラグインで即解決】

ブログにインスタグラムの投稿を埋め込むには、プラグインを使えばカンタンです♪

使うプラグインの名称は「Smash Balloon Social Photo Feed」です。

ケロ

以前は「Instagram Feed」という名前だったそうだよ〜!

あや

まずはプラグインをダウンロードしていきましょう!

まずは、ワードプレスのメニューから、

プラグイン>新規追加

へ進み、「Smash Balloon Social Photo Feed」を検索しましょう!

検索したら該当するプラグインが出てきますので、「今すぐインストール」をクリック後に「有効化」しましょう!

「Smash Balloon Social Photo Feed」インストールと有効化

有効化すると、プラグインの一覧のページに戻ってきますので、きちんとインストールされているか確認してくださいね!

「Smash Balloon Social Photo Feed」の自動更新を有効化
ケロ

確認したら、プラグインの自動更新も有効化しておくと、
更新の手間が省けて便利だよ♪

ここまで完了したら、次は設定と使い方をご紹介していきますね。

Smash Balloon Instagram Feedの設定と使い方

最初に「Smash Balloon Instagram Feed」の設定からご説明していきますね!

①設定

設定画面は、さきほどのプラグインの一覧のページから「設定」をクリックするとOKです!

「Smash Balloon Social Photo Feed」の設定画面へ

もしくは、ワードプレスのメニューからも設定画面を表示することができます↓

「Smash Balloon Social Photo Feed」の場所

設定画面を開き「すべてのフィード」を選択すると、以下のような画面になりますので、「新規追加」をクリックしましょう!

「Smash Balloon Social Photo Feed」の設定手順①

「新規追加」をクリックしたら、作成画面に変わりますが、そのまま「次へ」をクリックしてください。

「Smash Balloon Social Photo Feed」の設定手順②

すると、また画面が変わりますので、ここで「ソースを追加」をクリックしましょう!

「Smash Balloon Social Photo Feed」の設定手順③

すると、以下のようなメッセージが出てきますので、少し待ちます。

「Smash Balloon Social Photo Feed」の設定手順④

少し待ったら、このような画面になりますので、アカウントの種類を選択後に、「インスタグラムでログイン」をクリックします。

「Smash Balloon Social Photo Feed」の設定手順⑤

コチラの画像では日本語表記になっていますが、お使いのブラウザによっては英語の場合もあります。

アカウントの種類は基本的に「個人」でOK!(お仕事でインスタを運用されている方は「仕事」でOK)

あや

種類の選択が終わったら「インスタグラムでログイン」をクリックしましょう!

ケロ

その下にある「メールを受け取る」はチェックはずしてもいいの?

あや

そうだね!メールは不要って人はチェックをはずすと良いね!

「インスタグラムでログイン」をクリック後はアカウントとの連携に進みますので、「許可する」をクリックしてください。

「Smash Balloon Social Photo Feed」の設定手順⑥
あや

私のブログはすでに連携済みなのでこのような画面になりましたが、はじめての方は「リクエストしています」と出ていると思いますので、同じく「許可する」をクリックしましょう!

連携が完了したら、このような画面になります。

「Smash Balloon Social Photo Feed」の設定手順⑦

ご自分のインスタのアカウントが表示されていたら、あとは細かいデザインを決めていくだけです^^

②使い方

ここからは、表示させるデザインや使い方についてご紹介していきますね。

まずはインスタを表示させる際のデザインを決めていきますので、アカウント名の横にチェックを入れて、「次へ」をクリックします。

「Smash Balloon Social Photo Feed」の使い方

すると、このように細かくデザインを決めることができるようになります。

「Smash Balloon Social Photo Feed」の使い方②

基本的には「カスタマイズ」の項目を変更していけばOKです!

ちなみに私が設定しているのは・・・

フィードレイアウト

  • 投稿数を「9」
  • 列を「3」
「Smash Balloon Social Photo Feed」の使い方③

ヘッダー

  • ヘッダーを有効、サイズは「中」
「Smash Balloon Social Photo Feed」の使い方④

※ヘッダーの「カスタムアバター」で画像を選択すると、プロフィール画像を変えることもできます。

フォローボタン

  • フォローボタンを有効、テキストは「フォローしてね!」に変更
「Smash Balloon Social Photo Feed」の使い方⑤
あや

お好みのデザインを作ってみてくださいね!

デザインが出来上がりましたら、保存をクリックして「埋め込み」をクリックし、コードを埋め込んでいきます。

「Smash Balloon Social Photo Feed」の使い方⑥

埋め込みをクリックすると、以下の画面になりますのでコードをコピーします。

「Smash Balloon Social Photo Feed」の使い方⑦

埋め込みたい場所にコードを貼り付けていくのですが、今回は私のブログで実践している「サイドバー」への埋め込みをご紹介しますね。

サイドバーや、フッターなどに埋め込む際は「ウィジェット」機能を活用しましょう。

ウィジェットは、ワードプレスのメニューから、

外観>ウィジェット

と進みます。

今回は「共通サイドバー」に埋め込んでいきます。

「Smash Balloon Social Photo Feed」の埋め込み

埋め込む際は「カスタムHTML」を挿入して、

  • タイトル
  • 内容(コードを貼り付ける場所)

を編集します。

今回は、タイトルを「Instagram」とシンプルに入力してみました!

「Smash Balloon Social Photo Feed」の埋め込み②

終わったら、完了をクリックして埋め込んだ場所をプレビューで確認します。

このような感じで仕上がりました〜♪

「Smash Balloon Social Photo Feed」の完成画像

これでインスタグラムの埋め込みは完了です^^

あや

お疲れさまでした!

ブログとインスタグラムの連携方法

もうひとつご紹介したい方法があって、例えば「インスタの投稿は埋め込まなくていいけど、インスタへのリンクを貼りたい」場合の方法もご紹介しておきますね。

まずはワードプレスから、ブログとインスタグラムを連携させます。

ユーザー>プロフィール

へ進むと、このような項目が出てきますので、ここにご自分のアカウントのURLを貼り付けるだけでOKです!

ブログとインスタグラムの連携方法①

こちらはSWELLの画面ですが、Cocoonをお使いの方は下記のような画面になります。

ブログとインスタグラムの連携方法②
ケロ

Cocoonはたくさん項目があるね!

こちらに入力したURLはリンクとして表示されます。

例えば、当ブログの場合でしたらプロフィールの下部に、このように表示させています↓

ブログとインスタグラムの連携方法③

それぞれをクリックするとSNSに飛ぶようにリンクが設定されていますので、もし「インスタは埋め込まなくてもいいけど、リンクはほしいな」という時にお使いくださいね^^

目次