WordPress関連コラム  2020.8.7

ワードプレスでのインスタ埋め込み方法!メリットとおすすめプラグイン

ワードプレスにインスタ画像の埋め込みが出来ることをご存知でしょうか?

インスタの画像を埋め込むことでブログに色が加えられ、読者の興味を引くことが出来ます。

埋め込みの方法は複数あり、どれも手軽で覚えておいて損はありません。

ここではワードプレスにインスタを埋め込む方法をご紹介し、メリットや注意点もお話ししていきます。

ブログとインスタを連動させ魅力あふれたワードプレスになるよう、インスタ埋め込みの知識を学んでいきましょう。

すぐできる!ワードプレスでインスタの埋め込みをする方法

ではさっそくワードプレスにインスタを埋め込む方法をお話ししていきます。

インスタグラマーなどセンスの良い写真を見つけると、埋め込みしたくなりますよね。

ワードプレスではご自身の投稿はもちろん、他の方の投稿を埋め込みすることも可能です。

ここでは、旧エディタ(Classic Editor)と新エディタ(Gtenberg)での方法をご紹介していきます。

旧エディタ(Classic Editor)でインスタを埋め込む方法

まずは、旧エディタ(Classic Editor)でインスタを埋め込む方法です。

旧エディタでは、埋め込みコードをコピペする方法とリンクをコピペする方法があります。

埋め込みコードをコピペする方法では、スマホやタブレット用に画像のサイズを小さく加工できます。

またキャプションの取り外しも可能なので、埋め込みの際処理を施すのであれば埋め込みコードをコピペする方法を選ぶようにしましょう。

それでは、詳しい埋め込み方法を見ていきます。

方法1.埋め込みコードをコピペして埋め込む

まず埋め込みコードをコピペして埋め込む方法です。

ワードプレスに載せたい投稿が見つかったら、右上にある「…」をクリックします。

ワードプレスのインスタ埋め込み方法

その中の「埋め込み」を選択すると、埋め込みコードが表示されますので、コピーをしましょう。

キャプションを入れず画像のみを載せたい場合は、チェックを外すと画像だけ埋め込むことができます。

ワードプレスのインスタ埋め込み方法

次にワードプレスのテキストエディタで、コピーした埋め込みコードを貼り付ければ完了します。

ワードプレスのインスタ埋め込み方法

埋め込みがきちんと出来たかはプレビューで確認が出来ます。

方法2.リンクをコピペして埋め込む

もう1つの埋め込み方法は、リンクをコピーして貼り付ける方法です。

こちらも先ほど同様右上にある「…」をクリックします。

ワードプレスのインスタ埋め込み方法

その中の「リンクをコピー」を選択すると自動的にリンクがコピーされます。

ワードプレスのインスタ埋め込み方法

載せたいページのビジュアルエディタで貼り付けをすれば完了します。

ワードプレスのインスタ埋め込み方法

ただしこの方法は、前後1行ずつ改行しないと上手に反映されませんので気を付けましょう。

新エディタ(Gtenberg)でインスタを埋め込む方法

次に新エディタ(Gtenberg)でインスタを埋め込む方法です。

まずは、埋め込みたいインスタのリンクをコピーしていきます。

埋め込みたいインスタの画像右上にある「…」をクリックします。

ワードプレスのインスタ埋め込み方法

「リンクをコピー」を押してリンクをコピーします。

ワードプレスのインスタ埋め込み方法

投稿の中で埋め込みたい場所の「+」を押し、埋め込みを選びます。

ワードプレスのツイッターの埋め込み方法

埋め込みの中の「Instagram」を選び、コピーしたリンクを貼り付けます。

ワードプレスのインスタ埋め込み方法

「埋め込み」ボタンを押すと、インスタの画像が埋め込まれます。

 

ワードプレスのインスタ埋め込み方法

どちらのエディタでも簡単にインスタを埋め込むことができるので、サイトのページに一工夫インスタを加えてみると良いでしょう。

インスタの埋め込みってなに?

そもそもインスタの埋め込みとは、ブログなどのサイトの中にインスタの画像を貼り付けすることです。

お気に入りのアカウントを紹介したり、ピックアップしたいポストを表示することができます。

インスタ(Instagram)は、ビジネスにおいても活用されているSNSの一つです。

ワードプレスを使ってインスタを埋め込むと、ホームページやブログサイトなどからアクセスできるようになり、フォロワーの増加が期待できるでしょう。

またトレンドアフィリエイトのようなサイトは、アクセントとしてインスタの画像の埋め込みがあるとより魅力的なものになります。

実際の商品が見られることで購買意欲にも繋がります。

インスタの埋め込みをする3つのメリット

