フリーランス×WEB

プラグイン使用!インスタグラムをワードプレスブログ/サイトに表示させる方法

写真共有アプリケーションとして大人気のSNS「Instagram(インスタグラム)」。

「インスタ映え」という言葉が流行するほど、今や多くの人たちにとって身近な存在です。

そんなインスタとワードプレスサイト/ブログを上手く連携させることで、見栄えもよくなり、インスタ・サイト双方からの集客が期待できます。

今回はワードプレスのサイトやブログにインスタグラムの投稿やアカウントを埋め込んで表示させる方法についてシェアしたいと思います。

スポンサーリンク

 

タイムラインを埋め込む方法

まず最初に、サイトのページの中、もしくはウィジェットを使ってサイドバーやフッターなどにインスタグラムのアカウントを埋め込む方法です。

こちらは「Instagramフィード」というワードプレスのプラグインを使うことで、簡単に埋め込むことができます。

①Instagramフィードのプラグインをインストール

ワードプレスのプラグインの新規追加で「Instagramフィード」をインストール、有効化します。

左のサイドバーのメニューの中から【Instagram Feed】を選び、設定画面からInstagramの公式サイトに飛ぶボタンを押します。

②Instagramのアカウントと同期する

すでにパソコンでログイン済みの場合は、ボタンを押しただけで勝手につながります。

インスタをログアウトしている場合、もしくはパソコンでログインしたことがない場合は、ユーザーネーム/メールアドレス/電話番号のいずれかと、ログインパスワードを入力する必要があります。

③表示レイアウトの設定をする

Number of Photosはインスタの画像の表示数のことです。Number of Columnsはカラム数のことで、表示する画像の横列の数のこと。

画像数を4、カラム数を2にした場合、表示は2列×2行の計4枚の表示になります。

Padding around Imagesは画像と画像の間の余白です。デフォルトは5pxになっていますが、数が大きくなると余白も大きくなり、画像と画像が離れて表示されます。

最後のDisable mobile layoutは、チェックをしなければ、スマホ表示の際に画像数がスマホ画面のサイズに合わせて自動的に変化します。

パソコンでの設定と同じにしたい場合はチェックを入れましょう。

④表示したい場所にカンタン貼り付け

最後はinstagram-feed←このコードを半角[]で囲み、表示させたいページやウィジェットに埋め込めば完了です。

サイトの複数箇所に、画像数のレイアウトを変えて表示させたい時は、

  • instagram-feed num=5 cols=5

上記のように、表示数を追加すればOKです。

instagram-feed num=5 cols=5

画像数5枚、5列で設定した表示例


instagram-feed num=6 cols=3

画像数6枚、3列で設定した表示例


スポンサーリンク

インスタの各投稿を埋め込む

続いて、アカウントのタイムライン全体ではなく、各投稿を記事内に埋め込む方法です。上のような表示で、こちらはコピペ10秒で簡単にできますよ。

①埋め込みたい写真を選択する

まず最初に、記事に埋め込みをしたい画像を自分のタイムラインから選びます。

画像のコメント欄の横に【・・・】マークのメニューがあるのでクリックします。

メニューの中から「埋め込み」を選んでクリックします。

②埋め込みのコードをコピペ

埋め込みコードが表示されるので、ボタンを押してコピーをします。

その後、投稿を表示させたいページに貼り付けます。貼り付ける際は、必ずテキストモードで貼り付けを行いましょう

こんな感じの長〜い呪文のようなコードが貼り付けできたら完了です。プレビュー画面でちゃんと表示されているか確認しましょう。

ちなみに、キャプションなしは以下、こんな感じです。

まとめ

以上、今回はInstagramのタイムラインと投稿をワードプレスに埋め込む方法をご紹介しました。

ちなみに、タイムラインを埋め込む方法は「インスタウィジェット」という無料インスタグラムブログパーツ作成サイトで作ることもできますが、私はエラーで上手く表示されなかったので「Instagramフィード」のプラグインにお世話になっています。

インスタの投稿やタイムラインをサイトやブログと共有することで、より見栄えが良く、わかりやすいアピールになるので、ぜひ参考にしてみてください!

スポンサーリンク