Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressにInstagramを簡単に埋め込む方法(ステップバイステップ)

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

WordPressにInstagramフィードを埋め込みたいですか?

Instagramの写真や動画をサイトに表示することで、コンテンツの鮮度を保ち、ユーザーのエンゲージメントを高め、信頼を築くことができます。また、Instagramアカウントを宣伝し、フォロワーを増やすのに最適な方法です。

この投稿では、WordPressにInstagramを埋め込む方法をステップバイステップで紹介します。

How to easily embed Instagram in WordPress (Step by step)

なぜWordPressサイトにInstagramを埋め込むのか?

当社のマーケティング統計調査によると、Instagramの月間有効ユーザー数は20億人を超えています。つまり、商品やサービスを宣伝し、ブランド認知度を高め、視聴者を増やすのに最適な場所なのです。

しかし、サイトにアクセスしただけでは、Instagramのコンテンツは見てもらえません。そう考えると、WordPressにInstagramフィードを埋め込んで、誰でも見られるようにするのが賢い方法だ。

これは、あなたのソーシャルメディアページを宣伝し、より多くの人にInstagramをフォローしてもらう簡単な方法です。

このような追加コンテンツはすべて、あなたのサイトの検索エンジン最適化(SEO)を改善し、訪問者が最新の投稿をチェックするために戻ってくるように促すことができます。また、ポジティブなコメントや「いいね!」は、信頼を築き、より多くの売上につながる強力な社会的証明となります。

ということで、WordPressにInstagramフィードを埋め込む方法を見てみよう。

Instagram Photosプラグインのインストール方法

WordPressにInstagramを埋め込む最良の方法は、Smash Balloon Social Photo Feedプラグインを使用することです。

この無料プラグインを使えば、1つまたは複数のInstagramアカウントの写真を、完全にカスタマイズ可能なフィードで表示することができる。

An example of an embedded Instagram feed, created using Feeds for Instagram

WordPressでFacebookとInstagramのoEmbed問題を解決する最も簡単な方法でもあります。

フィードをサイトに設置すると、Instagramの新しい投稿があるたびに自動的に更新されます。こうすることで、手動で更新することなく、サイトを新鮮で興味深いものに保つことができる。

このガイドでは、WordPressサイトにInstagramフィードを追加するのに必要なものがすべて揃っているSmash Balloonの無料版を使用します。ただし、ハッシュタグフィードを表示したり、InstagramのShoppable画像を追加したりできるプロバージョンもあります。

始める前に、InstagramアカウントをFacebookページに接続する必要があります。個人のInstagramアカウントをお持ちの場合は、それをビジネスアカウントに変更すると、Smash BalloonがあなたのInstagramのバイオとヘッダーを自動的に表示できるようになります。

この2つの方法については、このガイドの最後にあるFAQセクションをご覧ください。

準備ができたら、Smash Balloon Social Photo Feedプラグインをインストールして有効化します。詳しくは、WordPressプラグインのインストール方法をご覧ください。

InstagramアカウントをWordPressに接続する方法

プラグインを有効化した後、最初の作業はInstagramアカウントをWordPressに接続することです。Instagram Feed ” Settingsに行き、’Add New’をクリックするだけです。

How to create a new Instagram feed in WordPress

Smash Balloon proを使えば、タグ付けされた投稿やハッシュタグからフィードを作成したり、さまざまなソーシャルメディアサイトのコンテンツを集めたソーシャルウォールを作成することもできます。

無料のプラグインを使っているので、「ユーザー・タイムライン」を選択し、「次へ」をクリックするだけだ。

How to add an Instagram timeline to your WordPress account

カスタムInstagramフォトフィードで使用するアカウントを選択するだけです。

ソースの追加」ボタンをクリックします。

Adding an Instagram account as a Smash Balloon source

次の画面で、個人用Instagramアカウントの写真を表示するか、ビジネス用Instagramアカウントの写真を表示するかを選択します。

パーソナル」にチェックを入れると、Smash Balloonは初期設定でInstagramのアバターと経歴をヘッダーに表示しません。ただし、後からプラグインの設定でInstagramのアバターと経歴を追加することは可能です。

