河村友歌

ハッシュタグを指定して自動でインスタの写真をサイトに表示させる方法。

河村友歌

インスタを開始して6年、いまだフォロワーが少ない僕(@ka__zz)です!
 
ホームページやブログに、インスタの写真を自動で表示させられたら便利ですよね!
 
しかも指定したハッシュタグの写真を自動で!
 
それを簡単な設定で実現してくれるWordpressの有料プラグインがあって、実際に使ってみたら複数のハッシュタグをそれぞれ選別して、自動でホームページにインスタ写真を表示してくれたのです!
 
というわけで、プラグインの説明と設定方法を紹介します!
 
初心者でもわかりやすいように図解で解説していきます。
 

WordPressでインスタの写真をハッシュタグを拾って自動で表示してくれるの万能プラグイン。

インスタグラムで、ハッシュタグを指定して、その写真を自動でホームページやブログに表示させて、更新も全自動!そんな夢のようなWordpressプラグインがあります。
 
それが・・
 
「Instagram Feed Pro」
 
有料ですが設定も簡単で初心者でも楽チンなので、コストパフォーマンスは果てしなく高いです!
 
 

インスタ 機能
ハッシュタグ別の写真や♡数の表示は有料版だけの機能。

プラグインの機能はこんな感じです。
 
・インスタグラムの写真をホームページやブログに自動表示できる
・ハッシュタグを指定すれば、それも自動表示できる(有料版のみ)
・いいね!数やコメントまで表示できる(有料版のみ)
・写真を拡大表示できる(有料版のみ)

 
などなど、他にもたくさんの機能があって使い道に困ってしまうほど。
 
最高ですよね!
 

インスタ ハッシュタグ
#かなう家インテリア というハッシュタグを指定して表示させている

上記のように、指定したハッシュタグの写真だけを抽出して、自動で表示→更新してくれるのが、このプラグイン最大の強みです。
 
僕(@ka__zz)のように専門的な知識がなくても、さくっと出来てしまいます。
 

インスタ カスタマイズ
写真を拡大する機能も有料版のみです。

そして写真をクリックすれば、このように拡大表示されます!
 
素晴らしいじゃないですか。
 
写真を表示する列(カラム数)や大きさ、画面に対して写真を表示する幅の指定など、至れり尽くせりな設定が可能なんです!
 
ということで、実際のページをご覧ください。
 

▼プラグインを設置した実際のホームページ

まずはプラグインの購入とダウンロードそして有効化まで。

ではスタートです。
 
設置完了までの作業時間は20分ほど。
 
▼まずは、プラグインを購入する画面を開きます。
https://smashballoon.com/instagram-feed/pricing/
 

インスタ カスタマイズ

❶プラグインの購入

選択項目は2つあって・・
 
・ライセンスの数
・アップデート&サポートの年数
 
を、必要に応じて選択してください。
 
Wordpressは頻繁に仕様をアップデートしており、それに合わせてプラグインのアップデートも必要になります。
 
ホームページやブログの寿命に合わせてサポート年数を選びます。
 
 
次の画面で、決済方法の選択、名前、メルアドを入力すれば購入できます。
 
 
❷プラグインのダウンロード
 
購入手続きが完了したらプラグインをダウンロードします。
 
 
❸プラグインのインストールと有効化
 
ダウンロードできたらWordpressにInstagram Feed Proをインストール!
 
有効化をすれば準備完了です!
 
 
ではではさっそく設定方法を順に説明しましょう。
 

Instagram Feed Proを設定する

上がInstagram Feed Proのメイン設定画面です。
 
作業は2つあります。
 

①インスタグラムのアクセストークンを取得して入力する。

 
インスタとプラグインを認証させる作業で、アクセストークンが必要になります。
 
簡単です。
 
1.自分のインスタにログインします。
https://www.instagram.com/
 
2.Instagram 開発者画面 にとびます。
 
3.クライアントの登録(これが今回でいちばんめんどい)
この記事 を参考に設定してアクセストークンを取得してください。
 
4.取得したアクセストークンをInstagram Feed Proの設定画面に貼り付けて完了!
 

②ハッシュタグの設定。

 
ここからは簡単です。
 
ホームページに表示したいインスタグラムのハッシュタグを設定します。
 
ハッシュタグは複数を設定できて、タグとタグの間に[,]で区切ります。
 
注意点としては・・
 
よくありがちなハッシュタグの場合は、意図していない他人の写真が表示されてしまいます。例えば自分の店のラーメンだけを表示させたい場合は、”#ラーメン次郎の激ウマラーメン”のように細かいハッシュタグにすると意図した写真を表示できます。
 

Instagram Feed Proのデザインをカスタマイズする。

ここでは、ホームページやブログに設定するデザインのカスタマイズをします。
 
①パソコンの画面に対してのインスタを表示する横幅の割合
 
基本100%がいいと思いますが、ニーズに応じて%を変更してみてください。
 
②&③表示する写真の枚数を設定します。
 
これは③で設定するカラム数(写真の列数)の倍数が②にすると綺麗に表示されます。
 
カラムが3だったら6,9,12・・で、カラムが4だったら8,12,16・・です。
 
注意点は、スマートフォンでも同じ枚数の写真が表示されるので、多すぎると大変です
 
 
インスタ カスタマイズ

④インスタ写真の表示を新しい順にするか古い順か?(基本はNewest to oldest)
⑤クリックした時にアップ表示するサイズです。
⑥動画も表示する場合は”すべて”です。
⑦カーソルを写真に合わせた時の色です。
⑧ ⑦のテキストの色です。
⑨ ⑦に表示する情報を選択します。

 

ホームページやブログにInstagram Feed Proのタグを貼り付けて完了!

インスタ ホームページ

最後に、Instagram Feed Proを表示したいページに下記のタグを書いて終了です。
 
▼このタグをコピーしてそのまま使っても大丈夫です。
[instagram-feed hashtag="#表示したいハッシュタグ"]

例えば・・
 
#美味しいパンケーキ
 
というハッシュタグの写真を表示したい場合は・・
 
[instagram-feed hashtag="#美味しいパンケーキ"]

を表示したいページや記事に貼り付けてください。
 
 
以上です!
 
インスタに新しい写真がアップされれば自動でホームページの写真も入れ替わります。
 
最高ですね!
 

▼プラグインを設置した実際のホームページ

自分でやるのが面倒だったり、わからなければ僕(@ka__zz)のほうで作業しますので連絡ください。
 
それから一般的なWEB製作会社では行わない、心理カウンセリングとコーチングの手法を用いた企業さま、店舗さまのホームページ作成、Wordpressの個人レッスンやアクセスアップのトレーニングもやらせてもらっています!
 
ご連絡はこちらから
 

それでは皆さん、よい一日を!
 
Have a good day!
 
and God bless you!!

 

河村友歌
最新情報をチェックしよう!

Warning: Trying to access array offset on value of type null in /home/wp364286/vegepples.net/public_html/wp-content/plugins/amazonjs/amazonjs.php on line 637

Warning: Trying to access array offset on value of type null in /home/wp364286/vegepples.net/public_html/wp-content/plugins/amazonjs/amazonjs.php on line 637