ではインスタの埋め込みをするメリットにはどんなものがあるでしょう?

ここでは考えられる3つのメリットをご紹介します。

  • サイト集客が期待できる
  • 信頼性が高まる
  • フォロワーが増える

ブログ運営におけるインスタ埋め込みの重要性を感じられると思います。

メリット1.サイト集客が期待できる

まず1つ目のメリットとしてサイト集客が期待できることです。

アフィリエイト目的のサイトは、ブログを見に来てもらう人数がものを言います。

より多くの人に興味・関心を持ってもらい、また見にきたい!と思ってもらう必要があるのです。

そのためにはどうしたら魅力あるブログになるのか考えなければなりません。

文字だけ羅列されたブログでは読み疲れ、読者離れが考えられる中、インスタの画像が埋め込まれていたらどうでしょう?

文字だけのブログに比べグッと読みやすく、商品等のイメージもしやすくなります。

どの画像を埋め込むのかも重要になってくるため、センスの良いインスタグラマーに目星を付けておくとブログ作成もスムーズに進められますよ。

メリット2.信頼性が高まる

2つ目のメリットは、信頼性が高まることです。

個人のブログで商品紹介をしても、購入したい!と思わせるまで気持ちを持っていくのは至難の業です。

それ相応のフォロワーがいたり、ご自身が有名人で発言力がある人でない限り、なかなか商品が売れるところまではたどり着けません。

そんな時にぜひ活用したいのが公式インスタページです。

公式サイトを埋め込むこで商品の良さが伝わり、一気に信頼性が高まることでしょう。

さらに効果的なのがその商品を利用した人の口コミを埋め込む方法です。

公式サイトを見たうえで実際に利用した人の感想が分かれば、自分が使うイメージも沸き購買意欲を刺激できるでしょう。

メリット3.フォロワーが増える

3つ目のメリットは、フォロワーが増えることです。

サイトの読者を増やすためにインスタの埋め込みをすると、相乗効果でインスタのフォロワーが増えることもあります。

インスタにセンスの良い、またはためになりそうな情報が載っていたら他にはどんなポストをしているのかな?と気になりアカウントを覗いてくれますよね。

インスタのフォロワーを増やしていけたら、反対にインスタからブログの紹介も出来るので読者の固定に繋げられます。

覚えて置きたい!インスタを埋め込む際の注意点

続いてインスタを埋め込む際の注意点をお話ししていきます。埋め込み作業が簡単なだけに、つい多用してしまうこともあるでしょう。

ただし以下の点に注意をしておかないと裁判沙汰になってしまったり、画像が見れなくなってしまうこともありえます。

  • 埋め込む数によってページの表示速度が変わる
  • 著作権や肖像権に気をつける
  • 投稿内容が変更されるとワードプレスにも反映される

今後ブログを幅広く展開していこうとお考えの方はぜひ頭に入れておきたいポイントです。

それでは、順に見ていきましょう。

注意点1.埋め込む数によってページの表示速度が変わる

インスタの埋め込みは「何枚埋め込みたいのか」によってページの表示速度が遅くなります。

埋め込む数が多すぎて全くページが表示される気配が感じられない…という状況になってしまうこともあるでしょう。

これではどんなに良いブログを書いたとしても読まれることなく離脱されてしまいます。

複数埋め込みをしたい場合は、リンクをコピーする方法ではなく、公式埋め込みコードをコピペすることで大幅に改善されます。

埋め込みの手間はほとんど変わりませんので、複数埋め込みをしたい場合は埋め込みコードを使って行う癖をつけていきましょう。

注意点2.著作権や肖像権に気をつける

インスタグラムの埋め込みは、著作権や肖像権にも気を付けて行わなければいけません。

特に気を付けるべきは芸能人の画像・動画です。

本人があげている公式インスタからの引用であれば問題はありませんが、一般人が勝手に芸能人の画像等をインスタに上げることは著作権や肖像権に触れる行為です。

自分はすでにあがっていたポストを埋め込んだだけという認識は大変危険。

これは、インスタにあげた人と同じように著作権・肖像権の侵害になるからです。

公式インスタのみ引用してくるか、どうしても載せたいポストがあれば、DMを送り確認をとってから埋め込みをするようにしましょう。

注意点3.投稿内容が変更されるとワードプレスにも反映される

埋め込んだインスタも、そもそものポストを投稿者が削除をしたりアーカイブに移したりするとワードプレスのページでも連動してエラー表示になってしまいます。

エラー表示ばかりのページになってしまうと、読者離れに繋がってしまうので、定期的にチェックしエラーが出ていないか確認すると良いでしょう。

インスタが上手く表示されないときの対処法