Adding a personal or business Instagram account to WordPress

個人」または「ビジネス」を選択した後、先に進み、「Facebookでログイン」をクリックする。

WordPressサイトで紹介したいInstagramアカウントを選択し、「次へ」をクリックします。

Choose an Instagram account to use with Smash Balloon

その後、InstagramアカウントにリンクされているFacebookページの横にあるチェックボックスをオンにする。

それができたら、『次へ』ボタンをクリックします。

How to add a Facebook page to your WordPress website

Smash Balloonがアクセスできるすべての情報と、実行できるアクションがポップアップで表示されます。

Smash BalloonのInstagramアカウントへのアクセスを制限するには、いずれかのスイッチをクリックして「はい」から「いいえ」にします。ただ、WordPressブログやサイトで表示できる写真や動画に影響する可能性がありますので、ご注意ください。

その点を考慮し、すべてのスイッチを有効化したままにしておくことをお勧めする。

設定に満足したら、『完了』をクリックする。

How to change the Instagram permissions with Smash Balloon

サイトに追加したInstagramアカウントのポップアップが表示されます。

そのアカウントの横にあるボックスにチェックを入れ、「追加」をクリックするだけです。

Choosing an Instagram account to add to your WordPress website

Smash BalloonでInstagramフィード ” すべてフィードの画面に戻ります。

WordPressにソーシャルメディアのフィードを追加するには、使用したいInstagramアカウントの横にあるボックスにチェックを入れるだけです。そして、「次へ」をクリックする。

How to create an Instagram feed using Smash Balloon

このプラグインは、Instagramの写真フィードを作成し、ページ、投稿、ウィジェット対応エリアに追加できる。例えば、WordPressのサイドバーにInstagramの写真を表示することができます。

しかし、Instagramフィードを埋め込む前に、その見え方をカスタマイズし、不足している情報を追加したいと思うかもしれません。

Instagramの写真フィードをカスタマイズする方法

初期設定では、Smash Balloonはエディターでフィードを開き、カスタマイズできるようになっています。

右側には、Instagramの写真フィードのプレビューが表示されます。左側には、写真フィードをカスタマイズするために使用できるすべての設定があります。

The Smash Balloon instagram editor

これらの設定のほとんどは自明だが、いくつかの重要なエリアについて簡単に説明しよう。

まず始めに、左側のメニューから「Feed Layout」を選択することで、Instagramの写真レイアウトを変更し、パディングを追加することができる。

変更を加えると、プレビューが自動的に更新されるので、さまざまな設定を試して、最適な設定を確認することができます。

Changing the layout of an Instagram feed in WordPress

初期設定では、ユーザーがデスクトップコンピューターでもモバイル端末でも、Smash Balloonは同じ枚数の写真を表示します。

Instagramフィードがデスクトップコンピューター、タブレット、スマートフォンでどのように表示されるかは、右上のボタンでプレビューできる。

Previewing how the Instagram feed layout looks on smartphone and mobile

スマートフォンやタブレット端末は一般的に画面が小さく、処理能力も低いため、モバイル端末ではInstagramの写真や動画の表示回数を減らした方がいいかもしれません。

これを行うには、「投稿数」の下の「モバイル」フィールドに別の数字を入力するだけでよい。

Showing a different number of posts on desktop and mobile

スマートフォン、タブレット、デスクトップコンピューター用に異なるレイアウトを作成することで、訪問者がどの端末を使用していても、フィードが美しく見えるようにすることができます。

初期設定では、プラグインのフィードは、デスクトップコンピューターに比べて、スマートフォンやタブレットではカラムが少なく表示されます。これにより、写真や動画が小さな画面でも快適に表示されます。

これらの初期設定を変更するには、「カラム」設定に新しい数字を入力するだけです。

Showing a different number of Instagram columns on desktop, smartphone, and tablet

変更後、「カスタマイザー」リンクをクリックします。

これでSmash Balloonエディターのメイン画面に戻り、次の設定画面である「配色」を探せるようになります。

Smash Balloon's color scheme settings

