Instagram 릴스용 원박스

기여 버그
1

이것이 버그인지 확실하지 않습니다. 여기 있는 102번과 103번 댓글을 제외하고는 Reels에 대한 언급을 거의 찾을 수 없기 때문입니다.

어쨌든, Instagram Oneboxes를 허용하기 위한 앱 토큰 얻기 방법에 나와 있는 단계를 따라 성공적으로 진행했습니다.

하지만 제 테스트가 불충분했었고, @deb_mitchell이 그 원인을 파악해 주었습니다. 실제로는 https://www.instagram.com/p/ (사진) 또는 https://www.instagram.com/tv/ (IGTV) URL만 작동했던 것입니다.

반면 https://www.instagram.com/reel/ URL(Reels)은 동영상의 스크린샷만 표시할 뿐, 더 이상은 제공되지 않습니다(재생하거나 Instagram에서 해당 콘텐츠로 이동할 수 있는 방법이 없습니다).

예를 들어:

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

누군가 이 문제에 대해 조사해 보셨나요? 작동해야 하는 건지, 아니면 Reels가 완전히 다른 종류의 콘텐츠인 건가요?

2개의 좋아요
How to embed tiktok, reels and spotify?
2

다음 코드를 실행해 볼 수 있을까요?

curl https://graph.facebook.com/v9.0/instagram_oembed?url=https://www.instagram.com/reel/Cc6Rir3lIvB&access_token=TOKEN

TOKEN을 facebook app access token 사이트 설정 값으로 대체한 후, 여기서 출력을 공유해 주세요.

3개의 좋아요
3

다음과 같은 응답을 받습니다:

{
  "version": "1.0",
  "author_name": "uofwyoming",
  "provider_name": "Instagram",
  "provider_url": "https://www.instagram.com/",
  "type": "rich",
  "width": 658,
  "html": "<blockquote class=\"instagram-media\" data-instgrm-captioned data-instgrm-permalink=\"https://www.instagram.com/reel/Cc6Rir3lIvB/?utm_source=ig_embed&amp;utm_campaign=loading\" data-instgrm-version=\"14\" style=\" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);\"><div style=\"padding:16px;\"> <a href=\"https://www.instagram.com/reel/Cc6Rir3lIvB/?utm_source=ig_embed&amp;utm_campaign=loading\" style=\" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;\" target=\"_blank\"> <div style=\" display: flex; flex-direction: row; align-items: center;\"> <div style=\"background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;\"></div> <div style=\"display: flex; flex-direction: column; flex-grow: 1; justify-content: center;\"> <div style=\" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;\"></div> <div style=\" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;\"></div></div></div><div style=\"padding: 19% 0;\"></div> <div style=\"display:block; height:50px; margin:0 auto 12px; width:50px;\"><svg width=\"50px\" height=\"50px\" viewBox=\"0 0 60 60\" version=\"1.1\" xmlns=\"https://www.w3.org/2000/svg\" xmlns:xlink=\"https://www.w3.org/1999/xlink\"><g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"><g transform=\"translate(-511.000000, -20.000000)\" fill=\"#000000\"><g><path d=\"M556.869,30.41 C554.814,30.41 553.148,32.076 553.148,34.131 C553.148,36.186 554.814,37.852 556.869,37.852 C558.924,37.852 560.59,36.186 560.59,34.131 C560.59,32.076 558.924,30.41 556.869,30.41 M541,60.657 C535.114,60.657 530.342,55.887 530.342,50 C530.342,44.114 535.114,39.342 541,39.342 C546.887,39.342 551.658,44.114 551.658,50 C551.658,55.887 546.887,60.657 541,60.657 M541,33.886 C532.1,33.886 524.886,41.1 524.886,50 C524.886,58.899 532.1,66.113 541,66.113 C549.9,66.113 557.115,58.899 557.115,50 C557.115,41.1 549.9,33.886 541,33.886 M565.378,62.101 C565.244,65.022 564.756,66.606 564.346,67.663 C563.803,69.06 563.154,70.057 562.106,71.106 C561.058,72.155 560.06,72.803 558.662,73.347 C557.607,73.757 556.021,74.244 553.102,74.378 C549.944,74.521 548.997,74.552 541,74.552 C533.003,74.552 532.056,74.521 528.898,74.378 C525.979,74.244 524.393,73.757 523.338,73.347 C521.94,72.803 520.942,72.155 519.894,71.106 C518.846,70.057 518.197,69.06 517.654,67.663 C517.244,66.606 516.755,65.022 516.623,62.101 C516.479,58.943 516.448,57.996 516.448,50 C516.448,42.003 516.479,41.056 516.623,37.899 C516.755,34.978 517.244,33.391 517.654,32.338 C518.197,30.938 518.846,29.942 519.894,28.894 C520.942,27.846 521.94,27.196 523.338,26.654 C524.393,26.244 525.979,25.756 528.898,25.623 C532.057,25.479 533.004,25.448 541,25.448 C548.997,25.448 549.943,25.479 553.102,25.623 C556.021,25.756 557.607,26.244 558.662,26.654 C560.06,27.196 561.058,27.846 562.106,28.894 C563.154,29.942 563.803,30.938 564.346,32.338 C564.756,33.391 565.244,34.978 565.378,37.899 C565.522,41.056 565.552,42.003 565.552,50 C565.552,57.996 565.522,58.943 565.378,62.101 M570.82,37.631 C570.674,34.438 570.167,32.258 569.425,30.349 C568.659,28.377 567.633,26.702 565.965,25.035 C564.297,23.368 562.623,22.342 560.652,21.575 C558.743,20.834 556.562,20.326 553.369,20.18 C550.169,20.033 549.148,20 541,20 C532.853,20 531.831,20.033 528.631,20.18 C525.438,20.326 523.257,20.834 521.349,21.575 C519.376,22.342 517.703,23.368 516.035,25.035 C514.368,26.702 513.342,28.377 512.574,30.349 C511.834,32.258 511.326,34.438 511.181,37.631 C511.035,40.831 511,41.851 511,50 C511,58.147 511.035,59.17 511.181,62.369 C511.326,65.562 511.834,67.743 512.574,69.651 C513.342,71.625 514.368,73.296 516.035,74.965 C517.703,76.634 519.376,77.658 521.349,78.425 C523.257,79.167 525.438,79.673 528.631,79.82 C531.831,79.965 532.853,80.001 541,80.001 C549.148,80.001 550.169,79.965 553.369,79.82 C556.562,79.673 558.743,79.167 560.652,78.425 C562.623,77.658 564.297,76.634 565.965,74.965 C567.633,73.296 568.659,71.625 569.425,69.651 C570.167,67.743 570.674,65.562 570.82,62.369 C570.966,59.17 571,58.147 571,50 C571,41.851 570.966,40.831 570.82,37.631\"></path></g></g></g></svg></div><div style=\"padding-top: 8px;\"> <div style=\" color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:550; line-height:18px;\">View this post on Instagram</div></div><div style=\"padding: 12.5% 0;\"></div> <div style=\"display: flex; flex-direction: row; margin-bottom: 14px; align-items: center;\"><div> <div style=\"background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(0px) translateY(7px);\"></div> <div style=\"background-color: #F4F4F4; height: 12.5px; transform: rotate(-45deg) translateX(3px) translateY(1px); width: 12.5px; flex-grow: 0; margin-right: 14px; margin-left: 2px;\"></div> <div style=\"background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(9px) translateY(-18px);\"></div></div><div style=\"margin-left: 8px;\"> <div style=\" background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 20px; width: 20px;\"></div> <div style=\" width: 0; height: 0; border-top: 2px solid transparent; border-left: 6px solid #f4f4f4; border-bottom: 2px solid transparent; transform: translateX(16px) translateY(-4px) rotate(30deg)\"></div></div><div style=\"margin-left: auto;\"> <div style=\" width: 0px; border-top: 8px solid #F4F4F4; border-right: 8px solid transparent; transform: translateY(16px);\"></div> <div style=\" background-color: #F4F4F4; flex-grow: 0; height: 12px; width: 16px; transform: translateY(-4px);\"></div> <div style=\" width: 0; height: 0; border-top: 8px solid #F4F4F4; border-left: 8px solid transparent; transform: translateY(-4px) translateX(8px);\"></div></div></div> <div style=\"display: flex; flex-direction: column; flex-grow: 1; justify-content: center; margin-bottom: 24px;\"> <div style=\" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 224px;\"></div> <div style=\" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 144px;\"></div></div></a><p style=\" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;\"><a href=\"https://www.instagram.com/reel/Cc6Rir3lIvB/?utm_source=ig_embed&amp;utm_campaign=loading\" style=\" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none;\" target=\"_blank\">A post shared by University of Wyoming (@uofwyoming)</a></p></div></blockquote>\n<script async src=\"//platform.instagram.com/en_US/embeds.js\"></script>",
  "thumbnail_url": "https://scontent.cdninstagram.com/v/t51.2885-15/279135839_1334650123705475_6796938684987343913_n.jpg?stp=dst-jpg_e15_p480x480&_nc_ht=scontent.cdninstagram.com&_nc_cat=111&_nc_ohc=vBcUJeIoCN0AX86jRDc&edm=AMO9-JQAAAAA&ccb=7-5&oh=00_AT-KkBuS3s0lBDkoQBwUQoIPp7eB-9YDP3Qq0oqxZkV6oA&oe=62E36EFF&_nc_sid=b9f2ee",
  "thumbnail_width": 480,
  "thumbnail_height": 852
}
3개의 좋아요
4

