인스타그램 원박스용 앱 토큰 설정하기

나도 그런 것 같아. 어떻게 해야 할지 모르겠어.

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

통합되지 않나요?

글에 포함된 내용이나 링크를 모두 넣었지만, 링크가 통합되지 않아요!

제 포럼과 여기서요

포럼에서 인스타그램과 틱톡의 동영상 및 사진을 볼 수 있도록 하고 싶습니다.
이를 어떻게 할 수 있는지 아는 분이 있을까요? 비용을 지불할 의향도 있습니다.

이 권한 또는 기능을 어떻게 사용하는지 설명해 주세요
instagram_graph_user_profile 권한은 앱이 사용자의 프로필을 읽을 수 있도록 합니다. 이 권한은 인스타그램 사용자 프로필의 필드(예: 사용자 ID 또는 계정 유형)를 읽는 데 사용되어야 합니다. 이 권한을 사용하여 “User” 노드(인스타그램 사용자를 나타냄) 및 그 범위를 읽을 수 있습니다. 또한, 비식별 또는 익명화된 집계 데이터(해당 데이터가 재식별되지 않는 한)를 사용하여 광고, 마케팅 또는 애플리케이션 개선 목적의 인사이트 및 분석을 요청하는 데 이 권한을 사용할 수 있습니다.

페이스북에서 비디오를 촬영하라고 요청합니다.

인스타그램 임베드에 문제가 생긴 건가요? 예전에는 잘 작동했는데, 지난 며칠 사이에 인스타그램 링크가 더 이상 임베드되지 않습니다.

oEmbed 앱을 찾을 수 없습니다. 대신 'Instagram Basic Display’만 보입니다.

이것이 같은 것인가요? 제 Facebook 앱이 일시적으로 정지되어 있습니다(사연이 길지만), 그래서 당장 직접 확인해 볼 수 없는 상황입니다.

나중에…

https://developers.facebook.com/docs/features-reference/oembed-read에서 이 내용을 확인했습니다.

image

1개의 좋아요

내 임베딩이 또 고장 났어. 개발자 콘솔을 확인해서 뭔가 눈에 띄는 게 있는지 봐야겠어 (있어도 내가 놓칠 수 있으니!)

역시 놓치지 않았어!:

이것이 깨진 임베드를 수정할지는 전혀 모르겠지만, 그래도 해당 단계를 진행했습니다.

2024년 1월 11일 마감 기한이 지났기 때문에 그래도 문제가 없을지 희망을 가져봅니다.

단계는 비교적 간단해서, 여러 가지 사항(과거에 확인했던 내용들)에 대한 준수 여부를 확인하기 위해 체크해야 할 체크박스가 약 4개 정도였습니다. 제 사이트에서 변경된 사항이 없으므로 모두 문제없을 것이라 생각합니다.

이제 확인을 위해 하루 이틀 정도 기다리면 됩니다.

1개의 좋아요

안녕하세요, 최근 사용자들에게 인스타그램 링크 임베딩을 허용하기로 결정했습니다. 해당 스레드의 지침을 따라 메타에서 앱을 생성하고 → 토큰을 발급받아 → Discourse OneBox에 추가했습니다. 모든 과정은 순조롭게 진행되었지만, 인스타그램 게시물이 표시되지 않았습니다.

Discourse가 인스타그램 링크를 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으로 표시할 때 아무 일도 일어나지 않고 빈 사각형만 표시되었습니다.

이를 수정하기 위해 아래 코드를 작성하여 Custom 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" });
});

이후 모든 인스타그램 임베드가 의도대로 표시되기 시작했습니다. 이 코드는 깨진 iframe을

로 변환합니다.

이 코드가 누군가에게 도움이 되길 바랍니다.

4개의 좋아요