WordPress Instagram 表示 連携方法 簡単解説 インスタ 写真 フィード 掲載

WordPress で Instagram を 表示 させたい!ワードプレス と インスタグラム フィード を 連携させる方法はないか?今回は、そんなWordPress Instagram の 表示 連携方法について簡単解説していきます。

もともと、WordPressで作ったホームページにInstagramの写真を掲載することは、APIを使わないとできなかったのですが、インスタグラムが機能開発を強化したことで、非常に簡単になってきました。

もちろん、WordPress Instagram 連携が 自由自在!というわけではないですが、ワードプレスで作ったホームページに、インスタグラムのフィード投稿を連携させて表示させたりは、API連携のプログラム開発などしなくてもできるようになっています。

さっそく、WordPress Instagram 表示 連携方法を、解説していきます!

WordPress Instagram 表示 連携 方法

WordPress Instagram 表示を連携させる方法は、2021年12月時点で、大きく分けて、4つの方法があります。

  1. インスタグラム 埋め込み機能 活用 方法
  2. インスタグラム連携サービス 活用 方法
  3. WordPress Instagram 連携 プラグイン 活用 方法
  4. インスタグラムのAPI連携

といった4つの方法です。

1つ目の方法は、写真を1枚ずつしか、埋め込みできないので、ブログサイト、ニュースサイトなどで、1カラム1枚の紹介をしていくならいいでしょう。

しかし、自分のインスタグラムのフィードを複数写真にまたがって表示させたい、とかを考えていくと、2~4の方法になります。

ちなみに、1~3の方法はプログラミングもコーディングも不要です。自社サイトのデザインやレイアウト、目的を考えて、WordPress Instagram 連携の導入を進めてみてください。

なお、API連携は、導入ハードルが非常に高いので、この記事では紹介しません。

ちなみに、WordPress Instagram 表示 連携でニーズが高いのは、Instagramフィードをワードプレスのサイトに埋め込むことなので、これについて、解説している、ノウハウ系動画もご紹介しておきます!

WordPressのWebサイトにInstagramフィードを埋め込む方法

なんと すでに、12万回以上もYoutubeで再生されているWordPress Instagram 表示 連携についての解説動画でした。参考になりますよ!!

Instagramフィードを埋め込む方法は、市民権を得ているプラグインを活用するケースが多いので、こういうノウハウ動画を見ると、簡単にWordPress Instagram 表示 連携ができるイメージがわきますよね!

個別に解説します。

Instagram 埋め込み機能

Instagram 埋め込み機能 は、twitterやYoutubeなどにもある、いわゆる、投稿の埋め込み機能です。

Instagram 埋め込み機能は、Instagram 標準機能なので、実装が簡単です。Instagram 埋め込みの方法を簡単に解説します。

Instagram 埋め込み 手順

  1. PCでインスタグラムへアクセス
  2. 表示したいInstagramの投稿ページへ
  3. 画面 右上の三点リーダーをクリック
  4. 「埋め込み」を選択
  5. 埋め込みコードをコピー

あとは、ワードプレスのエディタにあわせて、張り付けるだけです!

最も簡単ですね。スマホにも対応しているので、そのまま、いいかんじに、スマートフォンでも、インスタグラムの写真がきれいに見えます。

ただInstagramの埋め込み機能は、写真1枚しか、埋め込めません。実際、これが残念ですよね。

Instagram 埋め込み機能は、しかも、自分のアカウントだけでなく、他の人のアカウントの投稿でも、埋め込みできます!!

wordpress instagram 埋め込み 表示されない

実は、地味に、wordpress で、instagram を 埋め込んだのに、表示されないという問題が起きていました。

これは、2020年10月に、インスタグラムAPIが変更されたことで、それより以前に、oEmbedによる埋め込みを行っていたページに発生したものです。

それゆえ、新しくインスタで、タグを取得しなおして、ワードプレスに張り付ければ、だいたいが、wordpress instagram 埋め込み 表示されるようになります。

それでも、wordpress instagram 埋め込み 表示されない 場合は、次に紹介するような外部サービスを使っていきましょう!

インスタグラム連携サービス 活用

インスタグラムに連携したWEBサービスを活用すると、Instagramで、複数の投稿写真の埋め込み、表示が可能になります。

