【インスタ掲載方法】WordPressでinstagramをハッシュタグやユーザー名で表示する方法

ワードプレスでブログを運営していると、記事の投稿にインスタの写真を載せたら記事が華やかに、いろんなものを紹介しやすいのにな～って思うことがあると思います。

というか、私がそう思ったので同じことを思う人がいるはず！

ということで、ワードプレスのプラグインを使って簡単にinstagramをメンバーとハッシュタグの両方で投稿する方法をご紹介します。

(最新&無料の方法)Wordpressの記事に#ハッシュタグで取得したインスタグラム画像を表示する方法

2018年12月にインスタグラムのAPI変更が行われて、＃ハッシュタグで画像を表示するのが難しくなりました。
API規約変更後も、＠ユーザー名でインスタグラム画像を記事内に入れるプラグインは無料でたくさんあるのですが、＃ハッシュタグの場合は海外の有料のプラグインが必要でした。

でもでも、何とか無料で！そして結構簡単な方法で！
#ハッシュタグでインスタ画像を投稿や固定ページ、サイドバー、フッターに表示できる方法を見つけました^^

使うプラグインは以下の２つのプラグインです。

• 【 Meks Easy Instagram Widget 】
• 【 amr shortcode any widget 】

え！？二つも必要なの？って思われたかもしれませんが、簡単に実現するためには2つ必要なのです。。。ｽﾐﾏｾﾝ。

でも、めちゃ簡単です！！

1つ目のプラグイン名を見てもらえばわかりますが、ウィジェットにインスタグラムを表示できるプラグインで、＠ユーザー名or#ハッシュタグのどちらかで表示が可能です。

このウィジェットを【 amr shortcode any widget 】プラグインで、投稿や固定ページに表示させちゃおう、ということです。ウィジェットをサイドバーだけじゃなくて記事内でも使いたいなーと思ったことはありませんか？このプラグインなら可能にさせます。

詳しく手順をご紹介します。

プラグインインストール、設定手順について

メニュー＞プラグイン＞新規追加　に進み、キーワードに【meks】と入力します。

meksさんが作ったプラグインがたくさん表示されました。
この中で真ん中に【 Meks Easy Instagram Widget 】というプラグインがありますので、今すぐインストール⇒有効化　をクリックします。

メニュー＞外観＞ウィジェットに進むと、ウィジェットの項目に、 【 Meks Easy Instagram Widget 】 が増えていることが確認できます。

とりあえず、好きなサイドバーにウィジェットを追加して、中身を見るとこんな感じになっています。
Titleの次の入力欄が、「Username or Hashtag:」となっていることがわかると思います。

例えば、
Example 1: @natgeo
Example 2: #flowers
Example 3: @natgeo, #flowers, @someother
と入力することで、ユーザー名とハッシュタグで表示が可能になります。いいねー！

とりあえず、これでインスタグラムをゲットする準備は整いました。
これだけだとウィジェットでの表示になりますので、投稿記事にウィジェットを表示できるようにします。

使うプラグインは 【amr shortcode any widget 】です。同様に、プラグインインストールからこの文字を打ち込んで検索します。

下のプラグインが表示されますので、 今すぐインストール⇒有効化　をクリックします。

プラグイン一覧に、【 amr shortcode any widget 】がインストールされていることを確認します。

このプラグインをインストールすると、ウィジェットの項目の一番下に、To use as shortcode with id : ［do_widget id=xxxxxxx］ という文言が追加されます。ショートコードとしてこれを使ってね、ということです。

このインスタグラムのショートコードは［ do_widget id=meks_instagram-xx ］になると思いますので、これをコピーします。

プラグイン 【 amr shortcode any widget 】 をインストールするとご丁寧に「Widgets for Shortcodes」というウィジェット項目が追加されます。
要は、テーマのウィジェットに影響しないショートコード用のウィジェットを使ってね、ということです。テーマのウィジェットを使うと、表示したくないところにインスタ画像が表示されてしまいますから(^-^;)

だから、このウィジェットに追加していきましょう。
複数インスタ画像を使用したい場合も、このウィジェットに【meks easy instagram widget】を追加していけばよいです。

最後に、コピーしたショートコードを、表示したい記事や固定ページに貼り付けます。

下にタイトルに沖縄の海インスタ写真、ハッシュタグ#沖縄の海、写真表示12個、4列で表示してみました。
インスタグラムとのコネクション(データ取得)非常に不安定なのか、画像を取得できない場合があります。何回か更新してもらえば表示されます。また、kokiさんのインスタグラムはセキュリティ設定のためか、データを取得できなくなっています。

[do_widget id=meks_instagram-2]

[do_widget id=meks_instagram-3]

[do_widget id=meks_instagram-4]

[do_widget id=meks_instagram-5]

↑
kokiさんのインスタは取得できないって！

meks easy instagram widgetの設定方法について

表示方法の設定はウィジェットから設定します。
設定項目は以下の通りです。

• Title:タイトル
• Username or Hashtag: ユーザー名あるいはハッシュタグ
• Number of photos : 表示する写真の数
• Columns : 写真の列の数
• Photo spacing: 写真との間の間隔をpx単位で設定
• Widget container size : ウィジェットの幅
• Refresh interval : 画像更新の頻度
• ”Follow” link text : ”Follow”の文字を変更します

