소개

인터넷 사이트에 인스타그램 게시물 공유하고 싶어요?이것은 매우 쉽다.너는 기본적인 html만 알면 하나를 공유할 수 있다.그것은 사진, 동영상, 심지어 두루마리와 IGTV에 적용된다!

HTML을 쉽게 포함할 수 있습니다.

먼저 게시물로 이동하여 [...] 옵션을 클릭합니다.

및 포함 을 선택합니다.

그런 다음 포함된 코드 복사를 클릭합니다.

타다!

현재 당신은 게시물 생성에 필요한 모든 기능을 갖추고 있습니다.그것을 html에 붙이기만 하면 당신의 게시물은 당신의 사이트에 삽입될 것입니다.
참고: 포함된 게시물은 해당 위치에 따라 조정됩니다.너는 정말 그것을 정형화할 수 없다.그러나 부모 용기 (예:div) 에 넣고 폭을 조절할 수 있습니다.

이 예에서, 나는 코드펜 (온라인 코드 편집기) 을 사용하여 결과를 붙여넣고 삽입된 게시물을 표시합니다.

선택 가능

위 내용은 자신의 사이트에 당신의 인스타그램 게시물을 공유하기에 충분하다.
인스타그램은 동적 삽입 방법도 제공한다.이렇게 하면 우리는 인스타그램 URL에서 댓글을 얻고 표시할 수 있다.
하지만 우선 페이스북 개발자 계정이 필요하고 거기에 앱을 설치해야 합니다.😁). https://developers.facebook.com에 등록

Facebook 응용 프로그램 설정

우리는 페이스북 응용 프로그램이 필요하고 oEmbed 제품을 추가해야 합니다. 이 제품은 댓글을 생성하여 우리를 위해 삽입할 것입니다.

로그인 후 애플리케이션 생성 선택:

이름 및 이메일 입력:

응용 프로그램 대시보드로 이동하여 제품 목록을 아래로 스크롤하여 oEmbed를 찾은 다음 설정을 클릭하여 추가합니다.

설정 > 고급으로 이동하여 애플리케이션 ID와 클라이언트 토큰을 복사하여 나중에 사용할 수 있습니다.

응용 프로그램 ID 옆에 "개발 중"이라는 스위치가 있습니다.

응용 프로그램을 개발에서 라이브로 전환하려면 누르십시오.oEmbed는 응용 프로그램이 실시간 모드일 때만 작동하기 때문입니다.

게시물이 동적으로 포함됩니다.

본 강좌는 따른다.우리는 어떻게 정적 사이트에서 이 점을 실현하는지에 중점을 두고 이 사이트는 클라이언트 캡처 기능을 가지고 백엔드가 없다.전체 창고 개발자에 대해 위의 안내서를 누르면 백엔드에서 코드를 어떻게 얻는지 알 수 있습니다.
비동기적으로 작업하는fetchapi를 사용해야 합니다.async/await의 기본 지식을 습득하는 데 도움이 될 수 있습니다.어떻게 작동하는지 최대한 간단하게 설명해 드릴게요.😄.

1단계: 인스타그램 게시물 가져오기

가져올 URL은 다음과 같습니다.

"https://graph.facebook.com/v8.0/instagram_oembed?url=" + POST_URL + 
"&omitscript=true&access_token=" + APP_ID + "|" + CLIENT_TOKEN

변수 POST\u URL, APP\u ID, CLIENT\u TOKEN을 작성합니다.

POST_URL은 게시물을 복사하여 붙여넣기만 하면 게시물에 대한 링크입니다.

응용 프로그램 id와 클라이언트 영패를 붙여넣습니다.(생산에서 환경 변수에 저장하여 모든 사람이 접근하지 못하게 함)

포스팅을 DOM에 직접 로드하려면

omitscript=true이 필요합니다.이따가 자세히 소개해 드릴게요.

우리는 내장된 자바스크립트 fetch api 를 사용하여 캡처하고 있습니다.
비동기식/대기 모드는 비동기식 코드를 실행하는 데 사용됩니다.Fetch는 비동기적입니다. Fetch의 응답은 시간이 걸려야 도착할 수 있기 때문입니다.
async/await를 사용하려면 함수를 설명하기 전에 async를 설치하고 비동기적인 부분에 await를 추가해야 합니다. 아래와 같습니다.

async function getPost() {
  var response = await fetch(
"https://graph.facebook.com/v8.0/instagram_oembed?url=" + 
POST_URL + "&omitscript=true&access_token=" + APP_ID + "|" + 
CLIENT_TOKEN)
}