インスタグラム連携サービス は、外部のwebツールなので、いろいろとあるのですが、この記事では、わりとポピュラーなSnapWidgetというツールをご紹介します。

SnapWidget とは

SnapWidget 公式ホームページ
https://snapwidget.com/

SnapWidgetとは、海外サービスで、ワードプレスで作ったホームページやブログ、普通にHTMLで制作したホームページに、instagramの投稿画像を表示できるツールです。

SnapWidgetは、無料で利用することも可能です。

SnapWidgetを無料で利用する場合、デメリットとしては、画像をタップしても、instagramの投稿写真ページに遷移しません。SnapWidgetのページに遷移します。

SnapWidget 有料版を使えば、ちゃんと、instagramの投稿写真ページに遷移してくれるようになります。

ユーザーライクではないので、表示だけがんばりたい!無料にはしておきたい!!wordpress instagram 自動連携はしておきたい!というときには、おすすめです。

SnapWidgetはfacebookやtwitter経由での会員登録ができるので、会員登録の手間が少ないですが、しっかり見せたいなら、有料版を使いましょう。

SnapWidgetは

  1. フィードレイアウト
  2. グリッドレイアウト
  3. ポップアップ

などレイアウトも調整可能なので、デザイン面ではいいんですけどね~

そこで、費用をあまりかけたくない方向けに、最後に、wordpress instagram プラグイン
を使っての、wordpress instagram 表示、連携方法をご紹介していきます。

wordpress instagram プラグイン

WordPresssとInstagram 表示 連携で、メジャーな方法がこれです。

ワードプレスの中にある、インスタグラムのフィード投稿表示プラグインをインストールして使う方法です。

wordpress instagram 連携プラグインでおすすめのプラグインは、冒頭のYoutube動画でも表現されるプラグイン「Smash Balloon Social Photo Feed」です。

Smash Balloon Social Photo Feedというプラグインを使えば、自動で、Instagramの最新投稿を取得してくれます!

ワードプレスの管理画面にあるSmash Balloon Social Photo Feedのプラグイン設定画面から、項目の表示・非表示や、写真の並び方、レイアウトの調整も可能です。

Smash Balloon Social Photo Feedとは

Smash Balloon Social Photo Feed 公式 ホームページ
https://ja.wordpress.org/plugins/instagram-feed/

Smash Balloon Social Photo Feedは、前述のとおり、Instagramのフィードを表示してくれるプラグインです。ワードプレスのバージョン5.8.2にも対応しています。

サクッと、「Smash Balloon Social Photo Feed」の設定方法を解説しておきます。

  1. まずは、プラグインメニューからインストール
  2. 有効化
  3. Smash Balloon Social Photo Feed 設定画面 へ
  4. インスタグラムアカウントと紐付け
  5. 「Display Your Feed」タブへ
  6. Instagram-feed のショートコードをコピー

あとは、掲載したいウィジェット、ページに張り付けるだけ!

とっても簡単にSmash Balloon Social Photo Feedの導入ができます。

なお、Smash Balloon Social Photo Feedを活用すれば、常に、WordPressで作ったホームページのサイドバー、フッタ、特定カラムにInstagramのフィード投稿を表示できます。

Smash Balloon Social Photo Feedは、昔、Instagram Feedという名前のプラグインでしたので、ほかのwebサイトで、Instagram Feedのことを解説していたら、Smash Balloon Social Photo Feedが、その後継版だと思ってください。

すでに100万以上がSmash Balloon Social Photoをダウンロードしているので、安心して使えるでしょう。

Smash Balloon Social Photo Feedは、無料プラグインなので、そこも安心です!

WordPress Instagram サイドバー

WordPress で、Instagram を サイドバー に表示させたい場合は、

Smash Balloon Social Photo Feedを使うといいでしょうね。

自動連携して、最新情報がでてきますし、ウィジェットにショートコードを張るだけです

もちろん、無料で、WordPress で制作したホームページのサイドバーに Instagram フィード投稿を表示できます。

wordpress instagram feed 表示されない

wordpress で Smash Balloon Social Photo Feed の プラグインを使っていても、instagram feed 表示されないということが起き得ます。

これは、何が原因かと申し上げますと

