【カンタン】Instagramの投稿をWordPressに埋め込みする方法

Technology

「WordPressでインスタグラムの投稿を表示するにはどうやってやるの?わかりやすくカンタンな方法を教えてほしい!」

そういった疑問を解決します

記事コンテンツ

  • WordPressにInstagramの投稿を埋め込む
  • プラグイン使ってInstagramの投稿を表示させる方法

ブログを書いていてInstagramの投稿を埋め込みたいと思うことがありますよね。

そのときに、「埋め込み<」「プラグイン」「API」の3つ方法がありまして、
難易度は、高い順にAPI→プラグイン→埋め込みとなるかと。

じつは、プラグインと埋め込みは全然難しくなかったり。

今回はカンタンですぐつかえる「埋め込み」と「プラグイン」の方法で、
WordPressにInstagramの投稿を表示してみます!

WordPressにInstagramの投稿を埋め込む

WordPressにInstagramの投稿を埋め込むのはとてもカンタンです。

文字がズラッと並んでいるよりも、
ほどよく画像を載せてあった方がブログがみやすくなります!

さっそく進めていきましょう!

Instagramの投稿を埋め込み

やりたいことは下記みたいな感じです↓

こちらはユニクロのインスタグラムの投稿を例に使わせていただいています。

まずは自分のアカウントをつかい、ログイン。
アカウント登録してない人は登録が必要。

自分が埋め込みたい投稿をクリックすると「・・・」のマークが表示されます。

先ほどの「・・・」を押すと、いくつか項目がリスト形式で表示されるので「埋め込み」を選択。

とりあえず「埋め込みコードをコピー」を押します。

埋め込みがコピーされている状態なので、そのままWordPressの「テキストエディター」に貼り付けます。


コードの量がなかなか多いですが、
開始タグが 「<blockquote〜」で終了タグが「</script>」と覚えておくといいかもしれません。

プレビューでみると、投稿が問題なく表示されていることを確認できます。

キャプションなしのパターン

そもそも「キャプションの意味とは?」という方に、
Instagramでいうと投稿の下にある説明文のことです。

さっそくキャプションなしで、Instagramの投稿を載せてみましょう!

先ほどのソースをコピーする画面で「キャプション追加」のチェックボックスのチェックを外す。
コピー内容をキャプションありと同様にエディターに埋め込みます。

たしかに、投稿の説明のパートがカットされていることがわかります。

投稿をシンプルにさせたい方には便利な機能ですね!

リンクでInstagramの投稿を表示させる

埋め込みが長いすぎるという方には、
リンクでもInstagramの投稿を表示させることもできます。

リンクをコピー」という項目は「埋め込み」の上にあり、
押すと貼りたいリンクを勝手にコピーしてくれます。

WordPressのエディターにいき、「ビジュアル」または「テキスト」のエディターにペタッと。
すると、埋め込みと同じようにInstagramの投稿が表示されます。

埋め込みのキャプション付きのときと同様な感じですね。

プラグイン使ってInstagramの投稿を表示させる方法

今回は、カンタンに使えて人気のあるプラグイン「Smash Ballon Instagram Feed」を使ってみます。

まずは、プラグインの追加画面でSmash Ballon Instagram Feedをインストール。

インストール完了後「有効化」しつつ、左の方に「Instagram Feed」が表示されているのでクリック。

すると、「Connect an Instagram Account」というボタンが出てくるので、押します。
「ビジネス(Business)」か「個人(Personal)」をきかれるため、「個人(Personal)」を選択。

次にインスグラムのログインを求められるため、ログイン情報を入力。
ちなみに、すでにログインしていると承認画面が表示されます。

「Connect This Account」と「Switch Accounts」が出てくるので、「Connect This Account」をクリック。

Add to Primary Feed」を押すと、アカウントの紐付けが完了します。
「Remove from Primary Feed」となればOK!

「3.Display Your Feed」に移動し、「[instagram-feed]」が記載されているので、コピー。
そして、投稿に移動しテキストエディターに貼り付け。

プレビューすると、ちゃんと自分のインスタの投稿が確認できます!

以上、WordPressにInstagramの投稿を表示させる方法でした。