初期設定では、Smash BalloonはWordPressテーマの配色を引き継ぎますが、「ライト」と「ダーク」のテーマも用意されています。

カスタム」を選択し、設定を使ってリンクの色、背景色、WordPressのテキスト色などを 変更することで、独自の配色を作ることもできる。

Changing the Instagram column scheme using Smash Balloon

初期設定では、Smash BalloonのInstagramフィードにヘッダーが追加され、プロフィール写真とページ名が表示されます。この部分の表示を変更するには、左側のメニューから「ヘッダー」をクリックしてください。

この画面では、背景色の変更、Instagramのバイオの表示、ヘッダーサイズの変更などができる。

Customize the Instagram header on your WordPress website

別のプロフィール写真を表示したい場合もあるでしょう。例えば、Instagramのアバターがテーマから浮いてしまう場合、カスタマイザーのロゴを代わりに使うことができます。

プロフィール画像を変更するには、「カスタムアバターを表示」の下にある「画像を追加」をクリックします。その後、WordPressのメディアライブラリから画像を選択するか、新しい写真をアップロードすることができます。

Adding a custom avatar to an Instagram embed in WordPress

また、別のバイオを追加することもできます。例えば、Instagramを訪れてもらったり、あなたのアカウントをフォローしてもらったりすることができます。

ユニークなInstagramのバイオを作成するには、「カスタムバイオを追加」ボックスに入力するだけです。

Adding a custom Instagram bio to your WordPress website

Smash Balloonは自動的にInstagramの写真を分析し、最適な解像度で表示します。初期設定をお勧めしますが、必要に応じてInstagramの画像を大きくしたり小さくしたりすることができます。

画像サイズを変更するには、左側のメニューから「投稿日」をクリックします。次に、’画像と動画’オプションを選択します。

Changing the resolution of embedded Instagram photos and videos

表示されるドロップダウンメニューで、サムネイル、中、フルサイズの画像を選択できるようになりました。

このトピックについては、WordPressの画像サイズに関する初心者向けガイドをご覧ください。

フィードの見た目に不満がある場合は、いつでもこの画面に戻り、ドロップダウンから「自動検出(推奨)」を選択することができる。

How to auto-detect the resolution of your Instagram feed

初期設定では、Smash BalloonはあなたのInstagramフィードの下部に「Load More」ボタンを追加し、訪問者があなたの写真や動画をスクロールできるようにします。

Load More Button」を選択することで、このボタンの見た目を変更することができる。

Customize the Instagram Load More button in WordPress

ここでは、背景色、テキスト色、マウスオーバーの状態を変更することで、「Load More」ボタンを目立たせることができます。

テキスト」フィールドに入力して、ボタンに独自のメッセージを追加することもできます。

Adding custom messaging to the Load More button

このボタンは有効化したままにしておくことをお勧めしますが、外すこともできます。例えば、サイト上で閲覧できる写真の枚数を制限することで、Instagramへの訪問を促すことができます。

ボタンを削除するには、「有効化」スライダーをグレーに切り替えるだけです。

How to easily embed Instagram in WordPress

もし訪問者が気に入れば、埋め込みフィードの下に表示される’Follow on Instagram’ボタンを使って購読を決めるかもしれない。

重要なボタンなので、目立たせるためにカスタマイザーを追加したいかもしれません。これを行うには、左側のメニューから「フォローボタン」を選択します。

ここでは、ボタンの背景色、マウスオーバーの状態、テキストの色を変更できます。

Customizing the social media Follow button

初期設定では、ボタンには「Instagramでフォロー」のラベルが表示される。

テキスト」フィールドに入力することで、これを独自の行動喚起に置き換えることができます。

Customizing the Follow Us On Instagram button

Instagramフィードの見た目に満足したら、「保存」をクリックして変更を保存するのをお忘れなく。

これで、WordPressサイトにInstagramフィードを追加する準備が整いました。

WordPressにInstagram Feedを埋め込む方法

ブロック、ウィジェット、ショートコードを使ってInstagramフィードをサイトに追加できる。