インスタが上手く表示されないときの対処法として考えられるのは、通信環境を確認することです。

Wi-Fi等の機器が正常に作動していない場合、インスタが上手く表示されません。

またパソコンのブラウザが最新バージョンになっているかも確認してみると良いです。

Googleの場合、検索バー右端のメニュー[…] > [ヘルプ] > [Google Chromeについて] から、InternetExplorerの場合、検索バー右端の[歯車アイコン] > [バージョン情報] からバージョンの確認が可能です。

インスタの画像の調整方法

インスタの画像埋め込みに慣れてきたら、画像のサイズを調整してみるとより見やすいブログになります。

画像のサイズは埋め込みコードの一部分を修正することで調整が可能です。

元々のサイズのまま埋め込みをすると、PCでは問題なく見れてもスマホやタブレットだと大きすぎると感じることがあります。

そんな時は埋め込みコードをそのままコピペするのではなく、コード内の「max-width:○○○px」という部分を探してみて下さい。

以下の画像では、元のサイズが最大540pxなので最大300pxに書き換えるとちょうど良いサイズになります。

ワードプレスでインスタの画像サイズを変える方法

もしくは540pxの部分を30%と書き換えても同じくらいのサイズに変換できます。

インスタの埋め込みができるおすすめプラグイン

インスタの埋め込みができるプラグインを使うと、画像のサイズや列を自由にカスタムでき、オシャレなブログ作成に一役買ってくれます。

ここでは、2つのプラグインの特徴を踏まえご紹介していきます。

  • Social Slider Widget
  • Instagram Feed Pro

自分好みのプラグインが見つかったらぜひ試してみて下さい。

プラグイン1.Social Slider Widget

ワードプレスインスタ埋め込みプラグインSocial Slider Widget

まずご紹介するのはSocial Slider Widgetというプラグインです。

こちらは無料のプラグインながら、インスタにアップロードした写真を自動で取得できる優れもの。

アカウントは1つに限らず複数のアカウントが可能で、アクセストークン不要のアカウント認証で設置できるため簡単なところも魅力的です。

リンク先のURLも設定できるので商品を紹介するブログには最適。

画像から商品ページに誘導できれば、ブログ読者もストレスなく購入まで進めます。

ダウンロードはこちら

プラグイン2.Instagram Feed Pro

ワードプレスインスタ埋め込みプラグインInstagram Feed Pro

2つ目は、無料のInstagram Feedの上をいく有料版のInstagram Feed Proです。

特定のアカウントしか表示できない無料版に比べ、条件に合うフィードを表示できる仕組みになっています。

条件は「ユーザー」「ハッシュタグ」「ユーザーとハッシュタグのミックス」の3つから選択することができます。

インスタグラムの画像を一覧として表示させたいときなど、より多くの画像を載せたい場合には大変便利な機能です。

ダウンロードはこちら

プラグインを使いたくない場合はInstaShowが便利!

ワードプレスインスタ埋め込みInstashow

パソコンが重たくなるのが嫌でプラグインを入れたくないという方もいますよね。

そんな時はInstaShowが使い勝手がよく便利です。

InstaShowも以前はプラグインだったのですが、現在は廃止されています。

アカウント登録とレイアウトの設定を行ったら、ワードプレスを開きコードをコピペしてギャラリーを完成させます。

設定の手間としてはプラグインと大差はありませんし、なによりInstaShowのギャラリーはインスタのコピペとは思えないほど完成度の高いものになります。

カーソルを写真に載せるとコメントが浮き上がる仕様なのもスッキリしたビジュアルでおすすめポイントです。

公式サイトはこちら

 まとめ

ワードプレスにインスタを埋め込む方法はどれも簡単に出来ることが分かりました。

サイズ調整やキャプションの有無を選択できるため、埋め込みコードをコピペするやり方を癖付けておくと良いでしょう。

またプラグインを入れるとよりレベルの高いギャラリーが仕上がります。

ワンランク上のページを作る場合はプラグインやInstaShowを利用してみてはいかがでしょうか。

他のSNSの埋め込み方法は以下の記事をご覧ください。

ワードプレスでYouTubeを埋め込みたいときにすぐできる2つの方法
ワードプレスでサイト作成をしている際、「ここに動画が入ったらもっと良くなる!」とYouTubeを埋め込みたいと思うことがありますよね。 YouTubeを埋め込むことで
ワードプレスのツイッター埋め込みはコピペで簡単!すぐできる埋め込み方法
ワードプレスの記事の中にツイッターの埋め込みをしたいけど、方法が分からないという方もいるのではないでしょうか。 ツイッターの埋め込み方法は複数あり、ツイッターを埋め込