ワードプレス

ワードプレス&インスタグラム連携埋め込みプラグイン。

更新日:

ブログは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枚だけ記事に貼り付ける方法

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

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

まとめ

シント
今回、2種類のインスタグラムウィジェットプラグインをご紹介しました。簡単に固定的なウィジェットを作るなら後者の Enjoy Instagram を、記事毎に異なる表示のウィジェットを使うなら前者の Instagram Feed を使うと良いです。Instagram Feed は記事内で使用、サイドバーには Enjoy Instagram を貼り付ける。という使い方もあります。Enjoy Instagram は、Google の PageSpeed Insights でひっかかるようなので外しました。

関連記事

 Instagram動画をWordPressブログに埋め込む方法。
 インスタグラムをWordPressブログに埋め込み、サイズ指定方法!
 インスタグラムからシェア。アメブロ連携方法。
 インスタグラム埋め込みembedをブログに貼り付ける方法。
 インスタグラムの使い方

ワードプレスを使いこなせるテンプレートWING AFFINGER5|凄い特典付き 5/15迄

WING AFFINGER5

当ブログでも利用しているワードプレス用のテンプレートです。

WING AFFINGER5 をおすすめする理由

  1. ブログへの訪問者増減に大きな影響力を持つグーグルなどの検索エンジンで、上位表示するための対策に効果的な機能がたくさん搭載されています。
  2. 検索エンジンで上位に表示されるだけではなく、収益化に結びつくことを意識しなければブログ運営は成功とはいえません。収益化に効果的な機能が豊富です。
  3. スマホでの表示速度が読者への満足度を左右します。そのために、検索エンジンのグーグルが推奨するAMP化。記事ごとにAMP化を選択可能なのが WING AFFINGER5 の強さでもあります。

WING(AFFINGER5版)

プロフィール

畑本伸一

 奏でる写真作家| 畑本伸一
1969年 大阪市生まれ 京都市在住。写真作家|写真は音を奏でるだろうか。そんな事を考えながら写真を撮っています。デジタル写真教室 講師フォトマスター検定1級写真印刷ツールデザイン制作|写真・カメラ・Webメディアに関する執筆。  共著:Pinterestビジネス講座(翔泳社出版)  詳しいプロフィール
 Facebook  Twitter  Instagram  Google+ RSS Feedly

PickUp

見上げる桜 1

トップページの記事一覧に表示されているサムネイル画像を大きくしたいと思いませんか? 当ブログで利用しているワードプレステーマを WING - AFFINGER5 に変えて数日が経ちます。多くの事が管理 ...

京都 円山公園の桜|2018.3.28 2

当ブログでも採用しているワードプレスのテーマ「AFFINGER」の最新版「AFFINGER5 WING」の公開及び販売が始まりました。今回も大幅に機能アップや高速化が図られている模様です。早速購入。AFFINGER4購入者は期間限定でお買い求め安くなっています。

-ワードプレス
-, , , ,

Copyright© フォトクリエイティブ|写真のある暮らし , 2018 All Rights Reserved.