Smash Balloon Social Photoフィードを使用して複数のフィードを作成した場合、ウィジェットやブロックを使用する場合は、フィードのコードを知る必要があります。

このコードを取得するには、Instagram Feedの「すべてのフィード」にアクセスし、「ショートコード」の下にあるテキストをコピーします。

以下の画像では、instagram-feed feed=1を使用する必要がある。

Getting the code for a custom Instagram feed

Instagramフィードをページや投稿に埋め込みたい場合は、Instagram Feedブロックを使用することをお勧めします。

注: ブロック有効化テーマを使用している場合は、以下の手順に従って、フルサイトエディターを使ってサイトの任意の場所にブロックを追加することができます。

Instagramの写真や動画のフィードを埋め込みたいページや投稿を開くだけです。次に、「+」アイコンをクリックして新規ブロックを追加し、「Instagram Feed」と入力し始める。

適切なブロックが表示されたら、クリックしてページまたは投稿に追加します。

The Feeds for Instagram block

このブロックには、初期設定でSmash Balloonのフィードが表示されます。別のInstagramフィードを表示したい場合は、右側のメニューにある「ショートコード設定」を見つけてください。

ここで、instagram-feedfeed=1コードを追加し、「変更を適用」ボタンをクリックするだけです。

Adding the Instagram shortcode to a page or post

ブロックにInstagramアカウントの写真や動画が表示されるようになります。ページを公開または更新するだけで、サイト上でフィードをライブにすることができます。

Instagramフィードをウィジェット対応のエリアに追加することもできます。例えば、WordPressサイトのフッターやサイドバーセクションに追加することができます。こうすることで、訪問者はあなたのサイトのすべてのページでフィードを見ることができる。

WordPressダッシュボードの外観 ” ウィジェットに移動し、青い「+」ボタンをクリックするだけです。

Adding an Instagram feed to a WordPress widget

検索バーに「Instagram Feed」と入力し、正しいウィジェットが表示されたら選択する。

WordPressには「Instagram Feed」ブロックがビルトインされているので、Instagramの公式ロゴが表示されるものを選んでください。

How to add an Instagram Feed to a widget-ready area

その後、Instagramフィードを表示したいエリアにウィジェットをドラッグするだけです。

ウィジェットには、Smash Balloonを使って作成したフィードが自動的に表示されます。別のInstagramフィードを表示したい場合は、「ショートコード設定」ボックスにフィードのショートコードを入力するだけです。

その後、「変更を適用」をクリックする。

Adding an Instagram feed to a widget-ready area

更新」ボタンをクリックして、ウィジェットをライブにすることができます。詳細については、WordPressでウィジェットを追加して使用する方法のステップバイステップガイドを参照してください。

もう1つのオプションは、ショートコードを使用して、任意のページ、投稿日、またはウィジェット対応エリアにInstagramフィードを埋め込むことです。

Instagram Feedの “All Feeds“に行き、”Shortcode “カラムにあるコードをコピーするだけです。これで、このコードを任意のショートコードブロックに追加できる。

ショートコードの設置方法については、ショートコードの追加方法をご覧ください。

最後に、ブロックが有効化されたテーマを使用している場合は、フルサイトエディターを使用して、Instagramフィードブロックをサイトの任意の場所に追加することができます。

WordPressのダッシュボードで、外観 ” エディターと進みます。

Opening the full-site editor (FSE)

初期設定では、フルサイトエディターはテーマのホームテンプレートを表示します。

Instagramフィードを別のエリアに追加したい場合は、「Template」か「Template Parts」のどちらかをクリックする。

Choosing a template or template part in the full-site editor (FSE)

エディターにはWordPressテーマを構成するすべてのテンプレートパーツのリストが表示されます。

Instagramフィードを表示したいテンプレートをクリックするだけです。

Choosing a WordPress template in the full-site editor

WordPressにデザインのプレビューが表示されます。

このテンプレートを編集するには、小さな鉛筆のアイコンをクリックしてください。

Adding an Instagram feed to WordPress using the full-site editor (FSE)

テンプレートを選んだら、Instagramフォトフィードを追加したいエリアにマウスオーバーするだけ。

そして、青い「+」ボタンをクリックする。