---

以下はAPI変更前の古い記事になります。

これからご紹介する方法で、ワードプレスの記事にインスタグラムを埋め込みができます。

インスタのユーザー名、ハッシュタグ名のどちらかを選んで表示することも可能で大変便利なプラグインです。使い方もシンプルです。

インスタユーザー名の表示(gallery)

User名でgallery表示をした場合はこのような感じで表示されます。kokiさんのインスタを表示してみました。

[insta-gallery id=”1″]

インスタハッシュタグ名の表示(Carousel)

ハッシュタグで#dogを設定して、Carousel(回転ラック)を選択した場合はしたのようになります。

[insta-gallery id=”2″]

では、このような表示を簡単にする方法をご紹介していきたいと思います。

プラグイン【Instagram Gallery】を使って実現しよう！

簡単にインスタのフィードをワードプレス記事に載せるために、「Instagram Gallery」というプラグインを使用します。

Instagram Galleryのインストール方法

ワードプレスのメニューで、「プラグイン⇒新規追加」で【Instagram Gallery】を打ち込んでください。コピペが良いですね。

インストールしたら有効化します。メニューの設定の中にInstagram Galleryという項目ができます。

Instagram Galleryの使い方

最初はこのような画面になりますので、「＋ADD NEW GALLERY」をクリックします。

するとこのような画面に遷移します。

ここでまず、表示したいインスタがあるユーザーのインスタグラムなのか、それとも＃のハッシュタグから表示したいで分かれます。

ユーザー名での表示

ユーザー名で表示したい場合は、「◎Username」となっているほうを選択して、Instagram Usernameの空欄に入力します。

上で表示したkokiさんのユーザー名だったら、「kokioffical_0205」がUsernameとなります。

このユーザー名はインスタグラムではこのように表示されていますよね。

ハッシュタグでの表示

インスタグラムをご利用したことがある方は、ハッシュタグをご存知だと思います。インスタグラムは基本的に頭に＃がつくハッシュタグで検索されることが多いです。

例えば、「#犬」というハッシュタグで表示しようとすると、犬の写真に#犬とハッシュタグをつけている写真が表示されることになります。

ハッシュタグの写真を表示したい場合は、「◎Tagname」を選択し、Instagram  Tagnamの空欄に入力します。

写真の表示方法を選択しよう！

ユーザー名で表示するかハッシュタグで表示するかを選択したが、次にインスタ写真をどのように表示するかを選択します。

選ぶスタイルは、タイルのようなギャラリースタイルか、写真を横に並ばせて自動でスクロールさせたりできるカルーセルスタイルです。

• No. of Grid Columns（1列に何枚の写真を表示させるか）
• Image hover effect (マウスを乗せた時にアニメーションさせるか)
• Space between images (写真と写真の間に白いスペースをいれるか)

Carousel(カルーセル)のスタイルはこちらのような形です。

Show As: でCaraouselを選択し、

• Slides per view: (一度のスライドで何枚の写真を表示させるか)
• Autoplay (自動でスライドを動かすか)
• Navigation arrows (矢印を表示させて写真を動かせるようにする)
• Navigation arrows color (矢印の色を指定)
• Dotted navigation (●で写真を選ぶことができるボタンを表示するか(将来のアップデートでなくなり可能性も))
• Space between slides (写真と写真の間のスペースを空けるか)

写真の大きさや、いいねの表示などの細かい設定

特に気にしなければ、ここは変更しないでも大丈夫な箇所です。あなたのページから他のページに行ってほしくない場合は、最後のチェックは外したほうが良いでしょう。

• Images thumbnail size (写真のサイズを指定します 640, 320x autoと150×150)
• Images hover effect color (カーソルを乗せると写真に色がつきます)
• Popup images on click (写真をクリックしたら大きく写真を表示させるか)
• Display Likes (写真のいいねを表示させるか)
• Diplay Comments (写真のコメント数を表示させるか)
• Display Instagram Link Button (インスタへのリンクボタンを表示する)

何も変更しなければ、ここまで1分くらいでできます。

完了したらUPDATEを押して完了です。するとはじめは何もなかったリストに新しくできています。

[insta-gallery id=”1″]

というものが、kokiofficial_0205のUsernameで作ったインスタギャラリーになります。

そのまま貼りつけてみると、↑で紹介したように表示されます。

[insta-gallery id=”1″]

プラグインを使わないで一つのインスタ写真だけ貼りつける方法

投稿画面にインスタグラムの画像を貼りつけたい場合は、以下の記事を参照ください。

【インスタ埋め込み】ワードプレスにInstagramをサイトをお洒落にする方法

まとめ

いかがでしたでしょうか？

プラグインを使うととても簡単に投稿から写真を表示することができちゃいます。商品の紹介でタグを利用したり、芸能人のトレンドアフィリなどを扱っていたらご本人のインスタグラムなどを表示することもできますね。引用になるので使いやすいかなと。

インスタグラムをそのまま埋め込む方法もあります。あまりたくさん埋め込むと重くなり表示が遅くなってしまう恐れがありますので、プラグインでスマートに表示することをおすすめしますよ～。