ライフスタイルクリエイターズ

神田 翼 (管理人)のプロフィールはこちら

InstagramをWordPressに埋め込むには「Insta Show」プラグインが最適!Instagram Feedより良い!

こんにちは、フリーランスパパの神田翼(@tsubasa_lsc)です。

WordPressにインスタグラムのフィードを埋め込む方法をご紹介します。

こんな方におすすめ Instagram Feedでは物足りなかった人
「写真クリック→大きく表示→内容が見える」を求めている人(lightbox風)
プラグインは無料に限る!という人
上記に当てはまる方!読んでみて下さい!

スポンサーリンク

まずは実際にInstagramのフィードを埋め込んだものを表示します

写真横2枚並びて表示してみました!!

※実際にタップ・スワイプできます

写真横4枚並びて表示してみました!!



どうでしょう?求めていたものでしたか?このフィードを埋め込みできるのが「Insta Show」プラグインです。無料です。

いろいろ試しましたが「Instagram Feed」プラグインでは物足りなかった

インスタグラムをWordPressに表示させたいのであれば、プラグインを使用するのが簡単でおすすめです。インスタグラムの埋め込みプラグインの中で最も有名なのが、「Instagram Feed」です。検索すれば上位に表示され、このプラグンについて書かれている記事も多数あります。僕も「Instagram Feed」を導入してみましたが、あとひとつ足りない機能が!!

それは表示された写真をクリックしたら、インスタグラムのページに飛んでしまうこと。僕の望んでいるものは、写真をクリックしたら、ぐわんっと大きく表示されて(lightboxと言います)、投稿の中身が見える形

厳密に言えば、「Instagram Feed」でも可能です。有料バージョンであれば!!
ほとんどの方が「いやいや、訳もわからん海外のプラグインにお金を払うのは怖い」と思っていることでしょう。

僕、見つけましたよ。ぐわんっと表示される無料のインスタグラムフィードを表示するプラグイン「Insta Show」を。

Insta Showプラグインのインストール&有効化

手順1:WordPressの管理画面→プラグイン→新規追加→右上の検索バーに「InstaShow Lite」と入力
手順2:今すぐインストール→有効化
これで完了です!

Insta Showプラグインの設定

ここからは細かい設定の説明をしていきます。

1.WordPressの管理画面→サイドバー「InstaShow」をクリックして開く

※プラグインの有効化が完了しないと表示されません

2.ご自身のインスタグラムアカウントを紐付ける

青のボタン「Authorize in Instagram」をクリックする。
※この時、表示したいインスタグラムのアカウントに、同じブラウザ上でログインしておく必要があります

緑のボタン「Authorize」をクリックして、アカウントの紐付け完了。

3.何枚写真を表示させたいかを設定する

「Sizes」のGridを変更します。Columnsは横に何枚表示させるか。lowsは縦に何枚表示させるか。
Columnsが4で、lowsが1の場合、最新の投稿が4枚だけ表示されます。

4.矢印・スワイプなどの設定をする


僕が気になったところのみをピックアップして説明しています。他の機能はご自身でイジって変化を見ながら設定してみてください。基本的には変更は必要ないと思います。

Insta Showプラグインの埋め込み

「GetShortcode」をクリックして開き、表示されたショートコードをコピーして、表示したい場所に貼り付けます。

WordPress専用のショートコードなので、PHPにはそのまま貼り付けることができません。PHPにショートコードを貼り付けたい場合は、下記の記事を参考にして下さい。
WordPressのPHPファイル内でショートコードを呼び出すためのコード

実際に完成した埋め込み表示

僕は全ページの下部にフィードが表示されるようにしました。このように表示されます。「follow me on Instagram」という表記は自分でいれました。

マウスオンすると、文章が表示されます。

背景が黄色くなっているのも自分でCSSで書き換えました。以下参照。

写真をクリックすると、このように大きく表示されます。これですよ、これ。これがしたかったー。

最後に・・・僕のSNSの使いこなし方

みなさん、SNSは何を頻繁に使っていますか?インスタグラム、Twitter、Facebook等々。主要SNSをすべて使いこなすのは、なかなか難しいですよね!でもブログを読んでくれている読者の方が、「リピーター」や「ファン」になってもらうための手段としてはSNSは最適です。

頑張って更新しましょう!ちなみに僕はこんな風に使いこなしています。

Instagram (@tsubasa_lsc)
完全にプライベートな投稿。子どもたちの成長や、家族でのおでかけの写真が8割以上。仕事のことはほぼ書かない。

Twitter (@tsubasa_lsc)
情報収集・インプットをメインに「知る」ために使用。ブログ投稿の共有や、ブログ関連のツイートをたまに。

Facebook (@LIFE STYLE CREATORS)
仕事用。もうほとんどのユーザーがアクティブではないSNSかなと思うので、完全にブログ投稿の共有用。

SNS関連の他の記事もおすすめ

SNSのさらに詳しい上手な使いこなし方や、それぞれの最適な役割についてはこちらの記事で書いています。
口コミだけで仕事をもらうフリーランス・WEBデザイナーのSNS活用法

どのSNSを使えばいいの?と思っている方には、こちらの記事がおすすめです。
Facebookの衰退から見る、次に使うべきSNS!2018年3月(現在)のリアルなSNS事情


スポンサーリンク

デザイナー/フリーランスパパ@神田翼
神田翼

フリーランスのWebデザイナーの神田 翼です。2児の父親です。父親でもガッツリ子育てがしたいという思いから、フリーランスとして働くことにしました。このブログではフリーランス・子育て・WordPress・ブログ運営のことを書いています。(プロフィール)

最新の記事一覧

月別表示

トップへ戻る