2018/02/15 2018/11/22

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

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

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

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

上記に当てはまる方！読んでみて下さい！

1 まずは実際にInstagramのフィードを埋め込んだものを表示します
2 いろいろ試しましたが「Instagram Feed」プラグインでは物足りなかった
3 Insta Showプラグインのインストール＆有効化
4 Insta Showプラグインの設定
5 Insta Showプラグインの埋め込み
6 実際に完成した埋め込み表示
7 最後に・・・僕のSNSの使いこなし方
8 SNS関連の他の記事もおすすめ

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

写真横２枚並びて表示してみました！！

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

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

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

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

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

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

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

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

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

手順１：WordPressの管理画面→プラグイン→新規追加→右上の検索バーに「InstaShow Lite」と入力
手順２：今すぐインストール→有効化

これで完了です！

Insta Showプラグインの設定

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.instashow-gallery .instashow-gallery-media-cover {
    background: #f8aa09 !important;
}

.instashow-gallery .instashow-gallery-media-cover {

background: #f8aa09 !important;

}

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

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

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

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

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

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

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