フッターにインスタグラムの写真を載せたい
※序章が長いのでやり方だけ知りたい人は真ん中あたりから読み始めてください。
最近はじめた写真が楽しいInstagram
Twitter大好きなので、アカウントを趣味に応じて使い分けてる私。
Instagaramは複数アカウントの切替が簡単にできないので今まで避けていました。
が、なんだか、Instagramユーザーが増えてる
(facebookから友達が利用し始めました的なのがよくくる)
&もっとたくさんの共有の趣味の人と繋がりたい
と思い、Instagramを始めることに。
投稿したInstagramはTwitterと連携
IFTTTというツールでInstagramで投稿した写真は
Twitterに流れるように設定。
(そもそもInstagramから簡単に連携はできるのだけれど、
TwitterのTL上に写真が自動で表示されないので。)
方法はまたこんど。
写真メインのブログはInstagramの併用がおすすめ
Instagramを使い初めて思ったのは、タグをとにかくつけておくと、
自分が投稿した写真に関連のある他の人が投稿した写真を簡単に
しかも沢山見ることができるのが、思っていたよりよい。
例えば、ハイビスカスを投稿した時に #ハイビスカス と 英語で
#hibiscusとつけておくと
![#hibiscus](http://pochinext.com/wp-content/uploads/2015/07/Screenshot_2015-07-06-14-44-11-576x1024.png)
#hibiscus
簡単に沢山見ることできる!
しかも日本にとどまらず世界中の人と。
![rabbit](http://pochinext.com/wp-content/uploads/2015/07/Screenshot_2015-07-06-14-44-35-576x1024.png)
rabbit
写真を見て楽しむので言葉がわからなくても問題ないですよね。
ガーデニングとビオトープを楽しんでいる私として
かなりはまってます。
自力で作成を考えたけれどやっぱりプラグインで・・・
さて、いざInstagramをWordPressブログ内で表示しようとした時に、
いろいろぐぐりました。
Instagram APIを取得してWebサイトと連携し、投稿写真を自動に掲載する方法
instagramのフィードをサイトに取り込むのに手こずった件。【導入編】
このあたり。
で、、、も。
なんだか難しくて・・・・(・∀・)
プラグイン使う事にしました。
方法だけみたい方はこちからプラグイン:Alpine PhotoTile for Instagram
半年前に使っていた記憶があるんです。
ただ、サイトがすごく重くなって辞めた記憶が・・・
でも、ギャラリー風の表示ができ、やりたい事に一致するの
もう一度チャレンジすることにしました。
Instagram側ので設定
Instagramデベロッパーサイトから設定
http://instagram.com/developer
↑から設定します。
![Instagram_Developer_Documentation](http://pochinext.com/wp-content/uploads/2015/07/Instagram_Developer_Documentation-1024x823.png)
Residter your Application をクリック
![Developer_Signup_•_Instagram_Developer_Documentation](http://pochinext.com/wp-content/uploads/2015/07/1e2c9698505de15665fdbd993926eba8.png)
Your website:Instagramを連携するサイトURL
Phone number:電話番号
What do you want to build with the API?(APIを何に使う?):
「A plugin for my wordPress website. 」でOKのよう。
よくわからず私はWEBSITEと記入しちゃいました。
規約にチェックを入れて「Sign up」をクリック
最初の画面に戻るので![Manage_Clients_•_Instagram_Developer_Documentation](http://pochinext.com/wp-content/uploads/2015/07/55e652ba35f6559ad03461429381e3dd.png)
今度はResister a New Client をクリック
必要事項入力していきます。
WordPressのプラグイン設定の画面で何を記入していいか記載されてます。
(後述のWordPress側での設定を参照)
Application Name:連携させるサイトのタイトル
Description:「Alpine PhotoTile for Instagram WordPress plugin」
Website:サイトURL
Redirect URI:
![AlpineTile__Instagram_‹_ぽちのベランダガーデニングとビオトープ_—_WordPress 2](http://pochinext.com/wp-content/uploads/2015/07/78b1ee3d30ea4b97370cb4d99c81e1d4.png)
WordPress設定画面に表示されている上記赤枠を入力
すべて入力後Resisterをクリック。
上記が表示されればOK。
次はWordPressプラグイン画面での設定へ。
WordPress側ので設定
![プラグインを追加_‹_ぽちのベランダガーデニングとビオトープ_—_WordPress](http://pochinext.com/wp-content/uploads/2015/07/00f7429b599e8eedffb9f14402d8ba44.png)
Alpine PhotoTile for Instagram をインストール。
プラグインを有効にした後に「Add User」をクリック。
![AlpineTile__Instagram_‹_ぽちのベランダガーデニングとビオトープ_—_WordPress](http://pochinext.com/wp-content/uploads/2015/07/74334183d5edcf43fb14344cfa125e10.png)
いろいろと設定方法が英語で書かれています。
先ほどInstagramの設定でてきた
Redirect URLに記載する内容がこちらに書かれています。
赤字をコピペでOK。
![AlpineTile__Instagram_‹_ぽちのベランダガーデニングとビオトープ_—_WordPress 3](http://pochinext.com/wp-content/uploads/2015/07/242e47f5dddcd696502ebce29913fafc.png)
Instagramの設定で取得したCLIENT ID と CLIENT SECRETをそのままコピペ。
Add and Authorize New User をクリック。
![Authorization_Request_—_Instagram](http://pochinext.com/wp-content/uploads/2015/07/c8a30cc6bef6082f2f35c59294028d89.png)
Authorize をクリック
![AlpineTile__Instagram_‹_ぽちのベランダガーデニングとビオトープ_—_WordPress 4](http://pochinext.com/wp-content/uploads/2015/07/ad42af4231fffbdf64f970db5e33dd77.png)
無事登録完了です。
ウィジット登録
![ウィジェット_‹_ぽちのベランダガーデニングとビオトープ_—_WordPress](http://pochinext.com/wp-content/uploads/2015/07/fac935d7b47a48d1d59f0f87bb338f1f.png)
外観>ウィジットを見ると
Alpine PhotoTile for Instagram ができています。
![ウィジェット_‹_ぽちのベランダガーデニングとビオトープ_—_WordPress 2](http://pochinext.com/wp-content/uploads/2015/07/e1739fc1b6a96154ba8d93b966f14e0e.png)
写真の枚数や、写真の形、サイズ、もろもろを好みに設定。
![PLANTS___ぽちのベランダガーデニングとビオトープ](http://pochinext.com/wp-content/uploads/2015/07/8cc69afbed620d82cd435fba3b70659a.png)
無事設定出来ました!