「API」タグアーカイブ

Instagram API + Slider Pro で インスタグラムの最新フィードをスライダー表示

HPのサイドバーにインスタグラムのカルーセルを埋め込みました。→

PHP

jQuery

※ エンターキーでページ遷移するようになってしまった

最初、ページを開いた後にエンターキーを押すとインスタグラムのページに遷移するようになってしまって困った。

コメント欄や検索欄の Enter も飛ばされる…。

原因は Slider Pro はデフォルトでキーボード操作が ON になっている為で、オプションで False を設定する必要があるのでした。

HTML

参考にさせて頂きました

WordPress に Instagram API を使って タグのギャラリー表示②

前回の記事↓から 少し改造しました。

WordPress に Instagram API を使って タグのギャラリー表示

改造ポイント

  • タグをHTML側で指定可能に
  • ページ内に複数のギャラリーを表示

コード

HTML

「class=”instagram”」の中で、タグの文字列を「class=”tag”」で囲む。

タグ名を表示させたくない場合はstyleで消すと良いと思います。

jQuery

/js/instagram.js

HTMLで取得したタグをPHPにPOST

php

/php/instagram.php

POSTされたタグをセットしてGET 

css

 

表示

タグ:日常

タグ:家族

捕捉

前回、ギャラリー表示したはずの「フクロウ」が最近表示されてないなーと調べてみたら、

    • Instagram の API は最初 Sandbox Mode となっている
    • Sandbox Mode では最新の20件しか取得出来ない
    • APIのフルアクセスには審査が必要で、個人のHPに表示させたいだけじゃだめ

ということで、最新20件よりも過去のデータは取ってこれないんですね、残念。

参考にさせて頂きました

WordPress に Instagram API を使って タグのギャラリー表示

先日書いたフクロウカフェの記事で、「インスタグラムのタグを拾ってギャラリー表示したい!」と試みたところめちゃくちゃ苦労したので、残しておきます。

まずはAPIの取得

登録方法などは色々なサイト様で解説して下さっているのでここではざっくり記載します。

Instagram Developer Documentation にアクセスして、「Regist Your Application」。

下記を入力します。

  • Application Name;適当に
  • Description:適当に
  • Website URL:使用するサイトのURL
  • Valid redirect URIs :私は上記と同じURLにしました
  • Disable implicit OAuth;チェックを外す

登録すると、「CLIENT ID」などが出てきます。

この「CLIENT ID」を使ってアクセストークンの取得をします。

アクセストークンの取得

此処でハマりました。

下記ではタグ取得ができない

色々なサイトに上記のパターンで書いてあったのですが、これだとタグの取得が出来ないんです。(ユーザーの取得はできます。)「 400 error scope=public_content」云々ってエラーが出ます。

APIにアクセスすると、

エラー内容は確かこんな感じでした。

「&scope=public_content」を追加する

謎過ぎてエラーメッセージコピペで検索して辿り着きました。アクセストークン取得時に「&scope=public_content」を追加する必要があるようです。

Can’t get Instagram app work with the new API policy and restrictions 

(英語が読めないから色々体当たり・・・)

再度アクセストークン取得

 

APIにアクセスして確認

Instagram Developer Documentation を参考に適宜変更して、ブラウザのURLにアクセスして、なんか取れてるのを確認します。

例えばこれだと、

こんな風に表示されます。

 

WordPressにGallery表示

ここも色々はまって・・・・例えば「 instafeed.js 」もタグ取得だけが何故か上手くいかず、他ももいくつか試してみてだめだったのでこちらを参考にさせて頂きました。

ほぼこちらのサイト様の通りにさせて頂いたので、詳細の説明は割愛致します。

php

のところを、タグ取得用に修正しました。

※ 2016.10.01追記:タグを直書きだと汎用性が無い…ので、HTML側で指定するように改造しました。

WordPress に Instagram API を使って タグのギャラリー表示②

jQuery

そしてjQueryでもハマったのが・・・・・

WordPress の jQuery は、「$」が使えない!

下記で囲った中に上記の jQuery を 書いた所うまくいきました。

参考にさせて頂きました。

WordPress で jQuery を使う時の注意点

因みに私の環境では、functions.php に記述しなくても jQuery が使えたので、此処は記載していません。

css

スタイルシートに適当にこんな感じで追加しました。もうちょっと調整してもよいかもとは思っています。

表示!

これでやっと表示ができましたー。

こちら のページに表示してあります。Instagramに「フクロウカフェ」タグが追加される度にこのページも自動的に更新されていきます。