***OBSOLETED!!!***instagram の本家がAPIを公開したことで、heroku.com も使えなくなっています。
このブログパーツもどきも当然使えなくなりました。
instagram.heroku.com を利用させてもらっている即席ブログパーツです。
←に設置しているのがそのブログパーツで自分がInstagramで投稿した写真をいくつか表示することができます。
設置方法
- 自分のInstagramのユーザIDを調べる
Instagram では公開されていませんが、自分のユーザIDが払い出されています。それを調べます。
調べ方は、
- まずは、Instagramのプロフィール画像を登録します。すでに登録している人は登録のひつようはありません。登録方法は、iPhoneのInstagram のアプリを起動し、右下の自分のログインネーム(@aegとか)をクリックして、その中のメニュ「プロフィール画像を変更」により登録します。
- Instagramのアプリにて、写真をtwitter やfacebookに連携しつつ投稿する。
投稿の「なに?」「どこで?」を入力する画面で下にある共有の「Twitter」や[Facebook」を「オン」にして投稿します。 - Twitterなどに投稿された写真のURLをPCのブラウザにてクリックして、InstagramのWeb画面を表示します。
- 写真の左下に自分のプロフィール写真があるので、写真だけをウィンドウに表示するを選びます。
- そして表示されたURLの画像ファイル名の profile_ に続く6桁の数字がユーザIDになりますので、記録しておいてください。
http://distillery.s3.amazonaws.com/profiles/profile_192008_75sq_1294936203.jpg
- ブログパーツをブログへの設定するために
ブログパーツは、JavaScript で書かれていますので、自由にJavaScript の設定をできるブログでないと利用することができません。例えば、はてなだいありーは自由にJavaScriptを利用できないようなので使えないと思います。私が使っているjugemでは当たり前ですが利用可能です。 - ブログパーツの実際の設定
まずは、ブログのHTML設定画面にて、可能ならば<HEAD></HEAD>の間に、下記の記述を追加します。
<script type='text/javascript' charset="Shift_JIS" src='http://sky.geocities.jp/miyopo2009/js/handleInstagramHeroku.js'></script>
handleInstagramHeroku.js がブログパーツの本体です。 - BODY部分の設定
続いてブログパーツを実際に表示する <BODY> 部分に下記の記述を追加します。
ここでのポイントは、下記の赤字部分には自分のInstagramのユーザIDを入力する必要があります。もちろん下記のように他人のユーザIDでもその人の写真を表示することもできます。
<script>
<!--
ISHMaxViews =10
ISHWidth = 110
-->
</script>
<script type='text/javascript' charset="Shift_JIS" src='http://instagram.heroku.com/users/192008.json?_callback=handleInstagramHeroku' ></script>
上記に書いてある設定値の説明です。
ISHMaxViews は同時に表示する画像を制御する設定値です。
この数値をいくら多くしても一定数以上は表示されません。
ISHWidth はブログパーツの幅を制御できます。
上記の2つのJavaScript 記述を設定することで、完了です。
実際にブログを表示して、自分が撮ったInstagramの写真が表示されるかどうか試してみてください。
なお、このブログ自体が、instagram.heroku.com のサービスに依存をしていますのでこちらのサービスが停止してしまった場合、画像が表示されなくなります。
↓の評価ボタンを押してランキングをチェック!