フリーランスのワードプレス

インスタグラムをワードプレスのホームページに埋め込み表示する方法

写真共有アプリケーションとして大人気の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列で設定した表示例


InstaWidgetを使った埋め込み【プラグイン不使用】

ワードプレスのプラグインを使わなくても「InstaWidget」という無料ツールを使えば、簡単にホームページ内にInstagramのアカウントタイムラインを埋め込むことができます。

「InstaWidget」のトップページから【無料インスタグラムブログパーツ作成】のボタンをクリックしましょう。

(1)ユーザー名 InstagramのIDを入力します
(2)ブログパーツ幅 幅を入力します
(3)ユーザーアイコン プロフィールアイコンの表示/非表示を選べます
(4)ユーザー紹介文 紹介文の表示/非表示を選べます
(5)フォローボタン フォローボタンの表示/非表示を選べます
(6)フォロワー フォロワーの表示/非表示を選べます
(7)外枠 外枠の表示/非表示を選べます

外枠の色・文字の色・背景色もそれぞれ変更することができます。

(8)写真アルバム 写真の表示/非表示を選べます
(9)写真間の幅 写真と写真の間の幅を入力します
(10)写真効果 写真にカーソルをあてた時の効果を選べます。
(11)レイアウト 写真のレイアウトを入力します。(横列 × 縦列)
 (12)シェアボタン シェアボタンの表示/非表示を選べます
(13)写真の枠 各写真の枠の表示/非表示を選べます
(14)新しいウィンドウ 各種写真やボタンなどを押した時、リンク先を新しいウインドウで開くか今のママのウィンドウで開くか選べます

入力が終わったら、プレビューボタンを押してどのように表示されるか見てみましょう。

表示に問題がなければ【埋め込みコードを取得】というボタンをクリックして、コードを全てコピーします。

ワードプレスのテキストモードで貼り付けすれば完了です。以下のように、設定通りにちゃんと表示されているか確認しましょう。

スポンサードリンク

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

この記事を読んで、ウェブでの発信をもっとがんばりたいと思ったあなたへ

フリーランスのためのSNS・ブログ・ホームページ・ランディングページの役割や使い分けがわかる無料の勉強会やってます♪

フリーランス・個人起業家としてウェブ集客・発信をがんばりたい方対象

■SNS・ブログ・HP・LP・メルマガなど
それぞれのツールの概要・特徴がわかる
■各種ウェブ発信ツールの使い分けや
活用法がわかる

無料勉強会の
詳細はコチラ