WPプラグインAlpine PhotoTile for Instagram:Instagramの投稿写真をWordPressブログに埋め込む方法

フッターにインスタグラムの写真を載せたい

※序章が長いのでやり方だけ知りたい人は真ん中あたりから読み始めてください。

最近はじめた写真が楽しいInstagram

Twitter大好きなので、アカウントを趣味に応じて使い分けてる私。
Instagaramは複数アカウントの切替が簡単にできないので今まで避けていました。

が、なんだか、Instagramユーザーが増えてる

(facebookから友達が利用し始めました的なのがよくくる)

&もっとたくさんの共有の趣味の人と繋がりたい
と思い、Instagramを始めることに。

投稿したInstagramはTwitterと連携

IFTTTというツールでInstagramで投稿した写真は
Twitterに流れるように設定。
(そもそもInstagramから簡単に連携はできるのだけれど、
TwitterのTL上に写真が自動で表示されないので。)
方法はまたこんど。

写真メインのブログはInstagramの併用がおすすめ

Instagramを使い初めて思ったのは、タグをとにかくつけておくと、
自分が投稿した写真に関連のある他の人が投稿した写真を簡単に
しかも沢山見ることができるのが、思っていたよりよい。

例えば、ハイビスカスを投稿した時に #ハイビスカス と 英語で
#hibiscusとつけておくと

#hibiscus

#hibiscus

簡単に沢山見ることできる!
しかも日本にとどまらず世界中の人と。

rabbit

rabbit

写真を見て楽しむので言葉がわからなくても問題ないですよね。

ガーデニングとビオトープを楽しんでいる私として
かなりはまってます。

自力で作成を考えたけれどやっぱりプラグインで・・・

さて、いざInstagramをWordPressブログ内で表示しようとした時に、
いろいろぐぐりました。

Instagram APIを取得してWebサイトと連携し、投稿写真を自動に掲載する方法
instagramのフィードをサイトに取り込むのに手こずった件。【導入編】

このあたり。
で、、、も。
なんだか難しくて・・・・(・∀・)

プラグイン使う事にしました。

方法だけみたい方はこちからプラグイン:Alpine PhotoTile for Instagram

半年前に使っていた記憶があるんです。
ただ、サイトがすごく重くなって辞めた記憶が・・・

でも、ギャラリー風の表示ができ、やりたい事に一致するの
もう一度チャレンジすることにしました。

Instagram側ので設定

Instagramデベロッパーサイトから設定

http://instagram.com/developer
↑から設定します。

Instagram_Developer_Documentation

Residter your Application をクリック

Developer_Signup_•_Instagram_Developer_Documentation

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

 

今度はResister a New Client をクリック

 

Register_a_Client_•_Instagram_Developer_Documentation 2必要事項入力していきます。
WordPressのプラグイン設定の画面で何を記入していいか記載されてます。
(後述のWordPress側での設定を参照)

Application Name:連携させるサイトのタイトル
Description:「Alpine PhotoTile for Instagram WordPress plugin」
Website:サイトURL
Redirect URI:

AlpineTile__Instagram_‹_ぽちのベランダガーデニングとビオトープ_—_WordPress 2

WordPress設定画面に表示されている上記赤枠を入力

すべて入力後Resisterをクリック。

Manage_Clients_•_Instagram_Developer_Documentation 2上記が表示されればOK。
次はWordPressプラグイン画面での設定へ。

WordPress側ので設定

プラグインを追加_‹_ぽちのベランダガーデニングとビオトープ_—_WordPress
Alpine PhotoTile for Instagram をインストール。
プラグイン_‹_ぽちのベランダガーデニングとビオトープ_—_WordPressプラグインを有効にした後に「Add User」をクリック。

AlpineTile__Instagram_‹_ぽちのベランダガーデニングとビオトープ_—_WordPressAlpineTile__Instagram_‹_ぽちのベランダガーデニングとビオトープ_—_WordPress 2いろいろと設定方法が英語で書かれています。

先ほどInstagramの設定でてきた

Redirect URLに記載する内容がこちらに書かれています。
赤字をコピペでOK。

AlpineTile__Instagram_‹_ぽちのベランダガーデニングとビオトープ_—_WordPress 3

Instagramの設定で取得したCLIENT ID と CLIENT SECRETをそのままコピペ。
Add and Authorize New User をクリック。

Authorization_Request_—_Instagram

Authorize をクリック

AlpineTile__Instagram_‹_ぽちのベランダガーデニングとビオトープ_—_WordPress 4

無事登録完了です。

ウィジット登録

ウィジェット_‹_ぽちのベランダガーデニングとビオトープ_—_WordPress
外観>ウィジットを見ると
Alpine PhotoTile for Instagram ができています。

ウィジェット_‹_ぽちのベランダガーデニングとビオトープ_—_WordPress 2

 

写真の枚数や、写真の形、サイズ、もろもろを好みに設定。

PLANTS___ぽちのベランダガーデニングとビオトープ

無事設定出来ました!

JOYSOUNDの新機種MAXも登場することですし、取材時のOAを。

約一年前、取材を受けた時のお話

告知に使われた画像
私の活動はおもに
カラオケです。
わーただの趣味―。

えぇ。

カラオケでバンドもできちゃいます!楽しんでますよ!
ということについて取材を一年前に受け、
BS-TBSのグローバルナビフロント内でOAされました。

過去記事はこちら→BS-TBSさんの番組の取材受けてきたよ

動画を公開

一年手元に保管しておきましたが、いよいよ公開しちゃおう。
だって、JOYSOUNDさん新機種でるんだもの。
JOYSOUND MAX!!!!!!!!

新機種発表会もいってきました(Facebookページへ

今月7月、うたスキ動画のWEBサイトも完全リニューアルされたんですのよ。

この部分使われるだろうなぁ〜。
と思った部分がやっぱり使われましたね。
あぁ恥ずかしい。

新機種でるよ

JOYSOUND MAXでるよ!!!!!!!!
これからもうたスキ動画楽しもう!

そげなこっつぁ!

SHIFT-JIS:coda2でどうにもこうにも半角チルダが入力できずにコピペで解決

Codaで起きたこと前提

WEBサイトの更新が多いので、エディタは99%、Coda2使っています。

なので、他のエディタだとどうなるのかわかりません・・・

リンク先に入った「~」を入力すると?

Shift-JISで書かれたWEBサイト更新

なんだかんだShift-JISでかかれたサイト多いですよね。
指定されたリンクをそのままCoda上でコピペすると、
coda2表記
こんな表示がされ、挿入すると
「~」が「?」に変わってしまう。

解決方法

うまくいってるリンクからコピペ

もともとすでに書かれていたリンクがあったのでそこを確認すると

「~」が「‾」で書かれていた。
なので、これをそのままコピペ。

すると、先ほどの
「UTF-8に変換しますか?」の表示はなくなった。

「‾」ってなんなの?
とぐぐると、オーバーラインというみたいですね。
でも、
オーバーラインと打っても変換リストにはでてこないし・・・・

「きごう」と打つと全角オーバ(ー)ラインが最後の方に候補にあがるだけだった・・・

チルダについていろいろ調べてもみたけれど、
つらいのでやめました。

感想

Shift-JISいやです。
文字化け嫌です。難しいことはわからないので、今日みたいなことが起きた時は
コピペで回避します。