WordPressのサイドバーウィジェットにInstagramの写真を表示する方法

WordPressのサイドバーにInstagramの写真を表示したいですか？

Instagramの投稿は、あなたのサイトの素晴らしいコンテンツになります。Instagramフィードを作成することで、サイトを新鮮で興味深いものに保つと同時に、Instagramアカウントを宣伝することができます。

この投稿では、WordPressのサイドバーウィジェットにInstagramの写真や動画を表示する方法を紹介します。

なぜWordPressサイトにInstagram Feedを追加するのか？

当社のマーケティング統計調査によると、Instagramの月間有効ユーザー数は20億人を超えています。つまり、商品やサービス、ブログ投稿を宣伝するのに最適な場所なのです。

業種によっては、Instagramがあなたのサイトを宣伝するのに最適な場所になることさえある。例えば、Instagramはトップファッションブログ、料理、ライフスタイル、写真サイトの間で特に人気がある。

しかし、WordPressのサイトにアクセスするだけでは、Instagramの投稿を見ることはできません。 そのため、Instagramのフォロワーを増やしたり、写真や動画のエンゲージメントを獲得したりすることが難しくなります。

とはいえ、WordPressサイトにInstagramフィードを追加するのは良いアイデアだ。そうすることで、あなたのInstagramページへのトラフィックを増やすことができ、訪問者がコメントを残したり、「共有」ボタンをクリックしたりして、あなたの投稿と交流することを促すことができる。

ということで、WordPressのサイドバーウィジェットにInstagramの写真を簡単に表示する方法を見てみよう。

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

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

フィードを作成したら、ショートコードかブロックを使ってサイドバーに追加できます。

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

このガイドでは、Smash Balloonの無料版を使用します。Smash Balloonには、Instagramフィードを埋め込むのに必要なものがすべて揃っているからです。ただし、ハッシュタグフィードを表示したり、WordPressにInstagramのShoppable画像を追加したりできるPro版もあります。

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

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

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

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

プラグインを有効化したら、いよいよInstagramアカウントをWordPressに接続します。Instagram Feed ” Settingsに行き、’Add New’をクリックするだけです。

Smash Balloon Proでは、タグ付けされた投稿やハッシュタグからフィードを作成したり、さまざまなサイトのコンテンツを組み合わせてソーシャルウォールを作成することもできます。

例えば、YouTubeチャンネルの最新動画、最近のツイート、Facebookグループのフィードなどを 表示することができます。

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

その後、WordPressでカスタムInstagramフォトフィードを作成するために使用するInstagramアカウントを選択する必要があります。

始めるには、『ソースを追加』をクリックする。

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

Personal」にチェックを入れると、Smash Balloonは初期設定でヘッダーにInstagramのアバターと経歴を含めません。ただし、プラグインの設定でいつでもアバターとバイオグラフィーを手動で追加することができます。

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

これで、使用したいInstagramアカウントにチェックを入れ、「次へ」をクリックすることができる。

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

それが終わったら、『次へ』をクリックする。

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

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

とはいえ、すべてのスイッチを有効化したままにしておくことをお勧めする。

準備ができたら、『完了』をクリックする。

WordPressにリンクしたInstagramアカウントのポップアップが表示されます。

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

Smash Balloonは自動的にInstagramフィード ” すべてのフィードに戻ります。

ソーシャルメディアフィードを作成するには、Instagramアカウントの横にあるボックスにチェックを入れるだけです。そして、『次へ』をクリックします。

プラグインがサイト用のInstagramフォトフィードを作成し、Smash Balloonエディターで開きます。

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

エディターを使って、Instagramの写真をサイト上でどのように見せるかを微調整できる。

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

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

まず、左側のメニューから「フィードレイアウト」を選択し、フィードのレイアウトを変更したり、パディングを追加したりすることができる。変更を加えるとプレビューが自動的に更新されるので、Instagramの写真フィードに最適な設定を試すことができる。

初期設定では、Smash BalloonはデスクトップPCとモバイル端末で同じ数の投稿を表示します。

Instagramフィードがデスクトップコンピューター、タブレット、スマートフォンでどのように表示されるかは、右上隅にあるボタンの列を使ってプレビューできます。さまざまなレイアウトをテストすることで、訪問者がどの端末を使用していても、見栄えの良いInstagramフィードを作成することができます。

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

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

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

WordPressサイトのモバイル版をテストした後、スマートフォンやタブレットでのカラムの表示に不満があるかもしれません。そのような場合は、「カラム」セクションの数値を変更することで、カラム数を少なく表示することができます。

変更が完了したら、「カスタマイズ」リンクをクリックしてください。

これでSmash Balloonのメインエディターに戻り、次の設定画面である「配色」を探索することができる。

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

