クリエイティブライフハック

写真とオンラインメディアの話をしよう。ブログ、ソーシャルメディア、オウンドメディア、ホームページ、ハンドメイドマーケット、Etsy、minne、Creema、iichi…

Instagram - WordPress 連携プラグインはこの2つを使う

オンラインメディア

instagramとWordPressの連携プラグイン。ウィジェットを貼る方法。

投稿日:2015/04/17 更新日:

ブログはWordPressを使っている。
最近、Instagramが流行ってるらしいので使い始めた。
で、Instagramに投稿した写真をWordPressに自動的に表示できないの?

そんなあなたにオススメのプラグインをご紹介します。

スポンサーリンク

インスタグラムとWordPressの連携プラグイン

Instagram Feed

記事ごとに違う表示のインスタグラムウィジェット(パーツ)を貼るプラグイン

icon-download Instagram Feed

プラグイン「Instagram Feed」をインストール及び有効化し、設定画面を開くと Instagram の Access Token (アクセストークン)と User ID (ユーザーID)を入力する箇所があります。

青色のボタン[Log in and get my Access Token and User ID]をクリックして取得します。

アクセストークンとユーザーIDを取得する

Instagram から認証を求められるので自分のアカウントネームが正しいかを確認して[Authorize]ボタンをクリック。

Authorization Request Instagram

アクセストークンとユーザーIDが表示されるので、それを入力(コピーアンドペースト)して[変更を保存]ボタンをクリック。

アクセストークンとユーザーIDの表示

インスタグラムの写真を記事に貼り付ける

記事やサイドバーに貼り付ける方法は簡単。
[instagram-feed]と書くだけで表示できます。
※カッコは半角の [ ] に変えてください。

instafeed

ショートコードオプションを加えれば表示方法をカスタマイズすることもできます。
どんなショートコードオプションが使えるかは、Instagram Feed 設定画面の「3. Display Your Feed」タブで確認できます。

オプションコード

幅はデフォルトで100%に設定されているのでレスポンシブでスマホ対応(モバイルフレンドリー)なので、基本的には100%のままが良いでしょう。

少し、設定を変えてみます。
数を9、3列にしてみます。
[instagram-feed num=9 cols=3]

instafeed

Enjoy Instagram

サイドバーにしか使う予定がなければ Enjoy Instagram が簡単

icon-download Enjoy Instagram

プラグイン「Enjoy Instagram」をインストール及び有効化し、設定画面を開く。
01:Create an Instagram Application
02:Enter Your Client ID and Client Secret

Enjoy-Instagram 設定

とあります。

まず、インスタグラムアプリケーションを作成して、それからクライアントIDとクライアントシークレットを登録するようです。

[Create an Instagram Application]をクリックして、5項目名にある
「Website URL」と「Redirect URI」が後で必要になりますので、テキストエディタなどにコピーペーストしておきます。

Enjoy-Instagram

デベロッパーサイトでアプリケーションを作成する

icon-arrow-right Instagram Developers

Instagram-Developer

右上の[Register a New Client]をクリック。

Manage-Clients

「Application Name」と「Description」を記入する。
何でもかまいませんが、「Application Name」に Instagram、IG、insta、gram の文字は使用できないようになっています。

「Website URL」と「Redirect URI」に記入する文字は先程テキストエディタにコピーしておいたものをコピーペーストします。

Register-a-Client

CAPTCHA の数字を入力して[Register]ボタンをクリックするとアプリケーションが完成です。

Manage-Clients

ここで作られた「Client ID」と「Client Secret」をWordPress側のEnjoy Instagram 設定画面の[02:Enter Your Client ID and Client Secret]に記入して[Authorize Application]をクリックする。

Client ID Client Secret

インスタグラムの写真を記事に貼り付ける

Enjoy Instagram も記事やサイドバーに貼り付ける方法は簡単です。
[enjoyinstagram_mb]か[enjoyinstagram_mb_grid]と書くだけで表示できます。
※カッコは半角の [ ] に変えてください。

Enjoy Instagram の表示設定

設定画面でカルーセル表示、グリッド表示の設定を変えることができます。

Enjoy-Instagram設定

ショートコードでの細かな設定はできません。

インスタグラムに投稿した写真を1枚だけ記事に貼り付ける方法

icon-arrow-circle-right インスタグラムの写真や動画を自分のブログに貼り付ける[公式]方法

という記事も書きましたのでご参考に

まとめ

今回、2種類のインスタグラムウィジェットプラグインをご紹介しました。
簡単に固定的なウィジェットを作るなら後者の Enjoy Instagram を、記事毎に異なる表示のウィジェットを使うなら前者の Instagram Feed を使うと良いです。

Instagram Feed は記事内で使用、サイドバーには Enjoy Instagram を貼り付ける。という使い方もあります。

Enjoy Instagram は、Google の PageSpeed Insights でひっかかるようなので外しました。

今日も元気に楽しく♪

インスタグラム関連記事

WordPress関連記事

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter で畑本伸一|CreativeLifeHackをフォローしよう!

-オンラインメディア
-,

運営者プロフィール

畑本伸一

icon-maleSINTO Hatamoto (畑本伸一)
写真とオンラインメディアの話が大好きです。ワードプレス、インスタグラム、ピンタレストの活用方法、初心者ハンドメイド作家さん向けの商品写真の撮り方、編集方法、オンラインメディア活用などをセミナー講師としてお伝えしています。 I Love Fujifilm X-E2
icon-arrow-circle-right 詳しいプロフィール

共著

Facebookページ「Creative Life Hack」TwitterGoogle+ページ「自分メディアの育て方」instagramPinterestFeedly RSS

Copyright© クリエイティブライフハック , 2016 AllRights Reserved.