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

09 | 2018/10 | 11
- 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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。