FC2ブログ
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告
自分のインスタグラムをwebサイトに表示する方法があまりにもめんどくさかったので
シンプルに目的に向かってメモします。

必要なもの
取得方法①で説明
Client ID
Client Secret
Website URL
Redirect URI
------------------------------
取得方法②で説明
access_token
------------------------------
取得方法③で説明
userId
------------------------------
取得方法④で説明
jquery-instagram.js

①ここからインスタグラムの管理画面にログイン
https://instagram.com/developer/

150514_3.jpg

ここから登録すると下記が取得できます。
Client ID
Client Secret
Website URL
Redirect URI

150514_4.jpg

ここ重要!右上の「EDIT」から入って「Disable implicit OAuth」のチェックを外します。
これをやらないと、次に取得するaccess_tokenでエラーになります!

150514_2.jpg

②access_tokenを取得します。
https://instagram.com/oauth/authorize/?client_id=【Client ID】&redirect_uri=【Redirect URI】&response_type=token

③userIdを取得します。
下記のサイトで、ログインIDを入れるとuserIdを検索してくれます。
http://www.otzberg.net/iguserid/

④jqueryとjquery-instagram.jsをhead内に読み込みます。
jquery-instagram.js
http://potomak.github.io/jquery-instagram/

⑤スクリプトを設定する。

<script>
$(document).ready(function() {
var clientId = 'Client ID';
$(".instagram").instagram({
accessToken: "***************************",
userId: "***************************",
show: 5,
clientId: clientId
});
});
</script>

Client IDには①、accessTokenには②、userIdには③で取得したものをいれてください。

以上です!
  1. 2015/05/14(木) 18:24:19|
  2. webメモ
  3. | コメント:0
<<猫が喜ぶ!猫テント作りました | ホーム | 家具の色を変えてみる>>

コメント

コメントの投稿


管理者にだけ表示を許可する

DIY Recommend

Least Post

11 | 2018/12 | 01
- - - - - - 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 - - - - -

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。