WordPressでInstagramのギャラリーページを作る方法
2014/09/04
はじめに
このブログで使っている写真は旅先などでiPhoneでぱちりとしたものが多いわけですが、保存先にはFlickrとInstagramを利用しています。
Flickrはブログで使う写真をすべて、Instagramはその中でも綺麗に撮れたモノをアップロードしています。
今回、試しにInstagramのギャラリーページを作ってみました。
今回はこれの作り方を紹介したいと思います。
使うプラグイン
使うプラグインはAlpine PhotoTile for Instagramです。
インストール
WordPressのプラグイン追加画面で「Alpine PhotoTile for Instagram」と入力して検索すればヒットします。
あとはプラグインの設定をしていきます。
Instagram側の設定
Instagram Developerへの登録
- http://instagram.com/developer/にアクセス
- 「アプリケーションの管理」をクリックします
- 各種情報の入力
- Your Website:自分のサイトのURLを入力
- Phone Number:電話番号を入力(かかってくることはないらしいので適当でも大丈夫かと)
- What do you want to build with the API?:「A plugin for my WordPress website.」と書いておけばOK
入力し終わったらSign upをクリックして登録してください。
アプリケーションの登録
再びhttp://instagram.com/developer/にアクセスし、Register Your Applicationを選びます。
すると、アプリケーション管理という画面が出るので、「新しいアプリを登録」を押すと以下のような画面があらわれます。
Application Name:ブログの名前
Description:「A plugin for my WordPress website.」と書いておけばOK
Website:ブログのURL
OAuth redirect_uri:WordPressの管理画面からAlpine PhotoTile for Instagramの設定を開き、Add Instagram Userタブから下を見ていくと出てくるので、これをコピペします。
Client IDとClient Secretの登録
アプリケーションの登録が終われば、以下のような画面が出ます。
このページに書いてある、Client IDとClient Secretを使います。
Alpine PhotoTile for Instagramの設定の、Add Instagram Userタブを開きます。
このフォームに先ほどのページのClient IDとClient Secretを入力してAdd and Authorize New Userをクリックすれば完了です。
ギャラリーページを作る
Alpine PhotoTile for Instagramの設定から、Shortcode Generatorタブを開きます。
おすすめの設定は以下の通りです。
- Image Links:Use Lightbox
- Style:Wall
- Photo per row:3
- Number of Photos:30
「Add slight image shadow.」
「Add white image border.」
「Highlight when hovering.」
「Add slight curve to corners.」の4つはお好みでチェックを入れるのが良いと思います。
設定が終わったらGenerate Shortcodeを押して、出てきたショートコードを固定ページに貼り付ければギャラリーページのできあがりです!