Enter your search terms:
Top
 

インスタグラムをブログに自動で貼り付ける連携プラグイン「Enjoy Instagram」の設定方法と使い方

インスタグラムとブログ、ホームページを連携させる超便利プラグイン

今や月間アクティブユーザー数が世界で3億人を超え、利用率ではTwitterを抜き、Facebookに次ぐユーザーを抱える画像ソーシャル・アプリ「Instagram(インスタグラム)」。

写真と動画のソーシャルメディア「インスタグラム」の最大の特徴は、スマホやiPhoneで撮った写真を簡単にかっこよく加工できるという点です。

最近では、モデルのダレノガレ明美さんら芸能人のインスタグラムもよく話題になりますよね。

やっぱり自分で撮った写真は、みんなにかっこよく見られたいものですが、インスタグラムでは、友達やフォロワーが撮った写真に「いいね!」やコメントを残していけるものの、それ以外のつながりがない人には、なかなか見てもらうことができません。

もっとたくさんの人にインスタグラムで撮った写真を見てもらうには、ホームページやブログに貼り付ければいいのですが、1つ1つEmbed Codeを貼り付けるのは結構面倒なものです。

そこで、便利なのが無料のプラグイン「Enjoy Instagram」。

このプラグインは、Instagramとホームページやブログとを連動してくれるワードプレス用のプラグインです。スマホやiPhoneのインスタグラム・アプリで投稿した写真は、何もしなくてもホームページやブログも自動で更新されるという優れものです。

今回は、そんな便利なインスタグラム連動プラグイン「Enjoy Instagram」の設定と使い方について紹介します。

ワードプレス・プラグイン「Enjoy Instagram」の設定方法

1.「Enjoy Instagram」をインストール

インスタグラム連動プラグイン設定1
まずは、その他のワードプレスのプラグインをインストールする時と同じく「プラグイン」⇒「新規追加」から「Enjoy Instagram」を検索し、インストール、そして「有効化」します。

2.Instagramアプリケーションの作成

インスタグラム連動プラグイン設定2
次に、「設定」⇒「Enjoy Instgram」に進むと、上記のような設定画面になります。ここでは「Instagramアプリケーション」といって、連動するためのAPI Keyを取得する作業を行います。ここからの作業は英語表記になりますが、特に難しくはないので、以下の順序で行ってください。

  1. インスタグラムの開発者サイトに行き(リンクをクリック)、インスタグラムのユーザー名とパスワードを入力してログインします。
    インスタグラム開発者サイト

  2. 「Register Your Application」ボタンをクリック
    インスタグラムAPI設定1

  3. 「Register a New Client」ボタンをクリック
    インスタグラムとブログを連動するプラグイン設定方法

  4. クライアントIDを設定
    すると、このような画面になります。
    INstagram開発者サイト設定3
    各項目の設定は以下の通りです。
    Application Name:このアプリに名前を付けてください(何でも構いませんが、Instagram、Instaなどはダメです)。僕はmideax-photosとしました。

    Description:これはこのアプリの説明文です。適当で構いません。僕は「Application for webpage」としました。

    Website:こちらはあなたが連動するホームページのURLをhttp(s)を含めて入力します。僕の場合は「https://mideax.com」

    OAuth redirect_uri:こちらは一旦、ワードプレスのEnjoy Instagramの設定画面に戻り、画像の赤枠線内にあるURLをコピペします。
    Enjoy Instagramの設定方法

そのほかの項目はデフォルトのままでOKです。
最後にCaptureを入力し「Register」ボタンを押せばアプリケーションが作成は完了です。

3.InstagramアプリケーションのIDをEnjoy Instagramの設定画面に入力

アプリケーションが作成されると以下のような画面に変わります。
IDをEnjoy Instagramの設定画面に入力1

IDをEnjoy Instagramの設定画面に入力2
この「CLIENT ID」と「CLIENT SECRET」をコピーして、Enjoy Instagramの設定画面に入力し、「Authorize Application」ボタンをクリックします。

すると、このような画面になるので、Authorizeボタンをクリックします。
Enjoy Instagramの設定

さぁ、これで設定ができました!
Enjoy Instagramのプロファイル画面

4.Enjoy Instagramの表示設定

次に、プロフィル画面の横の「Setting」タブから表示設定を行います。
eEnjoy Instagramの表示設定1
各項目は以下の通りです

  • Inclusion mode:自身のプロフィルから写真を表示させるのかハッシュタグ(#)の写真を表示させるのかを設定します。
  • Carousel settings:Carousel とは小さなスライド画面によって見せるパターンのことです。「Images displayed at a time」とは一度に表示する写真の枚数、「Navigation buttons」はナビゲーションボタンのことです。
  • Grid view settings:はマス目状に見せる一覧のことです。「Number of Columns、Row」とは行と列のことです。

設定できたら「Save Setting」ボタンをクリックしてください。

5.Enjoy Instagramのショートコードを貼り付けよう!

さて、設定が完了したので、実際のページに張り付けてみましょう。
貼り付けは、まずはビジュアル編集のショートカットボタンの中から「Enjoy Instagram」のボタンをクリックします。
Instagramのショートコードを貼り付け1

すると、CarouselかGrid viewかを聞かれるので、選択して、「Insert」ボタンをクリックするだけです。

実際の見え方はこのようになります。
Carouselの場合
[enjoyinstagram_mb]


Grid viewの場合
[enjoyinstagram_mb_grid]

また、ウィジェット設定も可能ですので、サイドバーやフッターなどに表示することも可能です。
このように、簡単にインスタグラムの写真をセットできる「Enjoy Instagram」。プレミアム版を購入すると、画像のサイズや切り替わりのスピードなども自在に変更できるようになりますが、スマホで見る分には最適なサイズでもあるので、無料版でも十分に楽しめると思います。