Instagramのonebox用アプリトークンを設定する

私も同じことが起こったと思います。どうすればいいかわかりません。

https://www.instagram.com/p/CIRhYzFM7Lu

組み込まれていませんか?

すべて行ったか、この投稿は何を送っていますか、しかしリンクは組み込まれていません!

私のフォーラムとここ

Instagram や TikTok の動画や写真をフォーラムで見られるようにしたいです。
方法を知っている方はいませんか?費用を払うことも可能です。

この権限または機能をどのように使用するか説明してください
instagram_graph_user_profile 権限により、アプリはユーザーのユーザー プロファイルから読み取ることができます。この権限は、Instagram ユーザー プロファイルのフィールド (ユーザー ID やアカウントの種類など) を読み取るために使用する必要があります。この権限を使用して、「ユーザー」ノード (Instagram ユーザーを表す) とその境界を読み取ることができます。また、この権限を使用して、非識別情報または匿名化された集計データ (復元できないデータに限る) を使用して、広告、マーケティング、またはアプリケーションの強化のためのインサイトと分析を要求することもできます。

Facebook から動画の記録を求められています。

Instagramの埋め込みで壊れていますか?以前は機能していましたが、ここ数日の間にInstagramのリンクが埋め込まれなくなりました。

oEmbedアプリが表示されません。代わりに「Instagram Basic Display」があります。

これは同じものですか?Facebookのアプリが一時停止されているため(長い話です)、現時点では確認できません。

後で…

https://developers.facebook.com/docs/features-reference/oembed-readから以下の点に気づきました。

image

「いいね!」 1

埋め込みがまた壊れました。開発者コンソールをチェックして、明白な問題がないか確認します(明白でも見逃すかもしれませんが!)。

見逃しませんでした!:

これが壊れた埋め込みを修正するかどうかはわかりませんが、とにかく手順を実行しました。

私は2024年1月11日の締め切りを過ぎていますが、それでも大丈夫であることを願っています。

手順は非常に簡単で、過去に確認したさまざまな事項を遵守していることを確認するためにチェックする必要があるチェックボックスが約4つありました。私のサイトでは何も変更されていないため、すべて問題ないはずです。

確認を待つために、あと1、2日待つだけです。

「いいね!」 1

皆さん、こんにちは。最近、Instagramリンクの埋め込みを許可することにしました。このスレッドの指示に従い、Metaでアプリを作成し、トークンを取得し、Discourse OneBoxに追加しました。すべて順調に進みましたが、Instagramの投稿が表示されませんでした。

DiscourseがInstagramリンクをiframeに正しく変換しておらず、その結果、このiframeで表示しても何も起こらないことに気づきました。

例えば、リンク:

https:/www.instagram.com/p/DNuo51_XP5L/

は、このiframeに変換されました:

<iframe width="" height="98" frameborder="0" data-unsanitized-src="https:/www.instagram.com/p/DNuo51_XP5L/embed" seamless="seamless" sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation"></iframe>

そして、iframeで表示しても何も起こらず、空の四角形が表示されました。

これを修正するために、このコードを記述し、カスタムJSコンポーネントとして挿入しました:

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer(api => {
  api.decorateCooked(($cooked) => {
    $cooked[0].querySelectorAll('iframe[data-unsanitized-src]').forEach((f) => {
      const u = f.getAttribute("data-unsanitized-src");
      if (!u) return;

      const fixed = u.replace(/^https:\//, "https://");
      let host = "";
      try { host = new URL(fixed).hostname; } catch (e) {}

      if (host === "www.instagram.com" || host === "instagram.com") {
        const permalink = fixed.replace(/\/embed\/?$/, "/");
        const blockquote = document.createElement("blockquote");
        blockquote.className = "instagram-media";
        blockquote.setAttribute("data-instgrm-permalink", permalink);
        blockquote.setAttribute("data-instgrm-version", "14");

        f.replaceWith(blockquote);

        if (!document.querySelector('script[src*="www.instagram.com/embed.js"]')) {
          const s = document.createElement("script");
          s.async = true;
          s.src = "//www.instagram.com/embed.js";
          document.body.appendChild(s);
        } else if (window.instgrm && window.instgrm.Embeds) {
          window.instgrm.Embeds.process();
        }
      }
    });
  }, { id: "instagram-iframe-to-blockquote" });
});

その後、すべてのInstagram埋め込みが意図したとおりに表示されるようになりました。このコードは、壊れたiframeを<blockquote>に変換します。

このコードが誰かの役に立つことを願っています。

「いいね!」 3