How to add an Instagram block using the full-site editor and a block-enabled theme

その後、「Instagram Feed」と入力する。

適切なブロックが外観されたら、クリックしてテンプレートに追加する。

Adding a social media feed using the WordPress full-site editor (FSE)

特にショートコードを追加しない場合、Smash Balloonは初期設定でフィードを表示します。このフィードは、上記と同じ手順でショートコードを追加することで変更できます。

WordPressへのInstagramの埋め込みに関するFAQ

Smash Balloonを使えば、Instagramの写真や動画をサイトに簡単に表示できます。そこで、WordPressでInstagramフィードを追加する際によくある質問をご紹介します。

Instagramのビジネスアカウントを作成するには?

Smash Balloonソーシャルフォトフィードは、個人または企業のInstagramアカウントの写真を表示できます。

ただし、Smash Balloonは、個人のInstagramアカウントからInstagramのアバターと経歴を自動的に取得することはできません。そのため、Smash Balloonがアバターと経歴を自動的に取得できるように、個人アカウントかビジネスアカウントかを確認し、ビジネスアカウントに切り替えることをお勧めします。

確認するには、Instagramのアカウントにアクセスし、サイドメニューの三本線のアイコンをクリックするだけ。

How to check whether you have a personal or business Instagram account

その後、「設定」を選択する。

ビジネスアカウントを持っていない場合、この画面では左側のメニューに「プロフェッショナルアカウントに切り替える」と表示されます。

How to switch to a personal Instagram account

現在個人アカウントをお持ちで、ビジネスアカウントに切り替えたい場合は、このリンクをクリックしてください。

FacebookページをInstagramアカウントに接続するには?

WordPressにInstagram Feedを追加する前に、InstagramアカウントをFacebookページに接続する必要があります。

これを行うには、使用したいFacebookページに移動し、左側のメニューから「設定」をクリックします。

その後、『Linked Account』をクリックする。Instagram’を選択し、’Connect’ボタンをクリックします。

How to connect Facebook and Instagram

Facebookは今後、Instagramでアクセスできる情報と実行できるアクションをすべて表示する。

よろしければ、『接続』ボタンをクリックしてください。

Giving Smash Balloon access to your Instagram account

ただ、あなたのFacebookページを管理している他の人は、あなたのInstagramのメッセージを見ることができ、それらに返信することができることに注意してください。Instagramのメッセージを非公開にしたい場合は、クリックして設定を無効化してください。

満足して次に進む準備ができたら、『確認』をクリックする。

How to configure your Instagram permissions using Smash Balloon

Instagramのユーザー名とパスワードを入力するポップアップが開きます。

その後、先に進んで「ログイン」をクリックする。

Logging into your Instagram account

しばらくすると、InstagramとFacebookのアカウントが接続されたというメッセージが表示されます。

この投稿が、WordPressにInstagramを簡単に埋め込む方法を学ぶのにお役に立てば幸いです。WordPressでカスタムFacebookフィードを作成する方法についてのガイド、またはWordPressのベストソーシャルメディアプラグインのエキスパートピックもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

19件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Ayanda Temitayo says

    This is the first time I am embedding instagram on my wordpress website and it seems somehow easy with this guide. I love the way you use illustrations and images for explanations. It’s a very long blog post but it was worth it.

    Thanks for this guide. Do you have any useful link to embed Twitter feed too?

  3. Todd says

    I have added an Instagram video on wordpress with the oAuth but am experiencing a problem. I have the page broken into 2 columns with videos going down the page and the Instagram videos have a large white space under them. Do you know a way to fix that? Here is my site http://www.BeardGrowl.com

    Thanks for any help you might be able to offer.

  4. Stephen Clark says

    I implemented this neat snippet as you instructed however when it rendered on my WP blog/site, it was a thumbnail sized photo. Is that the intended behavior? Or is it supposed to render the image at full size, meaning there is something in my code I need to dig into?

  5. Konstantin Kovshenin says

    Or you can simply wait for WordPress 3.5, which will ship with oEmbed support for SoundCloud, Instagram and SlideShare :)

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。