もう一つのオプションは、「カスタム」を選択して独自の配色を作成し、コントロールを使って背景色やボタンの色、テキストの色などを変更することです。

Smash Balloonの初期設定では、フィードにヘッダーが追加され、Instagramのプロフィール写真とページ名が表示されます。これは、WordPressにInstagramを埋め込むだけで、何の説明もないよりも、文脈を追加することができます。

このセクションの見栄えを変えるには、左側のメニューから「ヘッダー」をクリックする。

この画面では、ヘッダーのサイズや色を変更したり、Instagramのバイオを表示したり非表示にしたりできる。

別のプロフィール写真を表示したい場合もあるでしょう。例えば、InstagramのアバターとWordPressのテーマがぶつかるかもしれません。

これを行うには、「カスタムアバターを表示」の下にある「画像を追加」をクリックするだけです。

WordPressのメディアライブラリから画像を選択するか、コンピューターから新しい写真をアップロードします。

同様に、異なるバイオを表示することもできます。例えば、Instagramのフィードを紹介したり、より素晴らしいコンテンツを求めてフォローを促したりすることができます。

Instagramのバイオを置き換えるには、「カスタムバイオを追加」ボックスに入力するだけです。

Smash Balloonは、Instagramの写真を自動的に分析し、最適な解像度で表示します。初期設定はほとんどのサイトに適していますが、画像を大きくしたり小さくしたりすることも可能です。

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

ドロップダウンメニューでサムネイル、ミディアム、フルサイズを選択できるようになりました。このトピックについては、WordPressの画像サイズに関する初心者向けガイドをご覧ください。

結果に満足できない場合は、いつでもこの画面に戻り、ドロップダウンメニューから「自動検出（推奨）」を選択することができます。

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

重要なボタンなので、左側のメニューから「Load More Button」オプションを選択してカスタマイズするとよいだろう。

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

また、「テキスト」フィールドに入力してボタンのラベルを変更することもできます。

もう一つのオプションは、「有効化」トグルをクリックしてボタンを完全に削除することです。こうすることで、サイト上で見られる投稿を制限することで、Instagramへの訪問を促すことができる。

Smash Balloonが自動的に追加する「Instagramでフォロー」ボタンを使って、訪問者があなたのInstagramをフォローするかもしれません。

それを念頭に置いて、左側のメニューで「フォローボタン」を選択することで、ボタンを目立たせることができるかもしれない。

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

初期設定では、ボタンには一般的な「Instagramでフォロー」のラベルが付いています。

テキスト」フィールドに入力することで、これを自分のメッセージに置き換えることができる。

Instagramフィードの見た目に満足したら、「保存」をクリックして変更を保存するのを忘れないでください。これで、WordPressのサイドバーウィジェットにInstagramフィードを追加する準備ができました。

WordPressのサイドバーウィジェットにInstagramの写真を追加する方法

Instagramフィードブロックを使って、サイドバーなどにInstagramフィードを追加できるようになりました。

Smash Balloonを使って複数のフィードを作成した場合は、フィードのコードを知る必要があります。

Instagram ” All Feedsにアクセスし、’Shortcode’カラムの値をコピーするだけです。以下の画像では、instagram-feed feed=1を使用する必要があります。

それが終わったら、WordPressダッシュボードの外観 ” ウィジェットに行く。

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

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

WordPressにはビルトインのInstagramウィジェットがあるので、Instagramの公式ロゴが表示されるものを選んでください。

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

ウィジェットには、Smash Balloonを使って作成したフィードが自動的に表示されます。

代わりに別のフィードを表示するには、そのフィードのショートコードを「ショートコード設定」ボックスに入力し、「変更を適用」をクリックするだけです。

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

ブロック対応のテーマを使用している場合、フルサイトエディターを使ってInstagramフィードをサイドバーに追加できます。始めるには、外観“ エディター.

エディターで、サイドバーセクションをクリックして選択し、「+」ボタンをクリックするだけです。

次に「Instagram Feed」と入力し始め、表示されたら適切なブロックを選択する。

初期設定では、フルサイトエディターにはSmash Balloonを使って作成したInstagramフィードのいずれかが表示されます。別のフィードを表示するには、上記と同じ手順でショートコードを追加するだけです。

Instagramフィードの見た目に満足したら、「保存」をクリックする。

WordPressでInstagramの特定の写真を表示する方法

特定のInstagram投稿をサイトで紹介したい場合もあるでしょう。これは、最も人気のある写真、常緑の投稿、あるいは現在開催中のソーシャルメディアコンテストかもしれません。