WordPressがjavascriptを非表示、使わない設定になっているときです。

function.phpにて下記のような記述がある場合、気を付けてください。これが原因かもです。

function my_delete_local_jquery() {
wp_deregister_script(‘jquery’);
}
add_action(‘wp_enqueue_scripts’, ‘my_delete_local_jquery’);

もし、上記のような記述が、function.phpにあれば、コメントアウトしてください。これで、wordpress instagram feed 表示されないエラーは解決するはずです!

wordpress instagram 自動投稿

wordpress 毎日書いているので、これを活用して、instagram に 自動投稿したい!という思いがある方!!

WordPressからInstagramに自動投稿できるプラグインもあります。

wordpress instagram 自動投稿プラグインで、有名な2つのプラグインをご紹介すると、

  1. Nelio Content
  2. Blog2Social

wordpress instagram 自動投稿 可能なプラグインを個別にご紹介します。

Nelio Content wordpress instagram 自動投稿

Nelio Content プラグイン紹介ページ
https://ja.wordpress.org/plugins/nelio-content/

Nelio Contentは、無料で使える、WordPressからInstagramへの自動投稿が可能になるプラグインです。

何よりも、無料がいいですよ!

ただし、Instagramのビジネスアカウントのみ対応ですので、そこはご注意ください。

ちなみに、Facebook、Twitterでも、ワードプレスから自動投稿可能です

Blog2Social wordpress instagram 自動投稿

Blog2Social プラグイン紹介ページ
https://ja.wordpress.org/plugins/blog2social/

Blog2Socialも、Nelio Content同様、Instagramや、twitter、facebookなどのSNSとの連携、自動投稿ができるプラグインになっています。

ただ、残念ながら、自動投稿が可能になるのは、Blog2Socialの有料版だけです。

Blog2Socialは、カレンダーから予約投稿もでき、投稿に対して、ハッシュタグの設定もできるので、運用効率アップにつながります。

便利なんですが、有料プラグインです。

まとめ WordPress Instagram 表示 連携方法 は プラグイン 最強!?

結論、WordPress Instagram 表示 連携方法は、Smash Balloon Social Photo Feedというプラグインがおすすめな方法です。

WordPress Instagram 表示 連携方法 簡単解説 してきましたが、やはり、インスタ 写真 フィード は、

  • 自動連携
  • 複数投稿表示
  • サイドバーへの常駐

をさせていきたいところ。

WordPress で Instagram を 表示 させることが容易にできる、Smash Balloon Social Photo Feedなら、ここは、一発回答ですからね。

また、ワードプレス から インスタグラム へ、自動投稿できるプラグインについてもご紹介しました。

フィード が表示されないときのエラー対処方法なども解説してきましたが、WordPress Instagram の 表示 連携方法は、ワードプレスをどれだけ活用できるかが1つのポイントになっています。

プラグイン利用で、ワードプレスで作ったホームページに、インスタグラムのフィード投稿を連携させて表示できるだけでなく、デザイン、レイアウトもいいかんじでできます。
ブログで投稿写真単体なら、インスタグラム 埋め込み機能 活用 でも、いいかんじになるとは思いますけどね。

【重要】サステナビリティ サイト 事例 3選 持続可能性 を PR する 企業 ページ

◆ wordpress 初期設定 プラグイン 関連記事

ECサイト を WordPress で 簡単構築! Welcart ウェルカート で 自社ECサイト
https://saras-wati.net/web-make/welcart/

【トラブル防止】
WordPress 自動更新 停止 方法 と プラグイン 限定 アップデート 方法
https://saras-wati.net/web-make/wordpress-auto-update-stop202006/

Googleの公式WordPressプラグイン Google sitekit(サイトキット)正式公開
https://saras-wati.net/news/google-sitekit201911/

WordPress(ワードプレス)がホームページ制作で人気な理由とメリットを解説
https://saras-wati.net/web-make/wordpress-homepage-merit2001/

簡単5分。Googleマイビジネスとwordpress連携!記事の自動投稿でPR
https://saras-wati.net/news/google-business-autopublish201911/

【初期設定】WordPress バックアップ 設定方法 おすすめ プラグイン BackWPup 使い方
https://saras-wati.net/web-make/wordpress-backup-backwpup/