刺激的なタイトルだったにも関わらず、たいしてアクセスが集まらなかった前回のこちらのエントリー。

半分ネタですが半分本気。当該エントリー内でも書いたように、ここ数日は Instagram アカウントで投稿を始めつつ、WordPress と Instagram の連携についても調べていました。

そしてやっと自分のイメージ通りの形に仕上がったので、連携手順を解説していきます。

WordPress と Instagram を連携させる2大プラグイン

photo credit: ralphbijker via photopin cc

調べてみると下記の2つのプラグインが、多くのブログで紹介されていました。

• instagrate

記事単位でポストしていく形。インスタグラムで1画像アップしたら都度ワードプレスでも記事が追加されていく形ですね。

• Alpine PhotoTile for Instagram

こちらはギャラリー風に表示させることができたり、ヴィジェットとしても使える模様。

更新はインスタグラムで行い、ワードプレスでは一覧で見れるようにしたいので、今回は後者の “Alpine PhotoTile for Instagram” を使うことにします。

Alpine PhotoTile for Instagram の設定

なにはなくともインストール。

プラグインを見てみると、通常のプラグインとは異なり色々と表示されています。むむ、これは。

まずはワードプレスとインスタグラムの連携をしないと始まらないので、Add User ＝ ユーザー追加をクリックしましょう。プラグインの設定画面に移ります。

設定画面ではプラグインを有効化するための手順が英語で書かれています。またここから先はほぼ英語オンリーに。簡単な英語ですので Google 翻訳を使えばいけると思いますが、私も初めてですので実際にやりながら説明します。

作業に入る前に、インスタグラムアカウントの確認

まずは下記 URL （インスタグラムのデベロッパーサイト）からインスタグラムの API 利用申請をする必要があります。少し面倒な申請程度に考えてください。

http://instagram.com/developer

リンク先に飛んだら、Residter your Application をクリック。

ここでインスタグラムにログインしてないと「先にログインしてから来いやボケ」と表示されてしまいます。画面右上にログインボタンがあるのでクリックし、ID と PASS を入れてログインしましょう。

※つまり当然ですがインスタグラムのアカウントが無いと、以降の作業はできません。必ず事前にアカウントは取っておきましょう。

デベロッパーサインアップ＝まずはユーザー登録

リンクをクリックすると下記の画面が立ち上がるはずです。英語ですけど大丈夫、簡単ですよ。

• Your website

Instagram 連携させたいウェブサイトの URL を記載します。私の場合は　http://kouji.pinonon.com/　となります。

• Phone number

電話番号入力です。海外から認証電話が～ということは無いのでご安心を。私のとこにも来てません。

• What do you want to build with the API?

この API 使って何するの？と。これは設定画面ヘルプにも書かれているとおり、A plugin for my wordPress website. を丸っとコピペしてください。

最後に規約に同意にチェックを入れて Sign up ボタンをクリック。これで第一段階、ユーザー登録は完了です。

CLIENT ID と CLIENT SECRET の取得

画面が戻っていると思います。次は Resister a New Client をクリック。

うわまた英語！だけどもう少しなので頑張ります。

• Application Name

今回連携させる自分のサイトのタイトルを入力してください。

• Description

Alpine PhotoTile for Instagram WordPress plugin これをコピペ。

• Website

サイト URL

• OAuth redirect_url

これはよく分かりませんが、プラグイン設定ページではこのように指示されています。

赤文字部分をコピペしてね、とのこと。なので私の場合は “http://kouji.pinonon.com/wp/wp-admin/options-general.php?page=alpine-photo-tile-for-instagram-settings&tab=add” を貼り付けました。もちろんこれはサイトによって異なりますで注意してください。

あとは認証文字入れて画面下部にある Resister をクリックです。するとようやく CLIENT ID と CLIENT SECRET が発行されました。

これでデベロッパーサイトでの作業は終わりです。

プラグイン設定画面で連携認証完了

ここまで来たらプラグイン設定ページに戻りましょう。

ページ下部に CLIENT ID と CLIENT SECRET を入力するスペースがあります。取りたてホヤホヤのコードをコピペしたら、Add and Authorize New User をクリック。

また認証。げんなりしますが挫けずに Authorize をクリックして進みましょう。

数秒待つと・・・認証完了！やたっ

※このやり方でダメな場合もある

プラグイン設定ページには、もしも上記の方法での認証がうまくいかなかった場合の手法も掲載されています。私はすんなり行きましたのでこの方法についてはスルーしますが、詳しいやり方は下記サイトが大変参考になります。

今回のプラグインインストールの流れも、かなり参考にさせていただきました。

Alpine PhotoTile for Instagram の使用方法

ここから先が本番。このプラグインの実際の使用方法です。

サイドバーウィジェットで使う

外観→ウィジェットに進むと、苦労して入れたプラグインが表示されているはずです。

さっそくサイドバーにドラッグすると、いろいろと自由に設定できるようになっています。

たとえばこんな塩梅。この状態だと、小さい画像にマウスオンすると、上に大きく表示されるようになります。素敵ですね。

でも今回やりたいのはこれじゃないんだな。

記事本文で一覧化させたい

• メイン記事部分で一覧化で見せたい。
• Instagram の更新と連携させたい。

これを実現するためにはどうやら Shortcode Generator を使えば良さそうです。プラグインのタブから Shortcode Generator をクリックします。

ここは説明するよりも実際に自分でいじってみた方が絶対良いので省略します。何度でもやり直しがきくので安心してください。

ひとまずはデフォルトでも構いませんので、下部にある Generate Shortcode をクリックしましょう。

あっという間にショートコードができあがりました。

このプラグインが素敵なのは、左下にある Preview ボタンで確認できること。何度でもやり直しがききますので、設定変更→プレビューの繰り返しで自分が考えていることに近い表示方法を探してみてください。

で、最後にワードプレスで固定ページを新規作成。本文にできあがったショートコードを貼り付けます。

・・・が、デフォルト2カラムだと収まりが悪かったので、急いでカスタマイズ！STINGER LADYS を1カラムにしました。カスタマイズについてのあれこれは省略。

サイトが完全に生まれ変わった

どや（PC）！

どや（スマホ）！

だいぶ変わりましたね。確認はこちらから→http://kouji.pinonon.com/

以上がプラグイン “Alpine PhotoTile for Instagram” のインストールから実際の設定まででした。まだ細かい修正はやるにせよ、ひとまず私が思い描いていた形に近い仕上がりとなり大満足。

以降はワードプレス側では更新の手はかけず、インスタグラムからビシバシ更新していきます。

アクセス数についてはもう気にしないw

では再見。