過去には、oEmbedとして知られるプロトコルを使用して、WordPressにInstagramの投稿を簡単に埋め込むことができました。しかし、FacebookがoEmbedの動作方法を変更したため、WordPressにInstagramの写真を簡単に埋め込むことができなくなりました。

Smash Balloonは、FacebookとInstagramのoEmbed問題を解決します。これにより、特定のInstagram投稿を任意のページ、投稿、サイドバーなどのウィジェット対応エリアに簡単に埋め込むことができる。また、WordPressでカスタムFacebookフィードを簡単に作成することもできます。

この機能を有効化するには、Instagram Feed ” oEmbedsにアクセスします。そして、「Instagram」の隣にある「有効化」ボタンをクリックしてください。

その後、外観 ” ウィジェットに移動し、青い「+」ボタンをクリックします。

検索バーに『埋め込み』と入力して、適切なブロックを見つける。

埋め込み」ブロックが表示されたら、写真を表示したいエリアにドラッグします。

Embed」フィールドに、サイトに表示したいInstagram投稿のURLを貼り付けるだけです。そして、’Embed’をクリックする。

WordPressにInstagramの投稿が表示されます。

見た目がよければ、「更新」をクリックして本番にする。

あなたのサイトにアクセスすると、Instagramの投稿がライブで表示されます。

ブロック有効化テーマを使用している場合は、フルサイトエディターを使用して特定のInstagram投稿を追加する必要があります。

これを行うには、Smash BalloonのoEmbed機能を有効化し、上記と同じ手順でInstagramの投稿のURLを取得するだけです。

その後、WordPressダッシュボードの外観“ エディターからフルサイトエディターを開きます。フルサイトエディター内に入ったら、サイドバーセクションの「+」ボタンをクリックし、「Embed」と入力する。

右のブロックが外観表示されたら、クリックしてサイドバーに追加する。

埋め込みたい投稿のURLを追加し、「埋め込み」ボタンをクリックします。

フルサイトエディターにInstagramの投稿が表示されるようになりました。

見た目がよければ、「保存」をクリックして、この写真や動画をブロック有効化サイドバーに公開します。

WordPressでInstagramの投稿を表示するよくある質問

Smash Balloonを使用すると、カスタムのInstagramフィードを簡単に作成したり、特定のInstagram投稿をWordPressサイトに表示したりすることができます。

そこで、WordPressでInstagramの投稿を表示する際によくある質問をいくつかご紹介します。

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

Smash Balloonは、個人または企業のInstagramアカウントの写真を表示することができます。

ただし、Smash Balloonは、個人のInstagramアカウントからInstagramのアバターと経歴を自動的に取得することはできません。代わりに、プラグインの設定でアバターとバイオグラフィーを手動で追加する必要があります。

そのことを念頭に置いて、個人口座かビジネス口座かを確認し、必要であればビジネス口座に切り替えたほうがいいかもしれない。

これを行うには、Instagramのアカウントにアクセスし、サイドメニューのラインアイコンをクリックするだけです。

その後、「設定」をクリックする。

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

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

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

WordPressでInstagramの写真を表示する前に、まずInstagramアカウントをFacebookページに接続する必要があります。

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

そうしたら、「Linked Accounts」をクリックする。

Instagram」を選択し、「Connect」ボタンをクリックします。

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

これでよろしければ、「接続」ボタンをクリックしてください。

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

次の画面に移る準備ができたら、「確認」をクリックします。

ユーザー名またはメール・アドレスとパスワードを入力するポップアップが開きます。

その後、「ログイン」ボタンをクリックする。

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

WordPressでInstagramの画像を表示するには？

以前は、oEmbedとして知られるプロトコルを使用して、WordPressにInstagramの画像を簡単に埋め込むことができました。

しかし、FacebookがoEmbedの動作方法を変更したため、WordPressにInstagramの画像を簡単に埋め込むことができなくなった。

代わりに、WordPressにInstagramのコンテンツを埋め込む前に、アプリを登録し、クライアントトークンを使用してFacebook Graph APIからデータを取得する必要があります。

ありがたいことに、Smash Balloon Social Photo Feedプラグインを使えば、WordPressでInstagramのoEmbed問題を簡単に解決できる。そうすれば、特定のInstagramの写真をサイトに埋め込むことができる。

WordPressサイトのフッター、ヘッダー、サイドバーなど、ウィジェット対応のエリアにInstagramの写真を追加することもできます。これにより、サイト全体で同じ画像を簡単に表示することができる。

この投稿が、WordPressのサイドバーウィジェットにInstagramの写真を表示する方法を学ぶのにお役に立てば幸いです。また、WordPressにFacebook動画を埋め込む方法や、WordPressとWooCommerceに最適なソーシャルプルーフプラグインのエキスパートピックもご覧ください。

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.