fetch의 응답은 JSON입니다. 자바스크립트 대상으로 해석해야 합니다. 다음과 같습니다json() method.

response.json()

이것도 비동기적이기 때문에 우리는 그것 전에wait를 추가했다.

await response.json()

우리는 그것을 data 변수에 저장할 것이다

async function getPost() {
  var response = await fetch(
"https://graph.facebook.com/v8.0/instagram_oembed?url=" + 
POST_URL + "&omitscript=true&access_token=" + APP_ID + "|" + 
CLIENT_TOKEN)
  var data = await response.json()
}

data 우리가 인스타그램에서 얻은 대상을 저장했다.그 형태는 다음과 같다.

{
  "version": "1.0",
  "author_name": "diegoquinteiro",
  "provider_name": "Instagram",
  "provider_url": "https://www.instagram.com/",
  "width": 658,
  "html": "<blockquote class=\"instagram-media\" data-instgrm-ca...",
  "thumbnail_width": 640,
  "thumbnail_height": 640
}

html 재산은 삽입할 직위를 가지고 있다.

는 html 라는 변수에 myPostHtml 저장됩니다.

var myPostHtml = data.html

2단계: 게시물 표시

가장 어려운 부분은 끝났다.이제 HTML에 추가합니다.
가령 우리가div를 가지고 있다면, 그 종류는post-like이다

<div class="post"></div>

다음과 같이 div에 myPostHtml 를 추가합니다.

var post = document.querySelector(".post")
post.innerHTML = myPostHtml 

마지막으로 그것을 불러옵니다.
저희가 피치 요청에 추가한 post 기억나세요?스크립트를 동적으로 추가할 때 실행되지 않기 때문에 무시해야 합니다.
웹 사이트에 이 스크립트의 사본을 포함해야 합니다.위의 지침에 따르면, 여기는.

이 링크의 파일을 내장 파일에 저장합니다.js 파일을 html 코드에 스크립트로 추가합니다.

우리는 지금 끼워넣기를 사용할 수 있다.js.
함수에서 호출될 로드 방법은 다음과 같습니다.

  instgrm.Embeds.process()

우리는 함수 끝에 이것을 추가했다.최종 javascript 코드는 다음과 같습니다.

var POST_URL = "my post url"
var APP_ID = "my app ID"
var CLIENT_TOKEN= "my client token"
var post = document.querySelector(".post")

async function getPost() {
  var response = await fetch(
"https://graph.facebook.com/v8.0/instagram_oembed?url=" + 
POST_URL + "&omitscript=true&access_token=" + APP_ID + "|" + 
CLIENT_TOKEN)
  var data = await response.json()
  var myPostHtml = data.html
  post.innerHTML = myPostHtml
  instgrm.Embeds.process()
}

getPost () 를 호출하면 원하는 위치를 표시하기 위해 삽입된 게시물을 얻을 수 있습니다.

사용자가 입력한 URL의 댓글을 표시하려면fetch()의post\uurl를 사용자가 입력한 URL의 값으로 바꾸기만 하면 됩니다.

예: 다음과 같은 유형의 텍스트 입력이 추가되었습니다.

var POST_URL = "my post url"
var APP_ID = "my app ID"
var CLIENT_TOKEN= "my client token"
var post = document.querySelector(".post")
var inputUrl = document.querySelector(".inputUrl")

async function getPost() {
  // get value from user input
  var url = inputUrl.value
  var response = await fetch(
"https://graph.facebook.com/v8.0/instagram_oembed?url=" + 
url + "&omitscript=true&access_token=" + APP_ID + "|" + 
CLIENT_TOKEN)
  var data = await response.json()
  var myPostHtml = data.html
  post.innerHTML = myPostHtml
  instgrm.Embeds.process()
}

향상된 기능:

주소 표시줄의 게시물 URL뿐만 아니라 사용자가 옵션의 복사 링크를 클릭할 때 사용할 수 있기를 바랍니다.

지금까지는 그것이 작용하지 않을 것이다.posturl 인스타그램의 끝에 다음과 같은 조회가 추가되었기 때문이다.
""
"? utm\u source = ig\u 웹\u copy\u link"를 삭제하고 게시물 URL만 남겨야 합니다.

슬라이스를 사용하여 삭제할 수 있습니다.

  var url = inputUrl.value
  //remove ? and the part after it
  var indexOfQuery = url.indexOf("?")
  if (indexOfQuery !== -1) {
    url = url.slice(0, indexOfQuery)
  }

또는 정규 표현식:

  var url = inputUrl.value
  //remove ? and the part after it
  url = url.replace(/\?.*$/, "")

이렇게!!

읽어주셔서 감사합니다.😁!!