공유해 주셔서 감사합니다, @Benoit_Hediard!

5

@Falco 게시글에 추가하신 링크를 가져와 봤는데, “reel” 대신 "p"가 들어간 동일한 URL이었어요. 그걸로 작동했어요. "reel"을 "tv"로 바꿔도 작동하네요.

관리자가 아니거나 트래픽이 더 늘었을 때를 위한 진정한 해결책은 아니지만, 자동화 방법을 계속 찾아봐야 해요. 하지만 당장은 우회책이 되고, 일반적인 참고 사항으로도 가치가 있어요.

2개의 좋아요
7

기쁜 소식입니다. 가족에게 yt-dlp로 인스타그램 릴을 도와주면서 배운 트릭입니다.

인스타그램 URL의 /tv/와 /reel/을 자동으로 oneboxing으로 대체하는 PR을 위해 #pr-welcome로 표시합니다.

3개의 좋아요
8

대체해야 하는 것은 /reel/뿐이며 – 어느 쪽을 사용해도 상관없어 보이지만 – /tv/와 /p/ 모두 대체로 사용할 수 있습니다.

1개의 좋아요
9

저도 포럼에서 이 문제를 겪고 있습니다. 인스타그램 릴의 원박싱(oneboxing)이 꽤 자주 사용되는데, PR이 무엇인지 이해가 되지 않습니다. 이것이 수정이 진행 중이라는 뜻인가요?

10

이건 그냥 git 용어일 뿐입니다 (git이나 GitHub이라는 사이트가 뭔지 모르겠다면, 글쎄요… 구글이 당신의 친구가 되어줄 거예요. 하지만 버전 관리를 하는 방법 중 하나이긴 합니다). 그리고 pr은 pull request의 줄임말입니다.

기본적으로, 핵심 개발팀이 해당 기능을 코딩할 시간, 자원, 또는 의지가 없다는 뜻이지만, 대신 그걸 직접 해줄 의사가 있는 다른 사람이 보내는 수정 사항을 받아들이겠다는 의미입니다.

5개의 좋아요
11

이 문제는 기본적으로 YouTube와 쇼츠 관련 문제와 같거나 유사한 것 아닌가요?

실제 문제는 인스타그램 임베딩에 대한 가이드조차도 요즘에는 작동하지 않는다는 점입니다. 따라서 /reels/에서 /p/로 URL을 단순히 조작하는 것만으로 충분한지 확신이 서지 않습니다.

15

페이스북이 이제 인증된 비즈니스 계정에게만 oembed를 허용하는 것 같습니다. 하지만 다른 사이트에서는 페이스북 애플리케이션을 만들거나 oembed 권한을 요청하지 않아도 인스타그램 릴스 영상을 사용할 수 있습니다. 왜 Discourse에서는 이것이 필요한가요?