instagram graph api を使ってインスタと連携する

[mmfiber]

What is an issue

インスタであるタグをつけてつぶやかれた際に、それをウェブサイトに表示する

How to solve it

instagram graph api のアカウント作成 front-page.php に実装をする

[Satosei111997]

つまずいた（ている）ポイント ・インスタとFBの連携作業がかなり複雑であるのと、FBは規制が厳しく承認に時間がかかったりするのでうまくいかなくて混乱するタイミングがかなりある ・自分の知識が足りず、インスタから取得できたデータをどのようにページに載せればいいのかがわからず、調べながらになるので時間がかかる

乗り越え方は、 ・非効率かもしれないが、様々な方法を試した。（アカウント消したり、インスタ側やFB側から連携してみたり、説明とは違うやり方でやってみたり）

[Satosei111997]

とりあえず“本”というハッシュタグの最新5投稿のURLをようやく獲得することができました、！（URLにせずに画像、コメントなどのJsonデータとしても獲得可能です） ただ続けてぶつかった壁が、①PHPで得たURLをhtmlで表示する方法がわからないことと、②このURLを埋め込みとして表示できないことです。 ①適当に$urlに獲得したものをiframeを使い入れてみましたが、Not Foundとなってしまいます。 また、②$urlに入れずにそのままURLをiframeに貼り付けたとしても、refuseされたとなってしまいます。

①→src = <?php $url ?>とすることで解決。しかし枠内が真っ白に。

[mmfiber]

パッとみた感じ43行目のsrc = "$url" が原因ですね。これは変数を展開しようとしてるのかと思いますが、この書き方だと$url という文字列が渡されています。なのでおそらくsrc = <? $url ?> で動くと思います。また、30−34行目はfor 文を使ってみると良いのではないでしょうか。 (edited)

ここまで、自力でできたのはすばらしいです！挫けずに頑張りましょう！

[mmfiber]

①→src = とすることで解決。しかし枠内が真っ白に。

これは、42行目が問題です。

<php $url ?>

ではなく、

<? $url ?> or <php echo $url>

です。

[Satosei111997]

<? $url ?>だと 「The requested resource /%3C? was not found on this server.」

<php echo $url>だと、 「The requested resource /%3Cphp was not found on this server.」

がNot Foundのボックスに書かれて出てきます

[mmfiber]

<? $url ?>だと 「The requested resource /%3C? was not found on this server.」

<php echo $url>だと、 「The requested resource /%3Cphp was not found on this server.」

がNot Foundのボックスに書かれて出てきます

何故だと思いますか？ すこしかんがえてみましょう。

[Satosei111997]

難しいですね、、 インスタのハッシュタグを取るURLが一般に公開されているものではないため、サーバー上に持ってくることができない、みたいなことでしょうか？

[mmfiber]

エラーをみる限りもっと単純なことだと思います。

デベロッパーツールでsrcにどんな値が入っているかみてみるとヒントになるかもしれません。

[Satosei111997]

デベロッパーツールを見てみると、src="<?" $url ?>...</iframe>となっています。 <?だけにかかってしまっているのかと思いきや、クオーテーションを全体に変更してもエラーが増えるだけみたいです。。

[mmfiber]

確認ありがとうございます。

つまりこのことから何がいえますか？

[Satosei111997]

そもそもこのsrcにはphpからとったURLは入らないんですかね？

[mmfiber]

おしいですね。目の付け所はいいです。答えは、変数を展開できていないです。

src="<? $url ?>" としなければいけないようです。ダブルクウォーテーションが追加されています。

こちらを参考にしてください。 https://teratail.com/questions/14696

[Satosei111997]

その場合は文字列にならないのですね、、

src="<? $url ?>"だと NotFoundボックスに「The requested resource/%3C?%20$url%20?%3E was not found on this server.」が出てきました。。

src= "<?php echo $url;?>"> だと、真っ白画面です。

[mmfiber]

わかりました。こっちを使用してください。 src= "<?php echo $url;?>"

そもそも、$url に正しい値ははいっていますか？

[Satosei111997]

すみません、最後の>はiframeの残りです！なので、同じコードです。

echo $urlで一応URLは文字列としてアウトプットされます。ブラウザページの上部に羅列されているのと同じです。

デベロッパーには<iframe id="inline-frame" width="500px" height="500px" src(unknown) https: www.instagram.com p b_vc906jg5m "">となっています。 URLは読み込めているようですが、unknownがいるみたいです。

[mmfiber]

今日はこの後用事があるので、これ以上対応できませんが原因はわかりましたね。HTMLのタグ内でPHPの変数を展開する方法がわかれば言いわけです。また挑戦してみてください。

[Satosei111997]

長時間とってしまい申し訳ありません、！ もう少し粘ってみます。ありがとうございました！

[Satosei111997]

昨日の続きですが、発見として以下がありました。 ①HTML内にphpを入れ込むことはできていること ②urlの後ろにembed/をつけることで、埋め込みurlにすることができ、投稿を表示できること

しかし新たにぶつかった壁として、 ①$url1と$url2をつなげたとしてもダブルクオーテーションが追加されてしまい、表示できない ことがあります。 これができるようにならないと、インスタAPIからもらったものをそのままembed/をつけて表示できるようにすることができません。

様々考えられうることは挑戦してみましたが、一向に解決することができませんでしたので、お答えいただけると幸いです。

↓デベロッパーツールです。

[mmfiber]

$url3と$url1.$url2の違いは、$url1ですね。おそらくここに問題があると考えられます。$url1の値は確認しましたか？

[Satosei111997]

$url1の中身は$url3のダブルクオーテーションの中身と同じです echo $url1.$url2;で表示されている左側のものです

[mmfiber]

$url1, $url1.$url2, $url3, "http://~" これをそれぞれ表示したデベロッパーツールを見せてください

[Satosei111997]

これでいいでしょうか？

[mmfiber]

改行してください。 あと、$url3に使っている"http://~"も表示させてください。

[Satosei111997]

こんな感じです 新しい#本の投稿が出たみたいでURLが変わってしまっています

[Satosei111997]

今見てたら、$url3のembed/がダブルクオーテーションなしにつながっていたのでしたのiframeに入れてみたら表示できました！

[Satosei111997]

[mmfiber]

これは、まだどういった形で使うか、検討段階なのでいったん保留でお願いします。