薄まる自分
PCやら育児やら、徒然についてメモります。
<< December 2017 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>
 
日本最大級の靴のネット通販 ロコンド.jp ブログパーツ track feed 薄まる自分
RECOMMEND
RECOMMEND
プログラミングGroovy
プログラミングGroovy (JUGEMレビュー »)
関谷 和愛 上原 潤二 須江 信洋 中野 靖治
RECENT COMMENT
RECENT TRACKBACK
カウンタ
ブログパーツUL5
JUGEM PLUS
MOBILE
qrcode
PROFILE
PR
無料ブログ作成サービス JUGEM
 
スポンサーサイト

一定期間更新がないため広告を表示しています

- | | - | - | - | - |
Instagramの自分写真を表示できるブログパーツ。
***OBSOLETED!!!***
instagram の本家がAPIを公開したことで、heroku.com も使えなくなっています。
このブログパーツもどきも当然使えなくなりました。

instagram.heroku.com を利用させてもらっている即席ブログパーツです。

←に設置しているのがそのブログパーツで自分がInstagramで投稿した写真をいくつか表示することができます。


設置方法

  1. 自分のInstagramのユーザIDを調べる
    Instagram では公開されていませんが、自分のユーザIDが払い出されています。それを調べます。
    調べ方は、
    1. まずは、Instagramのプロフィール画像を登録します。すでに登録している人は登録のひつようはありません。登録方法は、iPhoneのInstagram のアプリを起動し、右下の自分のログインネーム(@aegとか)をクリックして、その中のメニュ「プロフィール画像を変更」により登録します。
    2. Instagramのアプリにて、写真をtwitter やfacebookに連携しつつ投稿する。
      投稿の「なに?」「どこで?」を入力する画面で下にある共有の「Twitter」や[Facebook」を「オン」にして投稿します。
    3. Twitterなどに投稿された写真のURLをPCのブラウザにてクリックして、InstagramのWeb画面を表示します。
    4. 写真の左下に自分のプロフィール写真があるので、写真だけをウィンドウに表示するを選びます。
    5. そして表示されたURLの画像ファイル名の profile_ に続く6桁の数字がユーザIDになりますので、記録しておいてください。
      http://distillery.s3.amazonaws.com/profiles/profile_192008_75sq_1294936203.jpg
  2. ブログパーツをブログへの設定するために
    ブログパーツは、JavaScript で書かれていますので、自由にJavaScript の設定をできるブログでないと利用することができません。例えば、はてなだいありーは自由にJavaScriptを利用できないようなので使えないと思います。私が使っているjugemでは当たり前ですが利用可能です。
  3. ブログパーツの実際の設定
    まずは、ブログのHTML設定画面にて、可能ならば<HEAD></HEAD>の間に、下記の記述を追加します。
    <script type='text/javascript' charset="Shift_JIS" src='http://sky.geocities.jp/miyopo2009/js/handleInstagramHeroku.js'></script>
    handleInstagramHeroku.js がブログパーツの本体です。
  4. 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 のサービスに依存をしていますのでこちらのサービスが停止してしまった場合、画像が表示されなくなります。



↓の評価ボタンを押してランキングをチェック!
素晴らしい すごい とても良い 良い
スポンサーサイト
- | 01:22 | - | - | - | - |
ベネッセの幼児向け英語教材 ワールドワイドキッズ
コメント
コメントする









 
トラックバック
この記事のトラックバックURL
http://aeg.jugem.jp/trackback/166
 

(C) 2017 ブログ JUGEM Some Rights Reserved.